Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Wie useRef veränderliche Werte über Renders hinweg beibehält und direkten DOM-Zugriff ermöglicht.
useRef gibt ein veränderliches Objekt { current: Wert } zurück, das für die gesamte Lebensdauer der Komponente bestehen bleibt. Anders als Zustand löst das Mutieren von ref.current KEIN Re-Rendering aus. React verwendet Refs auch als Notausstieg für direkten DOM-Zugriff — nach der Commit-Phase setzt React ref.current auf den tatsächlichen DOM-Knoten und ermöglicht so imperativen Zugriff auf die Browser-API.
Beim ersten Rendering erstellt useRef(Initialwert) das Objekt '{' current: Initialwert '}' und speichert es in der Hooks-Liste des Fibers. Bei jedem nachfolgenden Rendering gibt React dasselbe Objekt zurück — so zeigt ref.current immer auf dieselbe Box.
React verfolgt keine ref.current-Mutationen. Wenn Sie ref.current = 5 schreiben, hat React keine Ahnung davon und wird kein Re-Rendering einplanen. Dies macht Refs ideal für Werte, die Sie beibehalten, aber nicht anzeigen möchten.
Wenn Sie eine Ref an ein JSX-Element übergeben (<input ref='{'meinRef'}' />), setzt React ref.current nicht während der Render-Phase. Es wartet bis zur Commit-Phase — nachdem der DOM-Knoten existiert — und setzt dann ref.current = domKnoten.
Wenn die Komponente unmountet, setzt React ref.current = null, bevor Bereinigungseffekte ausgeführt werden. Dies verhindert, dass Ihre Effekte auf einen abgehängten DOM-Knoten zugreifen.
Standardmäßig können Refs nicht an Funktionskomponenten angehängt werden. Verwenden Sie forwardRef, um eine ref-Prop zu akzeptieren und sie an ein DOM-Element weiterzuleiten oder imperative Methoden über useImperativeHandle bereitzustellen.
Das Ref-Objekt. React gibt Ihnen dasselbe Objekt bei jedem Rendering. Mutieren Sie current frei — kein Re-Rendering wird ausgelöst.
Übergeben Sie eine Ref an ein JSX-Element, um den zugrunde liegenden DOM-Knoten in ref.current nach dem Commit zu erhalten. Nützlich für Fokus, Scrollen und Messungen.
Umhüllt eine Funktionskomponente, um eine ref-Prop zu akzeptieren und sie an ein inneres Element weiterzuleiten oder über useImperativeHandle bereitzustellen.
Passt an, was der Elternteil sieht, wenn er auf die Ref eines Kindes zugreift. Anstatt des DOM-Knotens können Sie bestimmte Methoden bereitstellen.
Zustand für Werte verwenden, die die Benutzeroberfläche beeinflussen (löst Re-Rendering aus). Refs für Werte verwenden, die das Rendering nicht beeinflussen: Timer, DOM-Knoten, vorherige Werte, Flags.
1// 1. DOM access — focus an input programmatically2const inputRef = useRef(null);3<input ref={inputRef} />4// After mount: inputRef.current is the <input> DOM node5inputRef.current.focus(); // imperative DOM call67// 2. Persist a value without re-rendering8const timerRef = useRef(null);9timerRef.current = setInterval(tick, 1000);10// Later:11clearInterval(timerRef.current);1213// 3. Read latest state in a stale closure14const countRef = useRef(count);15countRef.current = count; // sync on every render16useEffect(() => {17 const interval = setInterval(() => {18 console.log(countRef.current); // always latest value19 }, 1000);20 return () => clearInterval(interval);21}, []); // empty deps — no stale closure problem
Refs sind Reacts offizieller Notausstieg für imperativen Code. Sie ermöglichen die Überbrückung von Reacts deklarativer Welt mit Browser-APIs, die imperative Aufrufe erfordern (Fokus, Scrollen, Animationen, DOM-Bibliotheken von Drittanbietern). Sie lösen auch das Stale-Closure-Problem in Effects — indem eine Ref mit dem neuesten Zustand synchron gehalten wird, kann man in lang laufenden asynchronen Operationen sicher auf aktuelle Werte zugreifen.
A multi-step checkout form should automatically focus the first empty field when the user navigates to a new step. Using state to track focus causes infinite re-renders.
Attempting to manage focus with useState creates a loop: setState triggers re-render, re-render re-focuses, which fires onFocus, which might set state again. Focus is an imperative DOM operation — it doesn't fit React's declarative model.
Use a ref to directly call `.focus()` on the input DOM node: `useEffect(() => { inputRef.current?.focus() }, [currentStep])`. The ref gives you direct DOM access without triggering re-renders. Focus management is inherently imperative — refs are React's bridge to imperative DOM APIs.
Takeaway: Use refs for imperative DOM operations that don't produce visual output (focus, scroll, measure, select text, play/pause media). These operations are side effects that bypass React's virtual DOM — refs give you a controlled escape hatch.
You need to compare the current value with the previous value to show a 'price changed' animation. Storing the previous value in state causes an extra re-render on every change.
Using `useState(previousPrice)` to track the old price means: price changes → re-render with new price → useEffect sets previousPrice → ANOTHER re-render. Two renders for one price change, and the animation triggers late.
Use a ref: `const prevPriceRef = useRef(price)`. In useEffect, compare `price !== prevPriceRef.current`, trigger the animation, then update: `prevPriceRef.current = price`. Refs update without re-rendering — you get the comparison for free, no extra render cycle.
Takeaway: Refs are the correct tool for 'instance variables' — values that need to persist across renders but shouldn't trigger re-renders when updated. Common patterns: previous values, timer IDs, DOM nodes, external library instances, and accumulator values.