마운트와 업데이트라는 두 가지 상황이 있으므로 useMemo에는 mountMemo 및 updateMemo.

• 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 함수는 콜백 함수를 호출하여 값을 계산하고 반환합니다. 값과 deps를 Hook.memoizedState.

1. mountWorkInProgressHook를 사용하여 후크 객체를 생성합니다.

2. nextDeps에 deps를 저장합니다.

3. nextCreate()를 호출하여 nextValue를 얻습니다. 개발 환경에서는 두 번 호출하세요.

4. hook.memoizedState에 nextValue와 nextDeps를 저장하고 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];.