useRef માટે મુખ્ય ઉપયોગ કેસ શું છે?

Question

Accepted Answer

`useRef` એક mutable કન્ટેનર `{ current: ... }` પરત કરે છે જે **renders પર span થાય છે** પરંતુ, નિર્ણાયક રીતે, **તેને બદલવાથી 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 સાયકલ દ્વારા ટ્રૅક કરવામાં આવતા નથી.