useRef का मुख्य उपयोग केसहरू के हुन्?

Question

Accepted Answer

`useRef` एक परिवर्तनशील कन्टेनर `{ 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 बीचमा परिवर्तनशील मान राख्नुहोस्

कुनै कुरा याद राखेर 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 चक्र द्वारा ट्र्याक गरिदैन।