Verwendung von React Refs und dem useRef Hook

React verwendet einen deklarativen Ansatz. Sie aktualisieren den State, und React aktualisiert die UI. Das funktioniert für die meisten Aufgaben.

Aber manchmal müssen Sie den Virtual DOM verlassen. Möglicherweise müssen Sie direkt auf ein echtes HTML-Element zugreifen. Hier kommen Refs und der useRef-Hook ins Spiel.

Was ist ein Ref?

Ein Ref ist ein Zeiger. Er verbindet React direkt mit einem nativen DOM-Knoten.

Warum useRef statt useState verwenden?

State-Updates lösen ein Re-Rendering aus. Das bedeutet, dass React die Komponente auf dem Bildschirm neu zeichnet. Ref-Updates lösen kein Re-Rendering aus. Das macht sie perfekt für Werte, die sich ändern, aber nicht sofort in der UI angezeigt werden müssen.

Häufige Anwendungsfälle:

• Automatisches Fokussieren eines Eingabefeldes. • Steuerung von Video- oder Audioelementen (Play/Pause). • Messen der Breite oder Höhe eines Elements. • Speichern von Timer-IDs für Intervals oder Timeouts.

So verwenden Sie useRef:

  1. Importieren Sie useRef aus React.
  2. Initialisieren Sie es: const myRef = useRef(null).
  3. Verknüpfen Sie es mit einem Element: <input ref={myRef} />.
  4. Greifen Sie über myRef.current auf den Wert zu.

Beispiel 1: Automatisches Fokussieren eines Eingabefeldes

Wenn ein Benutzer eine Seite betritt, soll der Cursor direkt im Textfeld stehen. Sie verwenden useEffect, um myRef.current.focus() aufzurufen, nachdem die Komponente gemountet wurde.

Beispiel 2: Eine Stoppuhr

Wenn Sie eine setInterval-ID im State speichern, wird die Komponente bei jedem Takt des Timers neu gerendert. Das ist langsam. Wenn Sie die ID in einem Ref speichern, bleibt die Komponente schnell. Der Wert bleibt über die Render-Zyklen hinweg sicher, ohne dem Browser zusätzliche Arbeit zu verursachen.

State vs. Ref:

• State: Löst Re-Rendering aus. Wird für UI-Daten verwendet. Updates sind asynchron. • Ref: Kein Re-Rendering. Wird für den DOM-Zugriff und Speicherzwecke verwendet. Updates sind synchron.

Profi-Tipps für Seniors:

• Vermeiden Sie Überbeanspruchung. Verwenden Sie Refs nur, wenn die deklarative Logik nicht ausreicht. • Speicher bereinigen. Löschen Sie in Ihrer Cleanup-Funktion immer Intervals oder Event-Listener. • Schreiben Sie während des Renderings nicht in Refs. Aktualisieren Sie ref.current nur innerhalb von useEffect oder Event-Handlern. Dies verhindert Seiteneffekte. • Verwenden Sie forwardRef. Wenn Sie einen Ref an eine benutzerdefinierte Child-Komponente übergeben möchten, müssen Sie diese Komponente in React.forwardRef einschließen.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde