We've all been there: you pass an object literal or an array as a dependency to useMemo or useEffect, only to realize it triggers on every single render. Because JavaScript compares objects by reference rather than structure, {} never equals {}.

In the latest release of react-hook-lab (v1.6.0), we are introducing a highly requested utility to put an end to referential instability: useDeepMemo, alongside a fully-featured, production-ready deepEqual helper.

The Problem: Strict Equality vs. Structural Equality

React's native useMemo uses strict reference equality (Object.is) to check if dependencies have changed. If your parent component passes a configuration object down, or if you define an array literal inline, React assumes the dependency has changed, forcing expensive recalculations.

The Solution: useDeepMemo