Stabilizing Callbacks with the Event Hook Pattern

Snippet

Stabilizing Callbacks with the Event Hook Pattern

This pattern solves the trade-off between stale closures and unnecessary re-renders. By storing the latest handler in a ref and returning a memoized wrapper, the returned function reference remains stable across renders while always having access to the latest scope variables.

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

react

Breakdown

const handlerRef = useRef(handler);

Initializes a mutable reference to hold the current version of the function.

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

Updates the reference synchronously after DOM mutations but before browser paint to ensure no stale versions exist.

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

Returns a function that never changes its identity, preventing downstream re-renders.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Stabilizing Callbacks with the Event Hook Pattern

Related