useRef ਦੇ ਮੁੱਖ use cases ਕੀ ਹਨ?

Question

Accepted Answer

`useRef` ਇੱਕ mutable container `{ current: ... }` ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੋ **renders ਦੇ ਪਾਰ ਬਰਕਰਾਰ ਰਹਿੰਦਾ ਹੈ** ਪਰ, ਗੱਲ ਦਾ ਗੁੱਢ ਇਹ ਹੈ ਕਿ **ਇਸ ਨੂੰ ਬਦਲਣਾ re-render ਨੂੰ trigger ਨਹੀਂ ਕਰਦਾ**। ਦੋ ਵੱਖ-ਵੱਖ ਵਰਤੋਂ:

## 1. DOM node ਤੱਕ ਪਹੁੰਚ ਕਰੋ

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

## 2. Renders ਦੇ ਵਿਚਕਾਰ ਇੱਕ mutable value ਨੂੰ ਰੱਖੋ

ਇਸ ਨੂੰ ਕੁਝ ਯਾਦ ਰੱਖਣ ਲਈ ਵਰਤੋ ਬਿਨਾ renders ਕੋ trigger ਕੀਤੇ — timer ids, ਪ੍ਰੋਪ ਦੀ ਪਿਛਲੀ ਵੈਲਯੂ, ਇੱਕ 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 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 ਨੂੰ ਵੈਲਯੂ ਨੂੰ reflect ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਤਾਂ state ਵਰਤੋ; ਜੇ ਇਹ ਸਿਰਫ "behind the scenes" ਡਾਟਾ ਹੈ, ਤਾਂ ਇੱਕ ref ਵਰਤੋ।** Render ਦੇ ਦੌਰਾਨ `ref.current` ਨੂੰ ਪੜ੍ਹਨਾ/ਲਿਖਣਾ ਨਿਰਾਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਇਸ ਨੂੰ effects/handlers ਵਿੱਚ ਕਰੋ) ਕਿਉਂਕਿ refs ਨੂੰ React ਦੇ render cycle ਦੁਆਰਾ track ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।