Chapter 13 — useRef

useState re-render qiladi. Ba'zan bizga qiymatni saqlash kerak, lekin re-render kerak emas — bunga useRef javob beradi.

---

13.1 DOM Elementiga Murojaat

Example

App.jsx
React JSXNusxalash
01function SearchBox() {
02  const inputRef = useRef(null);
03 
04  useEffect(() => {
05    inputRef.current.focus(); // komponent mount bo'lganda avtomatik fokus
06  }, []);
07 
08  return <input ref={inputRef} />;
09}

13.2 Re-render Qilmaydigan Mutable Qiymat

Example

App.jsx
React JSXNusxalash
01function RenderCounter() {
02  const renderCount = useRef(0);
03  renderCount.current++; // bu o'zgarish re-render chaqirmaydi
04 
05  return <p>Bu komponent {renderCount.current} marta render bo'ldi</p>;
06}

Mental Model

code.text
TEXTNusxalash
01useState:  qiymat o'zgarsa → re-render bo'ladi → UI yangilanadi
02useRef:    qiymat o'zgarsa → re-render bo'lmaydi → faqat "eslab qolinadi"

13.3 Real-world: Video Player Controls

Example

App.jsx
React JSXNusxalash
01function VideoPlayer({ src }) {
02  const videoRef = useRef(null);
03  return (
04    <>
05      <video ref={videoRef} src={src} />
06      <button onClick={() => videoRef.current.play()}>▶️</button>
07      <button onClick={() => videoRef.current.pause()}>⏸️</button>
08    </>
09  );
10}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Sahifa yuklanganda avtomatik fokus oluvchi input yarating.

🟡 Exercise 2 — Medium

Task: usePrevious hook yordamida oldingi va joriy qiymatni solishtiring.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Counter() {
02  const countRef = useRef(0);
03 
04  function increment() {
05    countRef.current++;
06  }
07 
08  return (
09    <>
10      <p>{countRef.current}</p>
11      <button onClick={increment}>+</button>
12    </>
13  );
14}

Your Task: Tugma bosilganda countRef.current oshadi, lekin ekrandagi son yangilanmaydi. Nega?

<details> <summary>Solution</summary> `useRef`ning o'zgarishi re-render chaqirmaydi, shuning uchun `<p>{countRef.current}</p>` yangi qiymat bilan qayta chizilmaydi. UI'da ko'rinishi kerak bo'lgan sonlar uchun `useState` ishlatilishi kerak: ```jsx const [count, setCount] = useState(0); function increment() { setCount(count + 1); } ``` </details>

📌 Chapter Summary

useRef — DOM elementiga murojaat qilish va re-render qilmaydigan qiymat saqlash uchun. .currentni o'zgartirish UI'ni yangilamaydi.

🎯 Key Takeaways

• useRef — DOM'ga murojaat va "eslab qolish" uchun
• .current o'zgarishi re-render qilmaydi
• UI'da ko'rinishi kerak bo'lgan narsa uchun useState, "eslab qolish" uchun useRef

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const ref = useRef(initialValue);
02ref.current;              // o'qish/yozish, re-render qilmaydi
03<input ref={ref} />       // DOM elementiga bog'lash
04ref.current.focus();      // DOM metodini chaqirish

---