Jaké jsou hlavní případy použití useRef?

Question

IT Interview Practice · Accepted Answer

`useRef` vrací změnitelný kontejner `{ current: ... }`, který **přetrvává přes renderování**, ale rozhodujícím způsobem **jeho změna neaktivuje opětovné renderování**. Existují dvě odlišná použití:

## 1. Přístup k DOM uzlu

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

## 2. Uchování měnitelné hodnoty mezi renderováním

Použijte jej k zapamatování si něčeho bez spuštění renderování — id timerů, předchozí hodnota prop, instance knihovny:

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

## Klíčový rozdíl: 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
```

Takže pravidlo zní: **pokud by se uživatelské rozhraní mělo odrážet hodnotu, použijte state; pokud se jedná pouze o data "za scénou", použijte ref.** Čtení/zápis `ref.current` během renderování se nedoporučuje (proveďte to v efektech/obslužných programech), protože refs nejsou sledovány React cyklem renderování.

1. Přístup k DOM uzlu

2. Uchování měnitelné hodnoty mezi renderováním

Klíčový rozdíl: ref vs state

Související otázky