1. Introduction

React is one of the most widely used libraries for building user interfaces, but most developers only ever interact with its public API — useState, useEffect, JSX, and components. This tutorial goes beneath that surface to explore how React actually works internally: how it schedules work, builds trees, diffs changes, and commits updates to the DOM.

Understanding React internals helps you write faster, more predictable applications, debug tricky rendering bugs, and make sense of advanced features like Concurrent Rendering and Suspense. By the end of this tutorial, you'll understand the machinery that powers every render() call.

2. React Architecture 🏗️

Modern React (16+) is built around a layered architecture that separates what to render from how and when to render it. This separation is what enables features like time-slicing and interruptible rendering.

This split means the same reconciliation logic can target wildly different environments — the DOM, native mobile views, or even canvas — simply by swapping the renderer.

3. React Fiber 🧵

Fiber is the name of React's reimplementation of its core reconciliation algorithm, introduced in React 16. It replaced the old stack reconciler, which recursively walked the component tree synchronously and couldn't be paused once started.

A Fiber is a JavaScript object representing a unit of work corresponding to a component instance. Each Fiber holds information about a component, its input props, its output, and pointers to related fibers.

4. Fiber Tree 🌳

React maintains two fiber trees at any given time: the current tree (what's on screen) and the work-in-progress (WIP) tree (what's being built). This technique is called double buffering, borrowed from graphics programming, and it lets React build a new tree without disturbing the currently rendered UI.

Each fiber links to its child (first child only), its sibling (next sibling), and its return (parent). This linked-list-of-children structure — rather than an array of children — allows React to traverse the tree iteratively instead of recursively, which is essential for pausing and resuming work.

When a render completes, React swaps current and workInProgress via the alternate pointer — an operation known as commit.

5. Render Phase ⚙️

The render phase is where React figures out what changed. It is asynchronous and interruptible — React can pause, abort, or restart it without visible side effects, because nothing is committed to the DOM yet.

6. Commit Phase 💾

The commit phase is synchronous and cannot be interrupted. This is where React actually mutates the DOM based on the effects list gathered during the render phase.

7. Reconciliation 🔄

Reconciliation is the process of comparing the new element tree with the previous fiber tree to determine the minimal set of changes needed. React does not diff the DOM directly — it diffs lightweight React elements, then translates the result into DOM operations.

Reconciliation relies on two core assumptions to stay fast, since a fully general tree-diff algorithm is $O(n^3)$:

8. Diffing Algorithm 🧩

When comparing two fibers, React uses type and key to decide whether to reuse, update, or replace a node.

9. Virtual DOM 🕸️

The Virtual DOM is the plain JavaScript object representation produced by React.createElement() (or the JSX transform). It's a lightweight description of what the UI should look like — not a live, stateful copy of the DOM.

{
  type: 'button',
  key: null,
  props: {
    className: 'btn',
    children: 'Click me'
  }
}

The Virtual DOM's value isn't raw speed (creating objects has its own cost) — it's that it enables declarative programming: you describe the desired UI state, and React figures out the imperative DOM operations needed to get there.

10. Scheduler ⏰

The Scheduler package decides when React should perform units of work. It cooperates with the browser's frame budget (~16ms per frame at 60fps) to avoid blocking user interactions, using a technique often called time-slicing.

11. Concurrent Rendering ⚡

Concurrent Rendering (opted into via createRoot) allows React to work on multiple versions of the UI at once, pausing low-priority renders to handle urgent updates like typing or clicks.

Concurrent features built on this foundation include useTransition, useDeferredValue, and Suspense for data fetching, all of which let developers mark updates as non-urgent so React can keep the UI responsive.

12. Lanes 🛣️

Lanes are the mechanism React uses (since replacing the older "expiration time" model) to represent and track update priority using a bitmask of 31 bits. Each bit represents a "lane" that an update can occupy.

export const NoLane = 0b0000000000000000000000000000000;
export const SyncLane = 0b0000000000000000000000000000010;
export const InputContinuousLane = 0b0000000000000000000000000001000;
export const DefaultLane = 0b0000000000000000000000000100000;
export const TransitionLanes = 0b0000000001111111111000000000000;
export const IdleLane = 0b0100000000000000000000000000000;

Bitwise operations make it cheap to merge, compare, and check lanes. Multiple updates can be batched into the same lane, and React always processes the most urgent pending lane first.

13. Priority Levels 🎯

Every update entering React is assigned a priority, roughly corresponding to how urgently the user expects to see its result:

14. Batching Updates 📦

Batching means grouping multiple setState calls into a single re-render instead of re-rendering after every call. Since React 18, batching happens automatically everywhere — inside promises, timeouts, and native event handlers — not just inside React event handlers as in React 17.

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React 18: only ONE re-render, even though two state
  // updates were scheduled.
}

15. Rendering Pipeline 🚦

Putting it all together, here is the end-to-end path an update takes through React:

16. Component Lifecycle Internals 🔬

For class components, lifecycle methods map directly onto render/commit phase steps. For function components, hooks simulate lifecycle behavior using fiber memoization.

17. State Update Queue 📬

Each fiber with state maintains an update queue — a linked list of pending updates. When you call setState, React doesn't apply it immediately; it appends an update object to this queue.

During the render phase, React processes the queue in order, applying each update's payload to derive the new state — this is why functional updates (setCount(c => c + 1)) are safer than relying on a stale closed-over value.

18. Hook Internals 🪝

Hooks are not magic — each fiber stores a linked list of hook objects in memoizedState. Every hook call during render reads the next node in that list, in the exact order it was called.

19. Context Internals 🧭

Context works by storing its current value on the context object itself. When a <Provider> renders, React pushes the new value; consuming fibers below read from it during render.

Internally, React keeps a dependency list on each fiber that subscribes to context. When a Provider's value changes, React walks down the fiber tree looking for consuming fibers and marks them for update — this is why every consumer re-renders when context value changes, regardless of whether the specific piece it uses actually changed, unless memoized carefully.

20. Event System Internals 🎪

React doesn't attach a listener to every individual DOM node. Instead, it uses event delegation: a single listener is attached to the root container (in React 17+; previously to document), and React simulates bubbling internally by walking up the fiber tree.

21. Synthetic Events 🧪

The event object your handlers receive (e.g. onClick={e => ...}) is a SyntheticEvent — a cross-browser wrapper around the native event, pooled for performance in older React versions.

function handleClick(e) {
  console.log(e.type);        // "click"
  console.log(e.nativeEvent); // underlying native DOM event
}

22. Hydration Internals 💧

Hydration is the process of attaching React's event listeners and internal fiber tree to server-rendered HTML, rather than re-creating DOM nodes from scratch. React walks the existing DOM tree and matches it against the expected element tree.

23. Memory Management 🧠

React's fiber architecture is designed to minimize garbage collection pressure through fiber reuse: rather than allocating brand-new fiber objects every render, React reuses the alternate fiber from the previous tree when possible.

24. Performance Optimizations 🚀

React exposes several primitives to help avoid unnecessary work, all of which interact directly with internals discussed above:

25. React Compiler Overview 🛠️

The React Compiler (previously known as "React Forget") is a build-time tool that automatically inserts memoization, aiming to eliminate the need for manual useMemo/useCallback/React.memo calls in most cases.

It statically analyzes component code, tracks dependencies, and generates optimized output that memoizes values and skips re-renders where safe — while still relying on the same underlying fiber and reconciliation model described throughout this tutorial.

26. Debugging React Internals 🐞

27. Best Practices ✅

28. Common Misconceptions ❌

29. Frequently Asked Questions ❓

30. Summary 📝

Understanding these internals transforms React from a "black box" into a predictable system you can reason about — helping you write more performant components and debug issues with real confidence. Happy building! 🎉