マウントと更新の 2 種類の状況があるため、useMemo には mountMemo と updateMemo の 2 つの実装があります。

• mountMemo:
のソースコード

function mountMemo(
  nextCreate: () => T,
  deps: Array | 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;
}

説明：
マウントフェーズでは、useMemo 関数がコールバック関数を呼び出して値を計算して返します。値を保存し、hook.memoizedState.

1. mountWorkInProgressHook を使用してフック オブジェクトを作成します。

2. nextDeps に Deps を保存します。

3. nextCreate() を呼び出して nextValue を取得します。開発環境の場合は、2 回呼び出します。

4. nextValue と nextDeps をフック.memoizedState に保存し、nextValue.

を返します。

• updateMemo:
のソースコード

function updateMemo(
  nextCreate: () => T,
  deps: Array | 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 | 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;
}

説明：
更新フェーズでは、React は deps が変更されたかどうかを判断し、変更された場合、React はコールバックを実行して新しい値を取得して戻ります。変更しない場合、React は古い値を返します。

1. 新しいフック オブジェクトを取得します。hook = updateWorkInProgressHook();
2. deps 配列が空の場合 (nextDeps !== null)、レンダリングごとにコールバック関数を呼び出し、新しい値を返します。
3. deps 配列が空でない場合、(areHookInputsEqual(nextDeps, prevDeps)) の場合、deps が変更されたかどうかを判定します。変更されていない場合は、古い値を返します return prevState[0];.