useCallback/useEffect support custom comparator

[kpaxqin]

Currently we can pass an array as second argument when using useCallback or useEffect like below:

useCallback(()=> {
  doSth(a, b)
}, [a, b]) // how to do deep equal if a is an object ?

The problem is it only compare array items with ===, it there any way to compare complex object ?

Support custom comparator as third argument looks not bad:

useCallback(()=> {
  doSth(a, b)
  }, 
  [complexObject], 
  (item, previousItem)=> { //custom compare logic, return true || false here }
)

[arianon]

You could do this instead.

useCallback(() => {
  doSth(a, b)
}, [a, a.prop, a.anotherProp, a.prop.nestedProp /* and so on */, b])

Or you could try using JSON.stringify(a) in the inputs array.

[aweary]

You can use the result of the custom equality check as a value inside the array to get this behavior.

useEffect(
  () => {
    // ...
  },
  [compare(a, b)]
);

[heyimalex]

@aweary How would that work? They want to use the custom comparator to check compare(a, prevA), not compare(a, b). The previous value isn't accessible in scope.

[aweary]

@heyimalex you can use a ref to store a reference to the previous value. This is mentioned in the Hooks FAQ: How to get the previous props or state?
.

[heyimalex]

@aweary How would passing [compare(a, prevA)] work? Wouldn't that make it update on transitions from true -> false and from false -> true when you really just want it to update when false? Sorry if I'm missing something obvious!

I was trying to write what the op wanted and here's what I got.

function usePrevious(value) {
    const ref = useRef();
    useEffect(() => {
        ref.current = value;
    });
    return ref.current;
}

function useCallbackCustomEquality(cb, args, equalityFunc) {
    const prevArgs = usePrevious(args);
    const argsAreEqual =
        prevArgs !== undefined &&
        args.length === prevArgs.length &&
        args.every((v, i) => equalityFunc(v, prevArgs[i]));
    const callbackRef = useRef();
    useEffect(() => {
        if (!argsAreEqual) {
            callbackRef.current = cb;
        }
    })
    return argsAreEqual ? callbackRef.current : cb;
}

[aweary]

@kpaxqin yeah it's sort of a half-baked solution 😕your approach is fine I think for useCallback. For useEffect you'd do something similar except you'd add a check for equality inside a useEffect before calling the provided effect callback.

[heyimalex]

You could actually encapsulate the arg memoization in one hook and then use that for all of the other functions.

function useMemoizeArgs(args, equalityCheck) {
  const ref = useRef();
  const prevArgs = ref.current;
  const argsAreEqual =
        prevArgs !== undefined &&
        args.length === prevArgs.length &&
        args.every((v, i) => equalityFunc(v, prevArgs[i]));
  useEffect(() => {
      if (!argsAreEqual) {
        ref.current = args;
      }
  });
  return argsAreEqual ? prevArgs : args;
}

useEffect(() => {
  // ...
}, useMemoizeArgs([a,b], equalityCheck));

[eyston]

A similar API to React.memo would be great for useEffect and friends when used with an immutable data structure library -- such as clojurescript. Not to over simplify it but it at least appears to be a very accessible change:

react/packages/react-reconciler/src/ReactFiberHooks.js

Lines 524 to 549 in 659c139

	export function useEffect(
	create: () => mixed,
	inputs: Array<mixed> | void | null,
	): void {
	useEffectImpl(
	UpdateEffect | PassiveEffect,
	UnmountPassive | MountPassive,
	create,
	inputs,
	);
	}
	function useEffectImpl(fiberEffectTag, hookEffectTag, create, inputs): void {
	currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
	workInProgressHook = createWorkInProgressHook();
	let nextInputs = inputs !== undefined && inputs !== null ? inputs : [create];
	let destroy = null;
	if (currentHook !== null) {
	const prevEffect = currentHook.memoizedState;
	destroy = prevEffect.destroy;
	if (areHookInputsEqual(nextInputs, prevEffect.inputs)) {
	pushEffect(NoHookEffect, create, destroy, nextInputs);
	return;
	}
	}

[kpaxqin]

@heyimalex Thanks for your solution, it works great for me, but still got one risk as a common solution.

For example: re-render every second, use current time as input array, compare time and run effect if minute has changed.

The key is: A equal to B and B equal to C might not means A equal to C for custom comparator

Use another value as compare result could get rid of this

function useMemoizeArgs(args, equalityCheck) {
  const ref = useRef();
  const flag = ref.current ? ref.current.flag : 0;
  const prevArgs = ref.current ? ref.current.args : undefined;
  const argsAreEqual =
        prevArgs !== undefined &&
        args.length === prevArgs.length &&
        args.every((v, i) => equalityFunc(v, prevArgs[i]));
  useEffect(() => {
      ref.current = {
         args,
         flag: !argsAreEqual ? (flag + 1) : flag
      }
  });
  return ref.current.flag
}

useEffect(() => {
  // ...
}, useMemoizeArgs([a,b], equalityCheck));

Still think the best way would be support custom comparator officially for those hooks which need to compare inputs.

[slestang]

The solution given by @kpaxqin didn't work during my tests because:

1. ref.current is undefined on first call so return ref.current.flag crash
2. the way argsAreEqual is compute ends up returning true for the first call, therefore the flag is always incremented at least once

I modify it to:

const useMemoizeArgs = (args, equalityFunc) => {
  const ref = useRef();
  const flag = ref.current ? ref.current.flag : 0;
  const prevArgs = ref.current ? ref.current.args : undefined;
  const argsHaveChanged =
    prevArgs !== undefined &&
    (args.length !== prevArgs.length || args.some((v, i) => equalityFunc(v, prevArgs[i])));

  useEffect(() => {
    ref.current = {
      args,
      flag: argsHaveChanged ? flag + 1 : flag,
    };
  });

  return flag;
};

which works for my use case.

But obviously if hooks supported a custom comparator like React.memo as parameter, things will be a lot better/simpler.