X'inhuma l-użi prinċipali għal useRef?

Question

Accepted Answer

`useRef` jirritorna kontejner li jista' jinbidel `{ current: ... }` li **jibqa' eżistenti fuq render** iżda, b'mod kritiku, **il-bidla ta' dan MA TIGGERX re-render**. Żewġ użi distinti:

## 1. Aċċess għal nodu DOM

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

## 2. Żomm valur li jista' jinbidel bejn render

Uża dan biex tiftakar xi ħaġa mingħajr ma tikkaġġiona render — timer ids, il-valur ta' qabel ta' prop, istanza ta' librerija:

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

## Il-distinzjoni ewlenija: 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
```

Hekk ir-regola hi: **jekk l-UI għandha tirifletti l-valur, uża state; jekk din hi biss "wara l-kulissi" data, uża ref.** Il-qari/kitba ta' `ref.current` matul ir-render ma hu diskoraġġat (agħmel f'effects/handlers) minħabba li refs mhumiex segwiti miċ-ċiklu ta' render ta' React.