Inside React’s useEffect: A Deep Dive into the Fiber Source Code

Overview of useEffect in React

The article explains why useEffect was introduced, how it replaces lifecycle methods in class components, and how it separates side‑effects from rendering logic.

Mount and Update Implementations

Both mountEffect and updateEffect are defined in ReactFiberHooks.js. They create a new hook, compute nextDeps, set the sideEffectTag, and store an Effect object via pushEffect. When dependencies have not changed, updateEffect uses NoHookEffect to skip execution.

pushEffect Function

pushEffect(tag, create, destroy, deps)

builds an Effect node (a circular linked list) and adds it to the component's updateQueue. The queue is a simple object with a lastEffect pointer, forming a circular list of effects for the component.

Component Update Queue

The componentUpdateQueue holds the effect list. When the first effect is added, the queue is initialized and its lastEffect points to the new effect; subsequent effects are linked in a circular fashion.

Render Flow from ReactDOM to Fiber

Rendering starts with ReactDOM.render, which calls updateContainer in ReactFiberReconciler.js. This function creates a root update and schedules work via scheduleWork. The scheduler eventually invokes renderRoot, which runs the workLoop (or workLoopSync) to process units of work.

performUnitOfWork and beginWork

performUnitOfWork

repeatedly calls beginWork for each fiber. For function components, beginWork executes renderWithHooks, which runs the component function, registers hooks, and builds the effect list.

Commit Phase

When the render phase finishes, commitRoot is called. It extracts the effect list from the finished work, then runs three phases:

commitBeforeMutationEffects

commitMutationEffects

commitLayoutEffects

Each phase iterates over the same circular effect list.

commitHookEffectList

The core of useEffect handling resides in commitHookEffectList(unmountTag, mountTag, finishedWork). It retrieves the component's updateQueue, walks the circular list of Effect objects, and for each effect:

If the tag matches unmountTag, it calls the stored destroy function.

If the tag matches mountTag, it calls the stored create function and saves its return value as the new destroy function.

Effects with the NoHookEffect tag are ignored, which explains why some hooks do nothing in certain phases.

Key Takeaways

The article demonstrates how React transforms a declarative useEffect call into a low‑level effect list, schedules it through the Fiber work loop, and finally executes or cleans up side‑effects during the commit phases. Understanding this pipeline clarifies the behavior of dependency arrays, cleanup functions, and the timing of effect execution.

For a visual overview of the Fiber render and commit phases, see the diagram from the React Conf 2017 talk "A Cartoon Intro to Fiber".