useRef के मुख्य उपयोग के मामले क्या हैं?

Question

Accepted Answer

`useRef` एक mutable container `{ current: ... }` लौटाता है जो **renders के बीच बना रहता है** लेकिन, महत्वपूर्ण रूप से, **इसे बदलने से 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. Renders के बीच mutable मान रखें

इसका उपयोग करें कुछ याद रखने के लिए बिना renders को ट्रिगर किए — timer ids, prop का पिछला मान, library का instance:

```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 cycle द्वारा ट्रैक नहीं किया जाता है।