DEV Community: Linh Bui

React: How does useMemo and useCallback work ?

Linh Bui — Mon, 24 Oct 2022 03:24:07 +0000

How does useMemo and useCallback work ?

When render a component, React will process the whole Component code. There might be several computed values and functions that its values only depends on few dependencies and does not need to re-calculate everytime.

If these values require a lot of time to calculate, it will let the render process down as consequent.

In order to improve performance, React produce useMemo and useCallback.
Implement it quite simple:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

The way it work are similar to each other and quite easy to understand.

💥 All the code reference I mentioned in this article was translated to javascriptand cut-off **comments* and warning parts just for shorter code and more clear.

Click View Source to see the original code*

1.Mount Phase (First Render)

function mountMemo(nextCreate, deps){
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

View Source

function mountCallback(callback, deps){
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

View Source

When component was rendered on first time, useMemo will execute the create function (nextCreate) to get return value and then store the value and dependency list into memoizedState, meanwhile useCallback store all of its inputs.

2.Update Phase

function updateMemo(nextCreate, deps) {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

View Source

function updateCallback(callback, deps) {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

View Source

When re-render a component, useMemo and useCallback will compare old dependency (that was already memoized) with the new one.

If one of those are null or they are difference (result from areHookInputsEqual), useMemo and useCallback will store and return the new value.

Otherwise, return memoized value.

Compare hook dependency function

function areHookInputsEqual(nextDeps, prevDeps) {
  if (prevDeps === null) {
    return false;
  }
  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  return true;
}

View Source

React will use Object.is to compare previos and next value of dependency. You may find the difference of its behavior here.

function is(x, y) {
  return (
    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare
  );
}
const objectIs = typeof Object.is === 'function' ? Object.is : is;
export default objectIs;

View Source

FYI

🎉 As React announcement in July 2022, there might be a new Compiler that auto generate useMemo and useCallback for us.

You can read this post here: https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html

React: How does useDeferredValue and useTransition work ?

Linh Bui — Thu, 20 Oct 2022 09:30:37 +0000

As we know that Concurrent was enabled by default in React 18.

To implement this feature, there are new 2 hooks that come into the game: useDeferredValue and useTransition

You might want to know how it work. Let’s find out

I. useDeferredValue

1. Mount phase:

In mount phase (first render), useDeferredValue will be treated as below :

function mountDeferredValue<T>(value: T): T {
  const hook = mountWorkInProgressHook();
  hook.memoizedState = value;
  return value;
}

View Source

This mean it will save the current value into memoizedState and directly return it.

So on first render, deferredValue will be the same as input value.

2. Update phase:

When component have an update, useDeferredValue will be treated as below:

function updateDeferredValue<T>(value: T): T {
  const hook = updateWorkInProgressHook();
  const resolvedCurrentHook: Hook = (currentHook: any);
  const prevValue: T = resolvedCurrentHook.memoizedState;
  return updateDeferredValueImpl(hook, prevValue, value);
}

function updateDeferredValueImpl<T>(hook: Hook, prevValue: T, value: T): T {
  const shouldDeferValue = !includesOnlyNonUrgentLanes(renderLanes);
  if (shouldDeferValue) {
    if (!is(value, prevValue)) {
      const deferredLane = claimNextTransitionLane();
      currentlyRenderingFiber.lanes = mergeLanes(
        currentlyRenderingFiber.lanes,
        deferredLane,
      );
      markSkippedUpdateLanes(deferredLane);
      hook.baseState = true;
    }
    return prevValue;
  } else {
    if (hook.baseState) {
      hook.baseState = false;
      markWorkInProgressReceivedUpdate();
    }
    hook.memoizedState = value;
    return value;
  }
}

View Source

in updateDeferredValue, it will get the previos value that was already stored in memoizedState and put the previos value and current value as parameter to next function updateDeferredValueImpl
in updateDeferredValueImpl, there will be a check if the current lanes contain a UrgentLanes

const shouldDeferValue = !includesOnlyNonUrgentLanes(renderLanes);

Dig into includesOnlyNonUrgentLanes we will know UrgentLane are :

SyncLane | InputContinuousLane | DefaultLane;

So we can see that if current process contain a UrgentLane it will skip update DeferredValue and return the previos value immediately after schedule a render with Transition Lane (not prioritized).

Otherwise if current process contain only nonUrgentLanes, it will memoize and update the new value on useDeferredValue.

The flow is simply as below diagram:

II. useTransition

1. Mount phase

function mountTransition(): [
  boolean,
  (callback: () => void, options?: StartTransitionOptions) => void,
] {
  const [isPending, setPending] = mountState(false);
  // The `start` method never changes.
  const start = startTransition.bind(null, setPending);
  const hook = mountWorkInProgressHook();
  hook.memoizedState = start;
  return [isPending, start];
}

View Source

Interesting, in mount phase, useTransition will use useState (mountState) to store its state "isPending".

Next, it will generate start function by bind setPending (dispatch setState) into startTransition, then put this function into hook. And return to the component.

Let's see what's startTransition do (I've removed all comments and warning code to make function shorter) :

function startTransition(setPending, callback) {
  const previousPriority = getCurrentUpdatePriority();
  setCurrentUpdatePriority(
    higherEventPriority(previousPriority, ContinuousEventPriority),
  );
  setPending(true);
  const prevTransition = ReactCurrentBatchConfig.transition;
  ReactCurrentBatchConfig.transition = 1;
  try {
    setPending(false);
    callback();
  } finally {
    setCurrentUpdatePriority(previousPriority);
    ReactCurrentBatchConfig.transition = prevTransition;
  }
}

So at first, it will ensure the current priority is higher than ContinuousEventPriority, then set isPending to true to mark as transition start.
After that, it will save current value of ReactCurrentBatchConfig.transition into prevTransition and then set it to 1.

Guess what, setting ReactCurrentBatchConfig.transition to 1 will force put next updates into Transition Lane.

const isTransition = requestCurrentTransition() !== NoTransition;
  if (isTransition) {
    if (currentEventTransitionLane === NoLane) {
      currentEventTransitionLane = claimNextTransitionLane();
    }
    return currentEventTransitionLane;
  }

You can check it in requestUpdateLane
After process callback, it will reset ReactCurrentBatchConfig into original by prevTransition variable.

2. Update phase

Update phase for useTransition is kind of simpler, since trigger function start was already memoized in hook.

function updateTransition(): [boolean, (() => void) => void] {
  const [isPending] = updateState(false);
  const hook = updateWorkInProgressHook();
  const start = hook.memoizedState;
  return [isPending, start];
}

Conclusion:

By looking at their code, we can see that useTransition and useDeferredValue will basically put the process into Transition Lane.
Also, Concurrent does not mean React doing multi-task in the same time. It just mean React will process tasks with priority order. To do that, React has its Scheduler that may be discussed in another post.