Care sunt principalele cazuri de utilizare pentru useRef?

Question

Accepted Answer

`useRef` returnează un container mutabil `{ current: ... }` care **persists pe parcursul randărilor** dar, crucial, **modificarea acestuia NU declanșează o re-randare**. Două utilizări distincte:

## 1. Accesarea unui nod DOM

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

## 2. Menținerea unei valori mutabile între randări

Folosește-o pentru a reține ceva fără a provoca randări — id-uri de cronometru, valoarea anterioară a unei prop-uri, o instanță a unei biblioteci:

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

## Distincția cheie: 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
```

Deci regula este: **dacă UI-ul ar trebui să reflecte valoarea, folosește state; dacă este doar date "în culisă", folosește o ref.** Citirea/scrierea `ref.current` în timpul randării este descurajată (fă-o în efecte/handler-e) deoarece ref-urile nu sunt urmărite de ciclul de randare al React-ului.