Quali sono i principali casi d'uso per useRef?

Question

Accepted Answer

`useRef` restituisce un contenitore mutabile `{ current: ... }` che **persiste tra i render** ma, in modo cruciale, **modificarlo NON innesca un re-render**. Due usi distinti:

## 1. Accedi a un nodo DOM

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

## 2. Mantieni un valore mutabile tra i render

Usalo per ricordare qualcosa senza causare render — timer ids, il valore precedente di una prop, un'istanza di una libreria:

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

## La distinzione fondamentale: 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
```

Quindi la regola è: **se l'UI dovrebbe riflettere il valore, usa state; se è solo dati "dietro le quinte", usa un ref.** La lettura/scrittura di `ref.current` durante il render è sconsigliata (fallo in effects/handlers) perché i ref non sono tracciati dal ciclo di render di React.