Den useRef Hook in React verstehen

In React sind Hooks spezielle Funktionen, die es Entwicklern ermöglichen, den Zustand und andere Funktionen von React zu nutzen, ohne dass sie dafür Klassenkomponenten benötigen. Unter diesen Hooks sticht der useRef Hook als wertvolles Werkzeug für die Verwaltung von Werten und den Zugriff auf Document Object Model (DOM)-Elemente hervor.

Der useRef Hook ist ein mächtiges Werkzeug, das enorme Flexibilität und Möglichkeiten bietet, aber von Entwicklern oft missverstanden und falsch eingesetzt wird.

In diesem Artikel werden wir in die Tiefen des useRef Hooks eintauchen und seinen Zweck, seine Funktionalität und bewährte Praktiken erläutern. Am Ende dieses Leitfadens wirst du verstehen, was es mit dem Hook auf sich hat, und wertvolle Erkenntnisse darüber gewinnen, wie du sein volles Potenzial effektiv nutzen kannst.

Was ist der useRef Hook?

Der useRef Hook dient vor allem zwei Zwecken: dem Speichern veränderlicher Werte, die bei einer Aktualisierung nicht neu gerendert werden müssen, und dem Speichern von Referenzen auf DOM-Elemente. Schauen wir uns an, wie er im Detail funktioniert.

Wenn eine Komponente in React gerendert wird, werden ihr Zustand und andere Variablen normalerweise zurückgesetzt. Es gibt jedoch Fälle, in denen du bestimmte Werte beibehalten musst, auch wenn die Komponente neu gerendert wird. An dieser Stelle kommt der useRef Hook ins Spiel. Mit ihm kannst du einen Verweis auf einen Wert erstellen, der zwischen den Rendervorgängen bestehen bleibt, sodass der Wert auch dann erhalten bleibt, wenn sich andere Teile der Komponente ändern.

Außerdem ist der useRef Hook wichtig für die Arbeit mit DOM-Elementen. In React kann es schwierig sein, direkt auf DOM-Elemente zuzugreifen und sie zu verändern, vor allem ohne den useRef Hook. Mit useRef kannst du einen Verweis auf ein bestimmtes DOM-Element erhalten und Operationen darauf ausführen. Das macht externe Bibliotheken oder umständliche Workarounds überflüssig.

Implementierung von useRef in React

Um den useRef Hook in deinem React-Projekt zu verwenden, importiere ihn aus dem React-Paket:

import { useRef } from 'react';

Sobald du ihn importiert hast, kannst du mit dem useRef Hook eine ref-Variable in deiner funktionalen Komponente deklarieren:

const myRef = useRef();

Jetzt hast du ein ref-Objekt, myRef, das du zum Speichern und Abrufen von Werten verwenden kannst. Um die Variable myRef mit einem beliebigen Element zu verwenden, weise sie dem ref prop des Elements zu.

<div ref={myRef}>This is an example element</div>

Im obigen Beispiel weist du dem Element div eine ref prop zu. Dadurch kannst du das Element mit der Variable myRef an anderer Stelle in der Komponente referenzieren und darauf zugreifen.

Um auf den in der erstellten Referenz gespeicherten Wert zuzugreifen, kannst du die Eigenschaft .current des Objekts myRef verwenden.

const myRefValue = myRef.current;
console.log(myRefValue); // <div>This is a sample div</div>

DOM-Manipulation mit dem useRef-Hook

Die Manipulation des DOM ist eine häufige Aufgabe in der Webentwicklung, denn sie ermöglicht es dir, den Inhalt, die Struktur und das Aussehen einer Webseite dynamisch zu ändern und zu aktualisieren.

In der traditionellen JavaScript-Entwicklung mussten für den Zugriff auf und die Bearbeitung von DOM-Elementen Methoden wie getElementById, querySelector oder getElementsByClassName verwendet werden, um bestimmte Elemente aus dem Dokument auszuwählen. Sobald sie ausgewählt sind, kannst du den Inhalt aktualisieren, Stile ändern oder Ereignis-Listener anhängen.

// HTML
<div>
  <input type="text" id="myInput" />
  <button id="focusButton">Focus Input</button>
</div>
// JavaScript
<script>
      const inputRef = document.getElementById('myInput');
      const focusButton = document.getElementById('focusButton');
      const handleFocus = function() {
        inputRef.focus();
      };
      focusButton.addEventListener('click', handleFocus);
</script>

Bei der Arbeit mit DOM-Elementen in einer React-Komponente ist der Prozess jedoch nicht derselbe, da die Komponente über ein virtuelles DOM verfügt und die Aktualisierungen effizient verwaltet werden müssen. Entwicklerinnen und Entwickler haben oft auf verschiedene Ansätze zurückgegriffen, wie z. B. die Verwendung von Refs oder externen Bibliotheken wie jQuery, um auf DOM-Elemente zuzugreifen und sie zu bearbeiten.

Mit der Einführung des useRef Hooks in React wurde die Arbeit mit DOM-Elementen innerhalb von Komponenten erheblich vereinfacht. Der useRef Hook bietet eine unkomplizierte Möglichkeit, einen Verweis auf ein DOM-Element zu erstellen, sodass es im Kontext der Komponente leicht zugänglich und manipulierbar ist.

import { useRef } from 'react';

const FocusComponent = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    // accessing the input element
    let inputElement = inputRef.current;

   // modify the DOM element
   inputElement.focus();
  };
 
 return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

In diesem Beispiel wird der useRef Hook verwendet, um einen Verweis inputRef zu erstellen, der auf das Element input zeigt. Wenn die Schaltfläche „Eingabe fokussieren“ angeklickt wird, nutzt die Funktion handleFocus die Funktion inputRef.current.focus(), um den Fokus direkt auf das Eingabeelement zu setzen. Dies zeigt, wie der useRef Hook die Arbeit mit DOM-Elementen in React vereinfacht.

Ein anderes Beispiel ist, dass du ein div manipulieren möchtest, indem du seinen Hintergrund änderst, wenn eine Schaltfläche angeklickt wird:

import { useRef } from 'react';

const ExampleComponent = () => {
  const divRef = useRef();

  const handleClick = () => {
    divRef.current.style.backgroundColor = 'red';
  };

  return (
    <div>
      <div ref={divRef}>This is a sample div</div>
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
}

In diesem Beispiel erstellst du mit dem useRef Hook eine Referenz namens divRef. Diesen Verweis weist du dem ref prop des div Elements zu.

Wenn die Schaltfläche „Farbe ändern“ angeklickt wird, wird die Funktion handleClick aufgerufen. In der Funktion kannst du mit divRef.current auf das Element div zugreifen. In diesem Fall änderst du die Hintergrundfarbe des Elements div, indem du seine Eigenschaft style.backgroundColor auf „rot“ aktualisierst.

divRef.current.style.backgroundColor = 'red';

Werte über mehrere Renderings hinweg beibehalten

Das Beibehalten von Werten über mehrere Renderings hinweg ist ein wichtiger Anwendungsfall des useRef Hooks. Er ist besonders nützlich, wenn du Werte hast, die während des gesamten Lebenszyklus der Komponente erhalten bleiben sollen, ohne dass ein neuer Rendervorgang ausgelöst wird.

Um dieses Konzept besser zu verstehen, vergleichen wir den useRef Hook mit dem useState Hook anhand von realen Beispielen:

Beispiel mit useState Hook:

import { useState } from 'react';

function CounterComponent() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In diesem Beispiel verwendest du den useState Hook, um die Statusvariable count zu verwalten. Jedes Mal, wenn die Funktion increment aufgerufen wird, wird der Zustand count mit setCount aktualisiert. Dadurch wird die Komponente neu gerendert und der aktualisierte count Wert angezeigt.

Beispiel mit useRef Hook:

import React, { useRef } from 'react';

function CounterComponent() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current = countRef.current + 1;
    console.log('Count:', countRef.current);
  };

  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In diesem Beispiel verwendest du den useRef Hook, um eine countRef Variable zu erstellen, die mit einem Anfangswert von 0 initialisiert wird. Immer wenn die increment Funktion aufgerufen wird, aktualisierst du direkt den countRef.current Wert, ohne ein erneutes Rendern auszulösen. Der aktualisierte Wert wird auf der Konsole protokolliert.

Durch die Verwendung des useRef Hooks wird die Komponente nicht neu gerendert, wenn sich der countRef.current Wert ändert. Das kann in Szenarien von Vorteil sein, in denen Werte geändert werden müssen, die aber keinen Einfluss auf den Rendering-Prozess haben.

Wenn du den useRef Hook auf diese Weise verwendest, werden Änderungen am ref Wert nicht automatisch neu gerendert. Wenn du den aktualisierten Wert in der Benutzeroberfläche wiedergeben musst, kannst du die Aktualisierung entweder manuell vornehmen oder den useRef Hook mit anderen Hooks oder Zustandsvariablen kombinieren, um das gewünschte Verhalten zu erreichen.

Zusammenfassung

In diesem Artikel hast du den useRef Hook in React kennengelernt und seinen Zweck, seine Implementierung und seine praktischen Anwendungen verstanden. Du hast gelernt, wie du mit useRef auf DOM-Elemente zugreifst, sie änderst und Werte beibehältst.

Eine bewährte Methode für die Verwendung des useRef Hooks ist es, ihn nicht übermäßig zu nutzen. Verwende ihn nur, wenn du auf DOM-Elemente zugreifen und sie verändern oder Werte über mehrere Rendervorgänge hinweg beibehalten musst.

Der useRef Hook kann auch für verschiedene praktische Szenarien wie Animationen und Übergänge, das Zwischenspeichern von Werten oder Zwischenergebnissen und vieles mehr verwendet werden, was deine React-Anwendung auszeichnet.

Erstelle deine nächste React-Anwendung und stelle sie kostenlos auf dem Anwendungs-Hosting von Kinsta bereit, damit du live darauf zugreifen und sie mit der Welt teilen kannst!

Jetzt bist du dran. Was denkst du über den useRef Hook? Teile sie uns in den Kommentaren unten mit.