Custom use effect comparator : ReactJS

I am having a state variable that is defined as follows

  const [val, setVal] = useState({ notdone: [], done: [] })

where done has the following structure

[ { col: "val1", field: "val1", values: [1,2,3]}, { col: "val2", filed: "val2", values:[]  }

I want to run the useffect when some changes are made to the done and also values array under each object. In my case, useEffect gets triggered when I remove/add an objects to the done. But not when some changes happen inside values array of each object.

How can I have a watch on both the changes

useEffect(() => {
    callback();
 }, [val.done.length]);

It is achievable using use-deep-compare-effect, but is there a way to do this without using this external package?

Help would be appreciated

Answer

Using the outer array length alone isn’t a strong enough comparison. The best counter-example against it is an array mutation where an element is removed while another is added, the result is an array of the same length.

React’s Object.is equality check also doesn’t do the deep equality check you seek.

The only way I know of to do this without an external dependency is a bit of a hack, but it works, is to JSON stringify* the array so a full string comparison is used.

useEffect(() => {
  callback();
}, [JSON.stringify(val.done)]);

* Source is basically a twitter conversation from Dan Abramov

Deep equality checks are generally a bad idea. If the inputs are shallow enough that you think deep equality would still be fast, consider just using [JSON.stringify(obj)] instead. Note it won’t compare functions.