Der useRef-Hook ermöglicht das Erstellen einer Variablen, die eine Referenz auf ein Element, einen Wert oder beliebige andere Daten hält, die das Rendern der Komponente nicht beeinflussen. Dies ist nützlich zum Speichern veränderlicher Werte, zum Zugriff auf DOM-Elemente oder zum Bewahren von Werten über mehrere Renderzyklen der Komponente hinweg.

Syntax:

Um den useRef-Hook zu verwenden, wird eine Variable (refVariable) deklariert und das Ergebnis des Aufrufs von useRef() zugewiesen. Optional kann ein Anfangswert (initialValue) als Argument an diesen Hook übergeben werden.

const refVariable = useRef(initialValue);

Hinweis

Der aktuelle Wert kann über die Eigenschaft refVariable.current abgerufen und aktualisiert werden. Der Vorteil von useRef besteht darin, dass diese Werte manipuliert werden können, ohne ein erneutes Rendern der Komponente auszulösen.

Beispiel:

Erstellen wir die Komponente FormInput, die den useRef-Hook verwendet, um eine Referenz auf ein Eingabefeld zu erstellen und dieses zu fokussieren, wenn ein Button geklickt wird.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

In diesem Beispiel erstellt der useRef-Hook eine Referenz namens inputRef. Diese Referenz wird dem ref-Attribut des input-Elements zugewiesen, sodass wir über input auf das inputRef.current-Element zugreifen können.

Zeilenweise Erklärung:

• Zeile 1: Import des useRef-Hooks aus der React-Bibliothek zur Nutzung der Funktionalität;
• Zeile 3: Die Komponente FormInput wird mit der üblichen Funktionssyntax definiert;
• Zeile 4: Initialisierung der Variable inputRef mit dem useRef-Hook, die die Eingabereferenz darstellt;
• Zeilen 6–8: Diese Arrow-Funktion übernimmt die Logik beim Klicken des Buttons, wodurch der Cursor des Benutzers auf das Eingabefeld gesetzt wird;
• Zeilen 10–15: Das Markup der Komponente wird gerendert.
  1. In Zeile 12 wird die Referenz mit dem ref-Attribut gesetzt und die Variable inputRef als Wert zugewiesen;
  2. Der Button in Zeile 13 verwendet das onClick-Attribut, um die auszuführende Funktion beim Klicken anzugeben, in diesem Fall die Funktion handleClick.

Vollständiger App-Code: