What is the reasoning behind "The final argument passed to useCallback changed size between renders ..." warning

Opening this question here, because StackOverflow is listed as a recommended place for asking React-related questions in React docs.

I am looking for a reasoning behind throwing a The final argument passed to useCallback changed size between renders. The order and size of this array must remain constant. warning.

After looking into React code it looks like React does not properly compare prevDeps and nextDeps arrays when they have different lengths.

The comparison function looks like this (some checks were omitted for brevity):

function areHookInputsEqual(prevDeps,nextDeps) {
    for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (Object.is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  return true;
}

Which means:

• areHookInputsEqual( ['a','b'], ['c','d'] ) === false - correct
• areHookInputsEqual( ['a','b','c'], ['a','b'] ) === true - wrong
• areHookInputsEqual( ['a','b'], ['a','b','c'] ) === true - wrong
• areHookInputsEqual( [], ['a'] ) === true - wrong
• areHookInputsEqual( ['a'], [] ) === true - wrong

Why not to write this function as following and remove warning from the codebase?

function areHookInputsEqual(prevDeps,nextDeps) {
  if (prevDeps.length !== nextDeps.length) {
    return false;
  }
  for (let i = 0; i < prevDeps.length; i++) {
    if (Object.is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  return true;
}

The use case which led to this question

We have a custom hook like this:

function useLoadMessageKeys(messageKeys: string[]) {
  return React.useCallback(
    () => {
      return load(messageKeys)
    },
    messageKeys
  )
}

Because of current React implementation, load does not get called when messageKeys change from [] to ['a'].

Update (how we currently solved this)

function areArraysEqual<T>(prevDeps: T[], nextDeps: T[]): boolean {
  if (prevDeps === nextDeps) {
    return true
  }
  if (prevDeps.length !== nextDeps.length) {
    return false
  }
  for (let i = 0; i < prevDeps.length; i++) {
    if (!Object.is(nextDeps[i], prevDeps[i])) {
      return false
    }
  }
  return true
}

export function useLoadMessageKeys(messageKeys: string[]) {
  const messageKeysRef = React.useRef(messageKeys)
  if (!areArraysEqual(messageKeys, messageKeysRef.current)) {
    messageKeysRef.current = messageKeys
  }
  const currentMessageKeys = messageKeysRef.current
  return React.useCallback(
    () => load(currentMessageKeys),
    [currentMessageKeys]
  )
}

If the code linked in the question properly compared 2 arrays we'd avoid having this complexity.

I think the reasoning is that the array of dependencies should always be exactly the list of variables used inside the effect. So in particular it can be statically determined and cannot change size. If it does change size, you're probably doing something more than just listing the dependencies, so it is warning you that you are not using the dependency list as intended.

You could use instead use a version of messageKeys that does not change if it is only shallow equal to the previous one (untested):

const useMemoizedArray = (array: string[]) => {
  const [memoizedArray, setMemoizedArray] = React.useState(array);
  React.useEffect(() => {
    // Define `isShallowEqual` yourself somewhere
    if (!isShallowEqual(array, memoizedArray)) {
       setMemoizedArray(array);
    }
  }, [array, memoizedArray]);
  return memoizedArray;
};

function useLoadMessageKeys(messageKeys: string[]) {
  const memoizedMessageKeys = useMemoizedArray(messageKeys);
  return React.useCallback(
    () => {
      return load(memoizedMessageKeys)
    },
    [memoizedMessageKeys]
  )
}