Effect memoization and immutable data structures

Current design of useEffect requires dependencies to be either primitive values or references to the same object, because shallow equality check relies on Object.is which is an identity check for objects.

The above means that there’s no way to perform structural comparison, which is needed for immutable data structures when identity check fails.

To maintain backwards compatibility a comparator function could be provided as the third argument to useEffect:

useEffect(fn, deps, depsComparator);

The goal here is to preserve an ease of use of the API with immutable data structures in order to provide an idiomatic usage of useEffect in ClojureScript and other environments that rely on immutability e.g. Immutable.js

cc @mhuebert @Lokeh @orestis

[mhuebert]

When a user passes in a data literal to useState / useEffect deps / etc., e.g. (useEffect fx [{:data “foo”}])

I think typed-in literals are too small to worry about. From #14476 -

In those rare cases it’s acceptable to pass [JSON.stringify(variables)] as a dependency. “Wait!” I hear you saying, “Isn’t JSON.stringify() slow?” On small inputs, like the example above, it is very fast.

Comparing small structures like {:some "map" :that "I typed in"} is always going to be fast.

[DjebbZ]

Which means that if I want to skip based on a custom equality check (by custom I mean not the one provided by React), I can just do it before calling setState since I have access to both the old and new state.