Stable Object References for Hook Dependencies

Snippet

Stable Object References for Hook Dependencies

Standard useEffect uses referential equality for dependencies. If you pass a new object literal on every render, the effect runs every time. By implementing a custom comparison (e.g., deep equality) using refs, you can ensure effects only trigger when data actually changes.

snippet.js
javascript
function useDeepEffect(fn, deps) {
  const isFirst = React.useRef(true);
  const prevDeps = React.useRef(deps);
 
  React.useEffect(() => {
    const isSame = deps.every((dep, i) => JSON.stringify(dep) === JSON.stringify(prevDeps.current[i]));
    if (isFirst.current || !isSame) {
      fn();
    }
    isFirst.current = false;
    prevDeps.current = deps;
  }, [deps]);
}

react

Breakdown

const prevDeps = React.useRef(deps);

Persists the dependency values across renders without triggering a re-render itself.

JSON.stringify(dep) === JSON.stringify(prevDeps.current[i])

A simple (though heavy) way to check for value equality instead of reference equality.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Stable Object References for Hook Dependencies

Related