useRef चे मुख्य वापर केस काय आहेत?

Question

Accepted Answer

`useRef` एक बदलता येणारा कंटेनर `{ current: ... }` परत करतो जो **render्स ओलांडून टिकून राहतो**, परंतु, महत्त्वाचे म्हणजे, **यात बदल करणे re-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 चे मागील मूल्य, लायब्ररीचे instance:

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

## मुख्य भेद: ref vs 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 cycle द्वारे ट्रॅक केले जात नाहीत.