React useDeepCompareEffect Hook: A useEffect using deep comparison

A custom Hook by Kent C. Dodds (who else?) that might come in handy for “those situations”:

React’s built-in useEffect hook has a second argument called the “dependencies array” and it allows you to optimize when React will call your effect callback. React will do a comparison between each of the values (via Object.is) to determine whether your effect callback should be called.

The problem is that if you need to provide an object for one of those dependencies and that object is new every render, then even if none of the properties changed, your effect will get called anyway.

useDeepCompareEffect is a drop-in replacement for useEffect. It will not do a reference equality check but a deep comparison before trying to run the effect.

Installation per NPM/Yarn

npm install use-deep-compare-effect

useDeepCompareEffect →