Cilat janë rastet kryesore të përdorimit për useRef?

Question

Accepted Answer

`useRef` kthen një kontejner të ndryshueshëm `{ current: ... }` që **përmajet përgjatë render-imeve** por, në mënyrë vendimtare, **ndryshimi i tij NUK shkakton një ri-render**. Dy përdorime të dallueshme:

## 1. Qasja në një nyje DOM

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

## 2. Mbaj një vlerë të ndryshueshme ndërmjet render-imeve

Përdore atë për të kujtuar diçka pa shkaktuar render-ime — id-et e timer-ave, vlerën e mëparshme të një prop, një instancë të një biblioteke:

```jsx
function Timer() {
  const intervalId = useRef(null);
  const start = () => {
    intervalId.current = setInterval(tick, 1000); // store across renders
  };
  const stop = () => clearInterval(intervalId.current);
}
```

## Dallimi kyç: 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
```

Prandaj rregulla është: **nëse UI-ja duhet të pasqyrojë vlerën, përdor state; nëse është thjesht e dhënë "pas skenës", përdor një ref.** Leximi/shkrimi i `ref.current` gjatë render-imit nuk rekomandohet (bëje atë në effects/handlers) sepse ref-et nuk monitorohen nga cikli i render-imit të React-it.