Verwendung des useRef-Hooks in React

Der useRef()-Hook in React ist ein nützliches Werkzeug, das es erlaubt, direkt mit einem DOM-Element zu interagieren. Es dient als Container für speicherbare Werte, die sich nicht ändern, wenn die Komponente erneut gerendert wird. Der useRef-Hook gibt ein sich änderndes Objekt zurück, dessen .current-Eigenschaft auf den übergebenen Anfangswert initialisiert wird.

In der Regel wird useRef verwendet, um auf spezifische Elemente in Ihren Komponenten zuzugreifen. Ein gängiger Anwendungsfall ist beispielsweise das Fokussieren auf ein spezifisches Input-Feld nach dem Rendern oder nach dem Klicken auf einen Button.

In folgendem Beispiel sehen wir, wie useRef für den Fokus auf einem Eingabe-Element verwendet wurde:

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
     //_Current wird zum Zugriff auf das Input-Element verwendet.
    inputEl.current.focus();
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

In diesem Fall erlaubt useRef, die Referenz des Eingabe-Elements in der Variable inputEl zu speichern. Mit der Methode focus() wird der Fokus dann auf das Eingabe-Element gesetzt, wenn der Button geklickt wird.

Eine weitere Tatsache über useRef besteht darin, dass Veränderungen an .current nicht dazu führen, dass die Komponente neu gerendert wird. Dies ist ein signifikanter Unterschied zu useState oder useReducer, die dazu verwendet werden, den Zustand der Komponente zu aktualisieren und ein erneutes Rendern der Komponente zu veranlassen.

Es ist wichtig, sich daran zu erinnern, dass useRef nicht dazu gedacht ist, den Komponentenstatus zu aktualisieren oder Daten von einer API abzurufen. Für solche Fälle sind Hooks wie useState und useEffect mehr geeignet. Der Hauptzweck von useRef besteht darin, unveränderlichen Zustand während des gesamten Lebenszyklus der Komponente beizubehalten.