The source code of useMemo:

There are two kinds of circumstances: mount and update, so useMemo has two implementations: mountMemo and updateMemo.

• The source code of mountMemo:

function mountMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const nextValue = nextCreate();
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    setIsStrictModeForDevtools(true);
    nextCreate();
    setIsStrictModeForDevtools(false);
  }
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

Explanation:
In the mount phase, the useMemo function calls the callback function to calculate and return the value. Save the value and deps into hook.memoizedState.

1. Use mountWorkInProgressHook to create a hook object.

2. Save deps in nextDeps.

3. Call the nextCreate() to get nextValue. If in a dev environment, call twice.

4. Save the nextValue and nextDeps in the hook.memoizedStateand return nextValue.

• The source code of updateMemo:

function updateMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  // Assume these are defined. If they're not, areHookInputsEqual will warn.
  if (nextDeps !== null) {
    const prevDeps: Array<mixed> | null = prevState[1];
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      return prevState[0];
    }
  }
  const nextValue = nextCreate();
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    setIsStrictModeForDevtools(true);
    nextCreate();
    setIsStrictModeForDevtools(false);
  }
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

Explanation:
In the update phase, React will judge whether the deps have changed or not, if changed, React will run the callback to get the new value and return. If not changed, React will return the old value.

1. Get a new hook object: hook = updateWorkInProgressHook();
2. if deps array is empty if (nextDeps !== null), call the callback function every render and return new value.
3. If the deps array is not empty, judge whether the deps have changed or not if (areHookInputsEqual(nextDeps, prevDeps)). If not changed, return the old value return prevState[0];.

The above is the detailed content of The source code of useMemo:. For more information, please follow other related articles on the PHP Chinese website!