Startseite / Artikel / Rückzug der Latest-Value-Referenz: Effektivitätsereignisse mit useEffectEvent

ReactReact 19useEffectReact HooksJavaScript

Rückzug der Latest-Value-Referenz: Effektivitätsereignisse mit useEffectEvent

Erfahren Sie, wie useEffectEvent in React 19.2 nicht-reaktive Logik von Effekten trennt, alte Tricks mit dem latest-value-Ref beseitigt und anzeigt, wann der Hook das falsche Werkzeug ist.

917 Wörter

Viele React-Codebasen enthalten ein useRef, dessen einzige Aufgabe darin besteht, „den neuesten Wert“ zu speichern, damit ein Effect nicht davon abhängen muss. Dieser Trick funktioniert zwar, versteckt aber die Absicht hinter der Implementierung. React 19.2 macht useEffectEvent stabil, wodurch dieses Muster einen ersten-Klasse-Hook erhält. Am Ende werden Sie in der Lage sein, reaktive und nicht-reaktive Logik innerhalb eines Effects zu trennen sowie zu erkennen, wann der Hook nicht anwendbar ist.

Der Abhängigkeitsarray, der nicht gewinnen kann

Der Konflikt tritt bei langanhaltenden Verbindungen auf: Chaträume, WebSocket-Feeds, Analyse-Sitzungen, Abonnements. Eine ChatRoom erhält roomId und theme. Der Effect muss sich neu verbinden, wenn sich roomId ändert, liest aber theme nur dazu, um nach der Verbindung ein Benachrichtigungsfenster zu formatieren.

Fügen Sie theme dem Abhängigkeitsarray hinzu – dadurch wird der Socket ohne Grund zerstört, wenn auf den Dunkelmodus umgeschaltet wird. Lassen Sie es weg, und die lint-Regel für Hooks meldet einen Fehler; schalten Sie sie aus, behält der Callback theme aus einer alten Renderung bei, was zu einem klassischen „stale closure“ führt.

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme); // stale after theme changes
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, theme]); // theme shouldn't trigger a reconnect
}

Die Workaround-Lösung, die die meisten Teams verwendeten

Die übliche Lösung bestand darin, theme bei jeder Renderung in eine Ref zu kopieren und ref.current im Callback abzurufen. Das funktioniert, doch der Synchronisierungs-Schritt wird leicht übersehen, und im Code steht nirgends, dass die Logik absichtlich nicht reaktiv ist.

Auslösen der Ereignislogik mit useEffectEvent

useEffectEvent extrahiert den nicht-reaktiven Teil eines Effects in eine eigene Funktion. Diese Funktion sieht stets die neuesten Props und State-Werte, ihr Aufruf führt nicht erneut zum Ausführen des Effects, und sie wird nicht ins Abhängigkeitsarray aufgenommen.

Dort wechselt die Benachrichtigung in den Zustand onConnected. Die Funktion erstellt lediglich die Verbindung, registriert den Handler und trennt diese bei der Aufräumung wieder ab.

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // always fresh, never a dependency
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // only roomId matters now
}

Nur roomId bleibt als Abhängigkeit übrig. theme wurde nicht vor dem Linter versteckt, sondern umklassifiziert. Das Anzeigen eines Toast-Benachrichtigungen beim Herstellen einer Verbindung ist eine Reaktion auf ein Ereignis und gehört daher zur Event-Logik statt zur Synchronisation. Das Umstellen des Themes führt nicht mehr zu einer erneuten Verbindung, und der nächste Toast verwendet weiterhin das aktuelle Theme.

Konzeptionell macht der ref-Hack genau dasselbe wie manuell: React sorgt dafür, dass die von der Effect-Funktion aufgerufene Funktion auf den Schließzustand der neuesten Renderung verweist, wodurch die Absicht nun klar ersichtlich ist.

Vorteile

  • Keine veralteten Schließzustände mehr. Die Effect Event-Funktion liest die neuesten Werte ohne manuelle Aktualisierungen des refs.
  • Der Effekt wird nur ausgelöst, wenn sich ein Wert ändert, mit dem er tatsächlich synchronisiert wird.
  • Effekte bedeuten „halte dieses System mit diesem Zustand synchron“; Effect Events bedeuten „führe dies aus, wenn das passiert“.

    • Seit der React 18-Version raten die Dokumentationen von React Entwicklern dazu, Ereignisse von Effekten zu trennen; 19.2 unterstützt diesen Rat endlich mit einem stabilen Hook. Weitere Informationen zur Version finden Sie in unserer Übersicht zu React 19.2s Activity, useEffectEvent und statische Darstellung.

    useEffectEvent ersetzt useEffect nicht, und es handelt sich dabei auch nicht um eine allgemeine Methode, um Abhängigkeitsarrays zu verkleinern.

    • Verwenden Sie es nur dann, wenn eine Änderung des Wertes den Effekt nicht neu starten sollte. Sollte dies der Fall sein, gehört der Wert in das Array.
    • Rufen Sie niemals ein Effect Event während des Renderings auf; rufen Sie es stattdessen von innerhalb von Effekten auf, wie z. B. aus Abonnements-Callback-Funktionen oder Timern.
    • Behalten Sie es lokal in der jeweiligen Komponente, anstatt es als Prop an Kinderkomponenten weiterzugeben.
    • Falls der größte Teil eines Effekts innerhalb eines Effect Events stattfindet, gehört die Logik vermutlich in einen regulären Event-Handler.

    Vor 19.2 existierte der Hook nur in experimentellen Versionen, daher müssen Projekte auf 19.0 oder 19.1 auf ein neueres Update upgraden, um die stabile API nutzen zu können.

    Hauptpunkte

    • Jede Workaround-Lösung, bei der „der neueste Wert in einem ref gespeichert wird“, eignet sich als Alternative zu useEffectEvent.
    • Für jede Abhängigkeit prüfen Sie, ob eine Änderung den Effekt neu starten sollte; falls nicht, handelt es sich bei dem Code, der diesen Wert liest, um Logik für ein Event.
  • Die API ist zwar klein, benennt aber ein Problem, mit dem fast jeder React-Entwickler konfrontiert wurde, ohne zu wissen, wie er es bezeichnen soll.

    • Verwandte Artikel

    Alle ArtikelBrief senden