javascript / expert
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
1
2
3
4
5
6
7
8
9
function useEvent(handler) {const handlerRef = useRef(handler);useLayoutEffect(() => {handlerRef.current = handler;});return useCallback((...args) => {return handlerRef.current(...args);}, []);}
react
Erklärung
1
const handlerRef = useRef(handler);
Initialisiert eine veränderbare Referenz, um die aktuelle Version der Funktion zu halten.
2
useLayoutEffect(() => { handlerRef.current = handler; });
Aktualisiert die Referenz synchron nach DOM-Mutationen, aber vor dem Browser-Paint, um veraltete Versionen zu vermeiden.
3
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.