React useRef: Muster für die Speicherung veränderlicher Werte meistern

useRef ist ein leistungsstarker Hook in React, der eine Möglichkeit bietet, Werte zwischen Render-Vorgängen beizubehalten, ohne bei Wertänderungen erneute Render-Vorgänge auszulösen. Er wird oft mit dem direkten Zugriff auf DOM-Elemente in Verbindung gebracht, aber seine Fähigkeiten gehen weit darüber hinaus. Dieser umfassende Leitfaden befasst sich mit den vielfältigen Anwendungsfällen von useRef, damit Sie effizienteren und wartbareren React-Code schreiben können.

useRef verstehen: Mehr als nur DOM-Zugriff

Im Kern gibt useRef ein veränderbares Ref-Objekt zurück, dessen .current-Eigenschaft mit dem übergebenen Argument (initialValue) initialisiert wird. Das zurückgegebene Objekt bleibt für die gesamte Lebensdauer der Komponente bestehen. Entscheidend ist, dass eine Änderung der .current-Eigenschaft keinen erneuten Render-Vorgang auslöst. Dies ist der Hauptunterschied zwischen useRef und useState.

Obwohl der Zugriff auf DOM-Elemente ein häufiger Anwendungsfall ist, eignet sich useRef hervorragend zur Verwaltung jedes veränderlichen Wertes, der bei einer Aktualisierung keinen erneuten Render-Vorgang auslösen muss. Dies macht es von unschätzbarem Wert für Aufgaben wie:

• Speichern früherer Prop- oder State-Werte.
• Führen von Zählern oder Timern.
• Verfolgen des Fokus-Zustands ohne Auslösung von Re-Rendern.
• Speichern jedes veränderlichen Wertes, der über Render-Vorgänge hinweg bestehen bleiben muss.

Grundlegende Verwendung: Zugriff auf DOM-Elemente

Der bekannteste Anwendungsfall ist der direkte Zugriff auf DOM-Elemente. Dies ist nützlich für Szenarien, in denen Sie imperativ mit einem DOM-Knoten interagieren müssen, z. B. um ein Eingabefeld zu fokussieren, seine Abmessungen zu messen oder Animationen auszulösen.

Beispiel: Fokussieren eines Eingabefeldes

So können Sie useRef verwenden, um ein Eingabefeld zu fokussieren, wenn eine Komponente gemountet wird:

            import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Fokussiert das Eingabefeld beim Mounten
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []); // Leeres Dependency-Array stellt sicher, dass dies nur einmal beim Mounten ausgeführt wird

  return (
    <input type="text" ref={inputRef} placeholder="Text eingeben" />
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Erklärung:

1. Wir erstellen eine Ref mit useRef(null). Der Anfangswert ist null, da das Input-Element beim initialen Rendern der Komponente noch nicht existiert.
2. Wir hängen die Ref mit dem ref-Prop an das Input-Element an: ref={inputRef}. React setzt inputRef.current automatisch auf den DOM-Knoten, wenn das Input-Element gemountet wird.
3. Wir verwenden useEffect mit einem leeren Dependency-Array ([]), um sicherzustellen, dass der Effekt nur einmal nach dem Mounten der Komponente ausgeführt wird.
4. Innerhalb des Effekts prüfen wir, ob inputRef.current existiert (um Fehler zu vermeiden, falls das Element noch nicht verfügbar ist) und rufen dann inputRef.current.focus() auf, um das Eingabefeld zu fokussieren.

Jenseits des DOM-Zugriffs: Verwaltung veränderlicher Werte

Die wahre Stärke von useRef liegt in seiner Fähigkeit, veränderliche Werte zu speichern, die über Render-Vorgänge hinweg bestehen bleiben, ohne erneute Render-Vorgänge auszulösen. Dies eröffnet eine breite Palette von Möglichkeiten zur Optimierung des Komponentenverhaltens und zur Verwaltung des Zustands in funktionalen Komponenten.

Beispiel: Speichern früherer Prop- oder State-Werte

Manchmal müssen Sie auf den vorherigen Wert einer Prop oder einer State-Variable zugreifen. useRef bietet eine saubere Möglichkeit, dies zu tun, ohne unnötige Re-Renders auszulösen.

            import React, { useRef, useEffect } from 'react';

function MyComponent({ value }) {
  const previousValue = useRef(value);

  useEffect(() => {
    // Aktualisiert die .current-Eigenschaft der Ref mit dem aktuellen Wert
    previousValue.current = value;
  }, [value]); // Effekt wird ausgeführt, wann immer sich die 'value'-Prop ändert

  // Jetzt können Sie mit previousValue.current auf den vorherigen Wert zugreifen
  return (
    <div>
      Aktueller Wert: {value}
      <br />
      Vorheriger Wert: {previousValue.current}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Erklärung:

1. Wir initialisieren die Ref previousValue mit dem Anfangswert der value-Prop.
2. Wir verwenden useEffect, um die Eigenschaft previousValue.current zu aktualisieren, wann immer sich die value-Prop ändert.
3. Innerhalb der Komponente können wir nun mit previousValue.current auf den vorherigen Wert der value-Prop zugreifen.

Anwendungsfall-Beispiel: Änderungen bei API-Antworten verfolgen (Internationales Szenario)

Stellen Sie sich vor, Sie erstellen ein Dashboard, das von einer API abgerufene Wechselkurse anzeigt. Die API könnte die Kurse je nach Datenquelle in unterschiedlichen Formaten oder mit unterschiedlicher Genauigkeit zurückgeben (z. B. eine API der Europäischen Zentralbank im Vergleich zu einer API eines südostasiatischen Finanzinstituts). Sie können useRef verwenden, um den vorherigen Wechselkurs zu verfolgen und einen visuellen Indikator (z. B. einen grünen Pfeil nach oben oder einen roten Pfeil nach unten) anzuzeigen, um zu zeigen, ob der Kurs seit dem letzten Update gestiegen oder gefallen ist. Dies ist entscheidend für internationale Benutzer, die sich bei Finanzentscheidungen auf diese Kurse verlassen.

Beispiel: Führen von Zählern oder Timern

useRef ist perfekt für die Verwaltung von Zählern oder Timern, die keine Re-Renders auslösen müssen. Sie könnten es zum Beispiel verwenden, um zu verfolgen, wie oft eine Schaltfläche geklickt wurde, oder um einen einfachen Timer zu implementieren.

            import React, { useRef, useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const clickCount = useRef(0); // Initialisiert die Ref mit 0

  const handleClick = () => {
    clickCount.current++; // Erhöht die .current-Eigenschaft der Ref
    setCount(clickCount.current); //Erhöht den State, was ein Re-Render auslöst.
  };

  return (
    <div>
      <p>Button geklickt: {count} Mal</p>
      <button onClick={handleClick}>Klick mich</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Erklärung:

1. Wir initialisieren eine Ref clickCount mit dem Wert 0.
2. In der handleClick-Funktion erhöhen wir die Eigenschaft clickCount.current. Dies löst kein Re-Render aus.
3. Wir aktualisieren auch den State 'count', was ein Re-Render auslöst.

Beispiel: Implementierung einer Debounce-Funktion

Debouncing ist eine Technik, die verwendet wird, um die Häufigkeit zu begrenzen, mit der eine Funktion ausgeführt wird. Sie wird häufig in Sucheingabefeldern verwendet, um übermäßige API-Aufrufe zu verhindern, während der Benutzer tippt. useRef kann verwendet werden, um die in der Debounce-Funktion verwendete Timer-ID zu speichern.

            import React, { useState, useRef, useEffect } from 'react';

function MyComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const timerRef = useRef(null); // Speichert die Timer-ID

  const handleChange = (event) => {
    const newSearchTerm = event.target.value;
    setSearchTerm(newSearchTerm);

    // Löscht den vorherigen Timer, falls er existiert
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    // Setzt einen neuen Timer
    timerRef.current = setTimeout(() => {
      // Simuliert einen API-Aufruf
      fetch(`https://api.example.com/search?q=${newSearchTerm}`)
        .then(response => response.json())
        .then(data => setResults(data.results));
    }, 300); // Debounce für 300 Millisekunden
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Suchen..."
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {results.map(result => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Erklärung:

1. Wir verwenden useRef, um die Timer-ID in timerRef zu speichern.
2. In der handleChange-Funktion löschen wir den vorherigen Timer (falls er existiert) mit clearTimeout(timerRef.current).
3. Wir setzen dann einen neuen Timer mit setTimeout und speichern die Timer-ID in timerRef.current.
4. Der API-Aufruf wird erst getätigt, nachdem der Benutzer 300 Millisekunden lang aufgehört hat zu tippen.

Überlegungen zur Internationalisierung: Bei der Implementierung von Debouncing mit API-Aufrufen, die die Anzeige von Informationen in verschiedenen Sprachen beinhalten, stellen Sie sicher, dass Ihre API Internationalisierung unterstützt und Daten in der bevorzugten Sprache des Benutzers zurückgibt. Erwägen Sie die Verwendung des Accept-Language-Headers in Ihren API-Anfragen.

Beispiel: Verfolgen des Fokus-Zustands ohne Re-Renders

Sie können useRef verwenden, um zu verfolgen, ob ein Element den Fokus hat, ohne Re-Renders auszulösen. Dies kann nützlich sein, um Elemente basierend auf ihrem Fokus-Zustand zu gestalten oder um eine benutzerdefinierte Fokus-Verwaltungslogik zu implementieren.

            import React, { useRef, useState } from 'react';

function MyComponent() {
  const [isFocused, setIsFocused] = useState(false);
  const inputRef = useRef(null);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div>
      <input
        type="text"
        ref={inputRef}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      <p>Eingabefeld fokussiert: {isFocused ? 'Ja' : 'Nein'}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

useRef vs. useState: Das richtige Werkzeug wählen

Es ist wichtig, die Hauptunterschiede zwischen useRef und useState zu verstehen, um das richtige Werkzeug für die Aufgabe auszuwählen.

Best Practices und häufige Fallstricke

• Zustand nicht direkt verändern: Obwohl useRef es Ihnen erlaubt, Werte direkt zu verändern, vermeiden Sie die direkte Veränderung von State-Variablen, die von useState verwaltet werden. Verwenden Sie immer die von useState bereitgestellte Setter-Funktion, um den Zustand zu aktualisieren.
• Achten Sie auf Seiteneffekte: Wenn Sie useRef zur Verwaltung von Werten verwenden, die die Benutzeroberfläche beeinflussen, achten Sie auf mögliche Seiteneffekte. Stellen Sie sicher, dass Ihr Code sich vorhersehbar verhält und keine unerwarteten Fehler einführt.
• Verlassen Sie sich nicht auf useRef für die Render-Logik: Da Änderungen an useRef keine Re-Renders auslösen, sollten Sie sich nicht direkt auf seine Werte verlassen, um zu bestimmen, was gerendert werden soll. Verwenden Sie useState für Werte, die die Render-Logik steuern müssen.
• Berücksichtigen Sie die Auswirkungen auf die Performance: Obwohl useRef helfen kann, die Leistung durch die Vermeidung unnötiger Re-Renders zu optimieren, seien Sie sich bewusst, dass die übermäßige Verwendung von veränderlichen Werten Ihren Code schwerer verständlich und debuggbar machen kann.

Fortgeschrittene Anwendungsfälle und Muster

Werte über Komponenteninstanzen hinweg beibehalten

Während `useRef` Werte über Render-Vorgänge einer *einzelnen* Komponenteninstanz hinweg beibehält, muss ein Wert manchmal über *verschiedene* Instanzen derselben Komponente hinweg bestehen bleiben. Dies erfordert einen etwas anderen Ansatz, oft unter Verwendung einer Variable auf Modulebene in Kombination mit `useRef`.

            // myComponent.js
let globalCounter = 0; // Variable auf Modulebene

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const counterRef = useRef(globalCounter); // Initialisiert mit dem globalen Wert

  useEffect(() => {
    // Aktualisiert den globalen Zähler, wann immer sich die Ref ändert
    globalCounter = counterRef.current;
  }, [counterRef.current]);

  const increment = () => {
    counterRef.current++;
    //Kein setState benötigt, also kein Re-Render
  };

  return (
    <div>
      <p>Zähler: {counterRef.current}</p>
      <button onClick={increment}>Erhöhen</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Wichtige Überlegungen: Dieses Muster führt eine globale Variable ein, seien Sie also äußerst vorsichtig mit potenziellen Seiteneffekten und Race Conditions, insbesondere in komplexen Anwendungen. Ziehen Sie alternative Ansätze in Betracht, wie die Verwendung eines Context-Providers, wenn der Wert auf kontrolliertere Weise zwischen mehreren Komponenten geteilt werden muss.

Fazit: Die Kraft von useRef entfesseln

useRef ist ein vielseitiges Werkzeug in React, das weit über den einfachen Zugriff auf DOM-Elemente hinausgeht. Indem Sie seine Fähigkeit verstehen, veränderliche Werte zu speichern, ohne Re-Renders auszulösen, können Sie Ihre Komponenten optimieren, den Zustand effektiver verwalten und leistungsfähigere und wartbarere React-Anwendungen erstellen. Denken Sie daran, es mit Bedacht einzusetzen und immer die potenziellen Kompromisse zwischen Leistung und Code-Klarheit abzuwägen.

Indem Sie die in diesem Leitfaden beschriebenen Muster meistern, sind Sie bestens gerüstet, das volle Potenzial von useRef in Ihren React-Projekten auszuschöpfen, egal ob Sie eine einfache Webanwendung oder ein komplexes Unternehmenssystem erstellen. Denken Sie daran, bei der Entwicklung für ein globales Publikum Internationalisierung und Barrierefreiheit zu berücksichtigen!