useRef کے اہم استعمال کے معاملات کیا ہیں؟

Question

Accepted Answer

`useRef` ایک تبدیل ہونے والا کنٹینر `{ current: ... }` واپس کرتا ہے جو **render کے درمیان برقرار** رہتا ہے لیکن، اہم بات یہ ہے کہ **اسے تبدیل کرنا دوبارہ render کو متحرک نہیں کرتا**۔ دو الگ الگ استعمالات:

## 1. DOM نوڈ تک رسائی

```jsx
function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // imperatively focus the input on mount
  }, []);
  return <input ref={inputRef} />;
}
```

## 2. Render کے درمیان ایک تبدیل ہونے والی قیمت رکھیں

Render کو متحرک کیے بغیر کچھ یاد رکھنے کے لیے استعمال کریں — timer ids، prop کی پچھلی قیمت، کتاب خانے کی مثال:

```jsx
function Timer() {
  const intervalId = useRef(null);
  const start = () => {
    intervalId.current = setInterval(tick, 1000); // store across renders
  };
  const stop = () => clearInterval(intervalId.current);
}
```

## اہم فرق: ref بمقابلہ state

```jsx
const countRef = useRef(0);
countRef.current++;  // changes the value, but the UI does NOT update

const [count, setCount] = useState(0);
setCount(count + 1); // changes value AND re-renders
```

تو قانون یہ ہے: **اگر UI کو قیمت کو ظاہر کرنا چاہیے تو state استعمال کریں؛ اگر یہ صرف "پردے کے پیچھے" ڈیٹا ہے تو ref استعمال کریں۔** Render کے دوران `ref.current` کو پڑھنا/لکھنا حوصلہ شکنی ہے (effects/handlers میں کریں) کیونکہ refs کو React کے render سائیکل کے ذریعے ٹریک نہیں کیا جاتا۔