Quais são os principais casos de uso para useRef?

Question

Accepted Answer

`useRef` retorna um container mutável `{ current: ... }` que **persiste entre renders**, mas, crucialmente, **alterá-lo NÃO dispara uma re-renderização**. Dois usos distintos:

## 1. Acessar um nó DOM

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

## 2. Manter um valor mutável entre renders

Use-o para lembrar algo sem causar renders — ids de timers, o valor anterior de uma prop, uma instância de uma biblioteca:

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

## A distinção importante: 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
```

Então a regra é: **se a UI deve refletir o valor, use state; se for apenas dados "nos bastidores", use uma ref.** Ler/escrever `ref.current` durante a renderização é desaconselhado (faça isso em effects/handlers) porque refs não são rastreadas pelo ciclo de renderização do React.

## Por que isso importa