Was sind die Hauptanwendungsfälle für useRef?

Question

Accepted Answer

`useRef` gibt einen veränderbaren Container `{ current: ... }` zurück, der **über Renderings hinweg persistiert**, aber entscheidend **eine Änderung löst KEIN erneutes Rendering aus**. Es gibt zwei unterschiedliche Anwendungen:

## 1. Zugriff auf einen DOM-Knoten

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

## 2. Einen veränderbaren Wert zwischen Renderings halten

Verwenden Sie es, um sich an etwas zu erinnern, ohne Renderings auszulösen — Timer-IDs, der vorherige Wert einer prop, eine Instanz einer Bibliothek:

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

## Warum es wichtig ist

```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
```

Die Regel lautet also: **Wenn die Benutzeroberfläche den Wert widerspiegeln soll, verwenden Sie state; wenn es nur "hinter den Kulissen"-Daten sind, verwenden Sie eine ref.** Das Lesen/Schreiben von `ref.current` während des Renderings wird abgeraten (tun Sie es in effects/handlers), da refs nicht durch Reacts Rendering-Zyklus verfolgt werden.