Mi a useRef fő felhasználási esetei?

Question

Accepted Answer

A `useRef` egy mutable konténert ad vissza `{ current: ... }`, amely **megmarad a renderelések között**, de döntően, **annak megváltoztatása NEM indít újrarenderelést**. Két különálló felhasználás:

## 1. DOM csomópont elérése

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

## 2. Mutable érték megtartása renderelések között

Használja arra, hogy megjegyezzen valamit anélkül, hogy rendereléseket indítana — timer ids, egy prop előző értéke, egy könyvtár példánya:

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

## A kulcsfontosságú megkülönböztetés: 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
```

Tehát a szabály: **ha a felhasználói felületnek tükrözni kell az értéket, használjon state-et; ha csak "háttérben" tárolt adat, használjon ref-et.** A `ref.current` olvasása/írása renderelés alatt nem ajánlott (végezze el az effects/handlers-ben), mivel a refs-eket React renderelési ciklusa nem követi nyomon.