"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > The source code of useMemo:

The source code of useMemo:

Published on 2024-11-08
Browse:317

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(
  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;
}


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(
  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;
}


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];.
Release Statement This article is reproduced at: https://dev.to/clara1123/the-source-code-of-usememo-5akk?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3