useRef యొక్క ప్రధాన ఉపయోగ సందర్భాలు ఏమిటి?

Question

Accepted Answer

`useRef` మార్పు చేయగలిగే కంటైనర్ `{ current: ... }` ను తిరిగి ఇస్తుంది, ఇది **రెండర్‌ల్లో కొనసాగుతుంది**, కానీ, కీలకంగా, **దీనిని మార్చడం రీ-రెండర్‌ను ట్రిగ్గర్ చేయదు**. రెండు విభిన్న ఉపయోగాలు:

## 1. DOM నోడ్‌ను యాక్సెస్ చేయండి

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

## 2. రెండర్‌ల్లో మార్పు చేయగలిగే విలువను నిర్వహించండి

రెండర్‌లను కలిగించకుండా ఏదైనా గుర్తుంచుకోవడానికి దీనిని ఉపయోగించండి — 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 ని ఉపయోగించండి.** రెండర్ సమయంలో `ref.current` ను చదవడం/రాయడం నిరుత్సాహపడుతుంది (effects/handlers లో చేయండి) ఎందుకంటే refs React యొక్క రెండర్ సైకిల్ ద్వారా ట్రాక్ చేయబడవు.