Il existe deux types de circonstances : le montage et la mise à jour, donc useMemo a deux implémentations : mountMemo et updateMemo.

• Le code source de 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;
}

Explication:
Dans la phase de montage, la fonction useMemo appelle la fonction de rappel pour calculer et renvoyer la valeur. Enregistrez la valeur et les dépôts dans hook.memoizedState.

1. Utilisez mountWorkInProgressHook pour créer un objet hook.

2. Enregistrer les dépôts dans les prochains Deps.

3. Appelez nextCreate() pour obtenir nextValue. Si vous êtes dans un environnement de développement, appelez deux fois.

4. Enregistrez la nextValue et nextDeps dans le hook.memoizedState et renvoyez nextValue.

• Le code source de 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;
}

Explication:
Dans la phase de mise à jour, React jugera si les dépôts ont changé ou non, s'ils sont modifiés, React exécutera le rappel pour obtenir la nouvelle valeur et reviendra. Si cela n’est pas modifié, React renverra l’ancienne valeur.

1. Obtenez un nouvel objet hook : hook = updateWorkInProgressHook();
2. si le tableau deps est vide si (nextDeps !== null), appelez la fonction de rappel à chaque rendu et renvoyez une nouvelle valeur.
3. Si le tableau deps n'est pas vide, jugez si les deps ont changé ou non si (areHookInputsEqual(nextDeps, prevDeps)). Si elle n'est pas modifiée, renvoie l'ancienne valeur return prevState[0];.