将Including array as a dependency in useEffect

Question

There is some data coming in from the long poll every 5 seconds and I want my component to dispatch an operation every time an item of the array (or the array length itself) changes. How can I prevent useEffect from going into an infinite loop when passing an array as a dependency, but still manage to schedule some operations if any value changes? useEffect(()=>{console.log(outcomes)},[outcomes]) where outcomes is an ID array, such as [123,234,3

P粉464208937 · Answer

Using JSON.stringify() or any deep comparison method may be less efficient, if you know the shape of the object ahead of time you can write your own effect hook to trigger a callback to your custom equality function based on the result.

useEffect works by checking if each value in the dependencies array is the same as the value in the previous render and executing a callback if one of them is not. Therefore, we only need to use useRef to retain the data instance we are interested in, and only allocate a new instance to trigger the effect when the custom equality check returns false.

function arrayEqual(a1: any[], a2: any[]) {
  if (a1.length !== a2.length) return false;
  for (let i = 0; i  void);

function useNumberArrayEffect(cb: () => MaybeCleanUpFn, deps: number[]) {
  const ref = useRef(deps);

  if (!arrayEqual(deps, ref.current)) {
    ref.current = deps;
  }

  useEffect(cb, [ref.current]);
}

usage

function Child({ arr }: { arr: number[] }) {
  useNumberArrayEffect(() => {
    console.log("run effect", JSON.stringify(arr));
  }, arr);

  return {JSON.stringify(arr)};
}

Going a step further, we can also reuse this hook by creating an effects hook that accepts a custom equality function.

type MaybeCleanUpFn = void | (() => void);
type EqualityFn = (a: DependencyList, b: DependencyList) => boolean;

function useCustomEffect(
  cb: () => MaybeCleanUpFn,
  deps: DependencyList,
  equal?: EqualityFn
) {
  const ref = useRef(deps);

  if (!equal || !equal(deps, ref.current)) {
    ref.current = deps;
  }

  useEffect(cb, [ref.current]);
}

usage

useCustomEffect(
  () => {
    console.log("run custom effect", JSON.stringify(arr));
  },
  [arr],
  (a, b) => arrayEqual(a[0], b[0])
);

Live Demo

P粉662802882 · Answer

You can pass JSON.stringify(outcomes) as a list of dependencies:

Learn MoreHere

useEffect(() => {
  console.log(outcomes)
}, [JSON.stringify(outcomes)])