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 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 இலிருந்து செய்யுங்கள்) ref கள் React இன் render சுழற்சியால் கண்காணிக்கப்படாததால்.