A custom Hook by Kent C. Dodds (who else?) that might come in handy for “those situations”:
useEffecthook 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
it is nice to have this useDeepCompareEffect to avoid side effect of useEffect
Leave a comment