Stabilisierung von Callbacks mit dem Event-Hook-Pattern

Snippet

Stabilisierung von Callbacks mit dem Event-Hook-Pattern

Dieses Pattern löst den Kompromiss zwischen veralteten Closures und unnötigen Re-Renders. Durch Speichern des neuesten Handlers in einer Ref und Rückgabe eines memoisierten Wrappers bleibt die Funktionsreferenz über Renders hinweg stabil, während sie immer Zugriff auf die aktuellsten Scope-Variablen hat.

snippet.js
javascript
function useEvent(handler) {
  const handlerRef = useRef(handler);
  useLayoutEffect(() => {
    handlerRef.current = handler;
  });
  return useCallback((...args) => {
    return handlerRef.current(...args);
  }, []);
}

react

Erklärung

const handlerRef = useRef(handler);

Initialisiert eine veränderbare Referenz, um die aktuelle Version der Funktion zu halten.

useLayoutEffect(() => { handlerRef.current = handler; });

Aktualisiert die Referenz synchron nach DOM-Mutationen, aber vor dem Browser-Paint, um veraltete Versionen zu vermeiden.

return useCallback((...args) => handlerRef.current(...args), []);

Gibt eine Funktion zurück, die ihre Identität nie ändert und so Re-Renders in abhängigen Komponenten verhindert.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek