React Hooks: useReducer Analysis

Explanation#

This article is based on v18.1.0.
To read this article, you need to read React Hooks: hooks chain and React Hooks: useState analysis first.
Like other hooks, it is divided into mount and update phases.
It is almost identical to useState, so many contents can be directly referenced from useState.
The analysis is based on the official demo.

import { useReducer } from "react";

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

export default Counter;

useReducer in the mount phase#

When initializing useReducer, it will enter the following code:

function mountReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  // Create a hook object and attach it to the linked list
  const hook = mountWorkInProgressHook();
  let initialState;
  // Check if there is an initialization function
  if (init !== undefined) {
    // Process initialArg based on init
    initialState = init(initialArg);
  } else {
    // Assign initialArg directly
    initialState = ((initialArg: any): S);
  }
  // Attach the initial value to the hook object
  hook.memoizedState = hook.baseState = initialState;
  // Like useState, they both have a queue to manage updates
  // You can refer to the analysis of useState for details, skipping here
  const queue: UpdateQueue<S, A> = {
    pending: null,
    interleaved: null,
    lanes: NoLanes,
    dispatch: null,
    lastRenderedReducer: reducer,
    lastRenderedState: (initialState: any),
  };
  hook.queue = queue;
  /**
   * Like useState, dispatch is returned, but here it is dispatchReducerAction, while useState returns dispatchSetState
   * They are similar, let's take a look next
  */
  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchReducerAction.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ): any));
  return [hook.memoizedState, dispatch];
}

As you can see, the implementation of useReducer is almost identical to useState in the mount phase, and it is almost the same afterwards.

Triggering dispatch in useReducer#

When clicking on any onClick event, it will trigger dispatchReducerAction.

Since it is very similar to dispatchSetState, only the differences will be explained here.

function dispatchReducerAction<S, A>(
  fiber: Fiber,
  queue: UpdateQueue<S, A>,
  action: A,
) {
  ...

  const lane = requestUpdateLane(fiber);

  const update: Update<S, A> = {
    lane,
    action,
    hasEagerState: false,
    eagerState: null,
    next: (null: any),
  };

  if (isRenderPhaseUpdate(fiber)) {
    enqueueRenderPhaseUpdate(queue, update);
  } else {
    /**
     * Compared with dispatchSetState, it can be found that
     * dispatchReducerAction does not calculate the expected value (eagerState) for the first generated update here
    */
    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
    if (root !== null) {
      const eventTime = requestEventTime();
      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
      entangleTransitionUpdate(root, queue, lane);
    }
  }

  ...
}

The rest is exactly the same.

useReducer in the update phase#

The update phase of useReducer is exactly the same as useState, which has been explained in useState, so it will not be repeated here.

Summary#

The implementation logic of useReducer is almost identical to useState. The only differences are:

The dispatch of useReducer does not calculate the expected value (eagerState) when generating the first update object.
useReducer does not generate a basicStateReducer like useState in the mount phase, but directly uses the Reducer passed in.