Walkthrough: First Render End to End

This page is the narrative. Every step links to the deep-dive page that explains it properly. The companion story, a click that updates the counter, is setState Walkthrough.

The running example

The same app is used on both walkthrough pages. I added one layout effect and one passive effect so the commit phase has something to run:

import { useState, useEffect, useLayoutEffect } from "react";
import { createRoot } from "react-dom/client";

function Header({ title }) {
  return <h1>{title}</h1>;
}

function Footer() {
  return <footer>made with React</footer>;
}

function App() {
  const [count, setCount] = useState(0);
  useLayoutEffect(() => {
    document.title = `count: ${count}`;
  }, [count]);
  useEffect(() => {
    console.log("committed", count);
  }, [count]);
  return (
    <div>
      <Header title="Counter" />
      <button onClick={() => setCount((c) => c + 1)}>{count}</button>
      <Footer />
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);

The fiber tree this produces has eight fibers: HostRoot → App → div → [Header → h1, button, Footer → footer]. There are no HostText fibers. <h1>{title}</h1>, <button>{count}</button> and <footer>made with React</footer> each have a single string or number child, and shouldSetTextContent says those are written as textContent rather than getting their own fiber.¹ That detail comes back in the update walkthrough.

The whole flow

sequenceDiagram
  autonumber
  participant JS as your module
  participant DOM as react-dom
  participant RC as reconciler
  participant MT as microtask
  participant S as Scheduler (MessageChannel)
  participant WL as work loop
  participant C as commit
  participant B as browser
  JS->>JS: JSX → jsx() → element objects
  JS->>DOM: createRoot(container)
  DOM->>RC: createContainer → FiberRootNode + HostRoot fiber
  DOM->>DOM: markContainerAsRoot, listenToAllSupportedEvents
  JS->>DOM: root.render(<App/>)
  DOM->>RC: updateContainer: requestUpdateLane = DefaultLane
  RC->>RC: createUpdate {payload: {element}} → concurrentQueues
  RC->>RC: scheduleUpdateOnFiber → markRootUpdated → ensureRootIsScheduled
  RC->>MT: queueMicrotask (once)
  Note over JS,MT: script ends, nothing rendered yet
  MT->>RC: processRootScheduleInMicrotask
  RC->>S: scheduleCallback(Normal, performWorkOnRootViaSchedulerTask)
  S->>WL: (new macrotask) performWorkOnRoot(root, DefaultLane)
  WL->>WL: shouldTimeSlice = false → renderRootSync
  WL->>WL: prepareFreshStack: WIP HostRoot, flush queued update
  WL->>WL: beginWork ↓ (HostRoot, App: hooks mount, div, Header, h1, …)
  WL->>WL: completeWork ↑ (createInstance, appendAllChildren, bubbleProperties)
  WL->>C: completeRoot → commitRoot
  C->>S: scheduleCallback(Normal, flushPassiveEffects)
  C->>C: before mutation: clearContainer
  C->>B: mutation: container.appendChild(div) (once)
  C->>C: root.current = finishedWork
  C->>C: layout: useLayoutEffect, refs
  C->>S: requestPaint()
  S-->>B: yield → style, layout, PAINT
  S->>C: (next macrotask) flushPassiveEffects → useEffect

Call stack at a glance

── synchronous, in your module ───────────────────────────────────────────
jsx(App, {})                                   → ReactElement {type: App, props: {}}
createRoot(container)
  createContainer → createFiberRoot            → FiberRootNode + HostRoot fiber, initializeUpdateQueue
  markContainerAsRoot(root.current, container)
  listenToAllSupportedEvents(container)
root.render(<App/>)  (ReactDOMRoot.prototype.render)
  updateContainer
    requestUpdateLane(current)                 → DefaultLane
    updateContainerImpl
      createUpdate(lane); update.payload = {element}
      enqueueUpdate → enqueueConcurrentClassUpdate  (buffered in concurrentQueues)
      scheduleUpdateOnFiber
        markRootUpdated                        (root.pendingLanes |= DefaultLane)
        ensureRootIsScheduled → ensureScheduleIsScheduled
          scheduleImmediateRootScheduleTask    → queueMicrotask(...)
── microtask ──────────────────────────────────────────────────────────────
processRootScheduleInMicrotask
  scheduleTaskForRootDuringMicrotask           → scheduleCallback(NormalPriority, performWorkOnRootViaSchedulerTask)
── macrotask: Scheduler (MessageChannel) ──────────────────────────────────
performWorkUntilDeadline → flushWork → workLoop
  performWorkOnRootViaSchedulerTask
    performWorkOnRoot(root, DefaultLane, forceSync=false)
      renderRootSync                           (shouldTimeSlice === false)
        prepareFreshStack → createWorkInProgress(root.current), finishQueueingConcurrentUpdates
        workLoopSync → performUnitOfWork × 8
          beginWork(HostRoot) → updateHostRoot → processUpdateQueue → reconcileChildFibers
          beginWork(App)      → updateFunctionComponent → renderWithHooks → App()
                                 mountState, mountLayoutEffect, mountEffect → mountChildFibers
          beginWork(div)      → updateHostComponent → reconcileChildrenArray
          …
          completeUnitOfWork → completeWork(h1 | button | footer | div)
                                 createInstance, appendAllChildren, finalizeInitialChildren, bubbleProperties
      finishConcurrentRender → completeRootWhenReady → completeRoot → commitRoot
        commitBeforeMutationEffects            (HostRoot Snapshot → clearContainer)
        flushMutationEffects → commitMutationEffects → … → commitPlacement
          insertOrAppendPlacementNodeIntoContainer → appendChildToContainer
          root.current = finishedWork
        flushLayoutEffects → commitLayoutEffects → commitHookLayoutEffects
        flushSpawnedWork → requestPaint()
── browser: style / layout / paint ───────────────────────────────────────
── later macrotask: Scheduler ─────────────────────────────────────────────
flushPassiveEffects → flushPassiveEffectsImpl → commitPassiveMountEffects → useEffect create()

The steps

1. Module load: JSX becomes plain objects

Before React does anything, your bundler has turned <App /> into jsx(App, {}) (automatic runtime). In production jsx is jsxProd, which reuses the config object literal as props and calls ReactElement to build {$$typeof: REACT_ELEMENT_TYPE, type: App, key: null, ref: null, props: {}}.²³ Nothing else happens. An element is an inert description, and none of App's code has run. useState is also just a forwarding stub at this point: it reads ReactSharedInternals.H, which is null outside a render.⁴

→ deep dive: Bootstrap

2. createRoot: FiberRoot, HostRoot, and every listener

createRoot(container) validates the container and calls createContainer, which calls createFiberRoot.⁵⁶ That builds two objects pointing at each other:⁷⁸⁹

ReactDOMRoot { _internalRoot } ──► FiberRootNode
                                     containerInfo: div#root
                                     current ──────────────► HostRoot fiber (tag 3, ConcurrentMode)
                                     pendingLanes: 0           stateNode ──► FiberRootNode
                                     callbackNode: null        memoizedState: {element: null, isDehydrated: false, cache}
                                                               updateQueue: {baseState, shared: {pending: null}, …}
                                                               alternate: null, child: null

initializeUpdateQueue gives the HostRoot a class-style update queue.¹⁰ Then createRoot stamps the container with __reactContainer$<random> (markContainerAsRoot) and calls listenToAllSupportedEvents(container), which attaches one capture listener and (for bubbling events) one bubble listener per native event type.¹¹¹² All the event wiring the click in page 21 needs exists now, before any component has rendered.

→ deep dive: createRoot, Event System

3. root.render(<App/>) → updateContainer

ReactDOMRoot.prototype.render checks the root isn't unmounted and calls updateContainer(children, root, null, null).¹³ updateContainer reads container.current (the HostRoot fiber), picks a lane, and hands off to updateContainerImpl.¹⁴

→ deep dive: root.render

4. requestUpdateLane → DefaultLane

requestUpdateLane checks for a render-phase update (no), then for a transition (ReactSharedInternals.T is null), and finally returns eventPriorityToLane(resolveUpdatePriority()).¹⁵ The DOM's resolveUpdatePriority finds no priority set by a React event wrapper and, at top level in a module, window.event === undefined, so it returns DefaultEventPriority.¹⁶ Event priorities are lanes: DefaultEventPriority is defined as DefaultLane.¹⁷

SyncLane     = 0b0000000000000000000000000000010
DefaultLane  = 0b0000000000000000000000000100000   ← this update

¹⁸

→ deep dive: Lanes & Scheduler

5. The update is created and buffered

updateContainerImpl creates Update {lane: DefaultLane, tag: UpdateState, payload: {element: <App/>}} and calls enqueueUpdate(rootFiber, update, lane).¹⁹²⁰ That goes to enqueueConcurrentClassUpdate, which does not link the update into updateQueue.shared.pending yet.²¹ It pushes (fiber, queue, update, lane) onto the module-level concurrentQueues array and marks fiber.lanes |= DefaultLane right away.²² getRootForUpdatedFiber walks .return to the HostRoot, which for the root fiber is immediate, and returns the FiberRoot.²³

concurrentQueues = [HostRoot, hostRootQueue, update{payload:{element}}, DefaultLane]
HostRoot.lanes   = DefaultLane
HostRoot.updateQueue.shared.pending = null      ← still empty; linked in step 10

→ deep dive: root.render, setState (same buffer)

6. scheduleUpdateOnFiber marks the root

scheduleUpdateOnFiber(root, rootFiber, DefaultLane) calls markRootUpdated, which ORs the lane into root.pendingLanes and clears the suspended/pinged bookkeeping.²⁴²⁵ We're not inside a render, so it goes on to ensureRootIsScheduled(root). After this step, root.pendingLanes === DefaultLane is the only record that there is work to do.

7. ensureRootIsScheduled books one microtask

ensureRootIsScheduled appends the root to the scheduler's linked list of roots, sets mightHavePendingSyncWork, and calls ensureScheduleIsScheduled.²⁶²⁷ That queues at most one microtask per tick via scheduleImmediateRootScheduleTask, and in the DOM host config scheduleMicrotask is queueMicrotask.²⁸²⁹ root.render now returns. Your script carries on. If it called root.render again, the second update would join the same queue and the same microtask.

8. Microtask: pick lanes, book a Scheduler task

When the JS stack empties, processRootScheduleInMicrotask runs. For each scheduled root it calls scheduleTaskForRootDuringMicrotask.³⁰ That calls getNextLanes, which returns DefaultLane. The result doesn't include SyncLane, so instead of flushing in the microtask, it maps the lane's event priority to NormalPriority and calls scheduleCallback(NormalPriority, performWorkOnRootViaSchedulerTask.bind(null, root)).³¹ The Scheduler pushes the task onto its min-heap and posts a MessageChannel message.³²³³

→ deep dive: Lanes & Scheduler

9. Scheduler task → performWorkOnRoot, and why it is not time-sliced

In a new macrotask, performWorkUntilDeadline → flushWork → workLoop calls the callback.³⁴³⁵³⁶ Between the microtask and this task the browser could paint, so any static HTML shell stays visible. performWorkOnRootViaSchedulerTask flushes leftover passive effects (none), recomputes getNextLanes (still DefaultLane), and calls performWorkOnRoot(root, lanes, forceSync).³⁷

Now the important decision:³⁸

const shouldTimeSlice =
  (!forceSync && !includesBlockingLane(lanes) && !includesExpiredLane(root, lanes)) ||
  checkIfRootIsPrerendering(root, lanes);
let exitStatus = shouldTimeSlice
  ? renderRootConcurrent(root, lanes)
  : renderRootSync(root, lanes, true);

includesBlockingLane tests against SyncLane | InputContinuousLane | DefaultLane (plus their hydration variants and GestureLane).³⁹ DefaultLane is in that set, so shouldTimeSlice is false and the first render runs through renderRootSync, in one go, never checking shouldYield(). Only transition, retry, idle and offscreen lanes reach renderRootConcurrent.

→ deep dive: Work Loop

10. prepareFreshStack: a WIP HostRoot, and the update gets linked

renderRootSync sets executionContext |= RenderContext, pushes the dispatcher, and sees workInProgressRoot !== root, so it calls prepareFreshStack(root, DefaultLane).⁴⁰⁴¹ Two things matter there:

• createWorkInProgress(root.current, null). The HostRoot has no alternate, so a second HostRoot fiber is allocated and the two are cross-linked (wip.alternate = current, current.alternate = wip). The WIP copies updateQueue, memoizedState, lanes and child (null).⁴²
• finishQueueingConcurrentUpdates() drains concurrentQueues. The update is spliced into queue.shared.pending (a one-element circular list), and markUpdateLaneFromFiberToRoot would set childLanes on ancestors (the HostRoot has none).⁴³

FiberRoot.current ──► HostRoot(A)  ◄──alternate──►  HostRoot(B) = workInProgress
                      shared.pending ──► update ⟲ (both share the same queue.shared)

→ deep dive: Fiber, Work Loop

11. beginWork(HostRoot): the queue becomes the element

workLoopSync calls performUnitOfWork until workInProgress === null.⁴⁴⁴⁵ The first unit is HostRoot(B). beginWork sees current !== null, with identical (null) props, but checkScheduledUpdateOrContext finds DefaultLane in current.lanes, so it doesn't bail. It sets workInProgress.lanes = NoLanes and dispatches to updateHostRoot.⁴⁶ updateHostRoot clones the queue and runs processUpdateQueue, which applies the payload: memoizedState = {element: <App/>, …}.⁴⁷⁴⁸ nextChildren is that element, so it calls reconcileChildren.

→ deep dive: beginWork & Reconciliation

12. Placement only on the top

The HostRoot has a current, so reconcileChildren uses reconcileChildFibers, the reconciler with side-effect tracking on.⁴⁹ reconcileSingleElement finds no existing child, calls createFiberFromElement (a function without prototype.isReactComponent becomes a FunctionComponent fiber), and placeSingleChild sees alternate === null and sets Placement on the App fiber.^50515253

Every fiber below App has current === null and goes through mountChildFibers, which is the same reconciler with tracking off. None of them get Placement. That's the setup for the single DOM insertion in step 18.

13. beginWork(App): renderWithHooks with the mount dispatcher

updateFunctionComponent calls renderWithHooks.⁵⁴ renderWithHooks sets currentlyRenderingFiber = App, nulls memoizedState and updateQueue, and because current === null installs HooksDispatcherOnMount in ReactSharedInternals.H. Then it calls App(props).⁵⁵⁵⁶ Your code runs for the first time.

14. Hooks build the list

Each hook call appends a node via mountWorkInProgressHook.⁵⁷

• useState(0) → mountState → mountStateImpl creates the hook and its queue {pending: null, lanes: NoLanes, lastRenderedReducer: basicStateReducer, lastRenderedState: 0}, and binds dispatch = dispatchSetState.bind(null, App fiber, queue).⁵⁸⁵⁹ That bound function is the setCount your onClick closes over.
• useLayoutEffect → mountLayoutEffect sets fiber flags Update | LayoutStatic and pushes an effect tagged HookHasEffect | HookLayout.⁶⁰⁶¹
• useEffect → mountEffect sets Passive | PassiveStatic and pushes an effect tagged HookHasEffect | HookPassive.⁶²⁶³

App fiber
  flags: Placement | Update | Passive   (+ static flags)
  memoizedState ─► Hook{useState: 0, queue}
                    └ next ─► Hook{Effect{Layout|HasEffect, deps:[0]}}
                               └ next ─► Hook{Effect{Passive|HasEffect, deps:[0]}}
  updateQueue: {lastEffect ─► passive effect ⟲ layout effect, events: null, stores: null, memoCache: null}

App returns a <div> element. renderWithHooks swaps in ContextOnlyDispatcher (calling a hook now would throw) and returns it. reconcileChildren (mount variant) creates the div fiber.

→ deep dive: Hooks on Mount

15. Children all the way down

beginWork(div) → updateHostComponent pushes host context, and props.children is an array, so reconcileChildrenArray creates three fibers: Header, button and Footer.⁶⁴⁶⁵ Then the depth-first walk continues:

performUnitOfWork copies pendingProps into memoizedProps after each beginWork. That stored props object is what the next render compares by identity.⁴⁵ completeUnitOfWork drives the climb.⁶⁶

→ deep dive: Work Loop, beginWork & Reconciliation

16. completeWork: DOM built off-screen

For each HostComponent with no current, completeWork calls createInstance (document.createElement, plus precacheFiberNode and updateFiberProps, which write the __reactFiber$ and __reactProps$ expandos the event system reads later).^67686970 It then calls appendAllChildren, which appends the nearest host descendants through component fibers. At div it skips over Header and Footer and appends h1, button and footer.⁷¹⁷² Finally finalizeInitialChildren → setInitialProperties sets attributes, and setProp('children', 0) sets the button's textContent to "0".⁷³⁷⁴⁷⁵ onClick isn't an attribute. setProp only installs Safari's no-op onclick workaround (trapClickOnNonInteractiveElement).⁷⁶

detached:  <div><h1>Counter</h1><button>0</button><footer>made with React</footer></div>
document:  <div id="root"></div>         ← untouched so far

At the HostRoot, completeWork sees a first client render (current.child === null, not hydrating) and sets Snapshot, which schedules clearContainer for the commit.⁷⁷

→ deep dive: completeWork

17. bubbleProperties: summaries for the commit

Every completeWork ends with bubbleProperties, which ORs children's flags | subtreeFlags into the parent's subtreeFlags and merges lanes | childLanes into childLanes.⁷⁸ At the end:

HostRoot(B)  flags: Snapshot      subtreeFlags: Placement|Update|Passive|…   childLanes: 0
App          flags: Placement|Update|Passive
div, h1, button, footer, Header, Footer: no mutation flags

The commit can now ask "is there anything of kind X below here?" with one bitmask test per fiber.

18. Commit: completeRoot → commitRoot, mutation, the single insertion

performWorkOnRoot reads finishedWork = root.current.alternate and calls finishConcurrentRender (used for sync renders too). That calls completeRootWhenReady → completeRoot → commitRoot.^7980818283 There is no commitRootImpl in 19.3.1. commitRoot:

1. markRootFinished clears DefaultLane from pendingLanes.
2. The tree has Passive in its subtreeFlags, so it posts scheduleCallback(NormalSchedulerPriority, flushPassiveEffects) before any DOM work.⁸⁴
3. Before mutation: commitBeforeMutationEffects disables React's event system, and for the HostRoot's Snapshot calls clearContainer, removing any placeholder markup.⁸⁵⁸⁶⁸⁷
4. Mutation: flushMutationEffects → commitMutationEffects → commitMutationEffectsOnFiber recurses where subtreeFlags & MutationMask, and commitReconciliationEffects finds Placement on App.^88899091 commitHostPlacement → commitPlacement finds the host parent (the HostRoot, so containerInfo). App isn't a host node, so insertOrAppendPlacementNodeIntoContainer recurses to div and calls appendChildToContainer(container, div).^92939495 That one call puts the whole UI into the document.

→ deep dive: Commit Phase

19. The swap: root.current = finishedWork

At the end of flushMutationEffects, React does root.current = finishedWork (line 4051).⁹⁶ It sits after mutation, so unmount-style code would still see the old tree, and before layout, so useLayoutEffect and refs see the new one. HostRoot(B) is now current. HostRoot(A) is the scratch buffer for the next render.

20. Layout effects (before paint)

flushLayoutEffects → commitLayoutEffects → commitLayoutEffectOnFiber, children first, pruned by LayoutMask.⁹⁷⁹⁸⁹⁹ App has Update, so commitHookLayoutEffects → commitHookEffectListMount(HookLayout | HookHasEffect) runs the layout create function: document.title = "count: 0".¹⁰⁰¹⁰¹ The DOM is live, so measuring here returns real geometry (with a forced synchronous layout). Nothing has painted.

21. flushSpawnedWork → requestPaint → pixels

flushSpawnedWork calls requestPaint(), which sets Scheduler's needsPaint.¹⁰²¹⁰³ The lanes were DefaultLane, not SyncLane, so the "flush passive effects synchronously" branch is skipped.¹⁰⁴ The task returns. Back in Scheduler's workLoop, shouldYieldToHost() now returns true because needsPaint is set, so Scheduler stops and posts another message instead of running the passive-effects task straight away.¹⁰⁵ The JS task ends, and the browser runs style, layout and paint. The user sees "Counter / 0 / made with React".

22. Passive effects in the next task

The next Scheduler macrotask runs the callback posted in step 18: flushPassiveEffects → flushPassiveEffectsImpl. That first runs all passive unmounts (none), then commitPassiveMountEffects → commitPassiveMountOnFiber → commitHookPassiveMountEffects → your useEffect create function. console.log("committed", 0).^106107108109 A setState here would get at most DefaultLane and be batched normally.

With the React Compiler

This is the real babel-plugin-react-compiler@1.0.0 output for the example (file compile-demo/examples/Walkthrough.jsx → out-Walkthrough.js in the scratchpad, verbatim apart from the comments I added):

import { c as _c } from "react/compiler-runtime";
function Header(t0) {
  const $ = _c(2);
  const { title } = t0;
  let t1;
  if ($[0] !== title) {
    t1 = <h1>{title}</h1>;
    $[0] = title;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  return t1;
}
function Footer() {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <footer>made with React</footer>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}
function App() {
  const $ = _c(13);
  const [count, setCount] = useState(0);
  let t0;
  let t1;
  if ($[0] !== count) {
    t0 = () => { document.title = `count: ${count}`; };
    t1 = [count];
    $[0] = count; $[1] = t0; $[2] = t1;
  } else {
    t0 = $[1]; t1 = $[2];
  }
  useLayoutEffect(t0, t1);
  let t2;
  let t3;
  if ($[3] !== count) {
    t2 = () => { console.log("committed", count); };
    t3 = [count];
    $[3] = count; $[4] = t2; $[5] = t3;
  } else {
    t2 = $[4]; t3 = $[5];
  }
  useEffect(t2, t3);
  let t4;
  let t5;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t4 = <Header title="Counter" />;        // no reactive inputs: built once per fiber
    t5 = () => setCount(_temp);             // setCount is stable, so the handler is too
    $[6] = t4; $[7] = t5;
  } else {
    t4 = $[6]; t5 = $[7];
  }
  let t6;
  if ($[8] !== count) {
    t6 = <button onClick={t5}>{count}</button>;
    $[8] = count; $[9] = t6;
  } else {
    t6 = $[9];
  }
  let t7;
  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
    t7 = <Footer />;
    $[10] = t7;
  } else {
    t7 = $[10];
  }
  let t8;
  if ($[11] !== t6) {
    t8 = <div>{t4}{t6}{t7}</div>;
    $[11] = t6; $[12] = t8;
  } else {
    t8 = $[12];
  }
  return t8;
}
function _temp(c) {
  return c + 1;                             // the updater, outlined to module scope
}

(I joined some short statements onto one line.) Now re-walk the 22 steps:

• Steps 1–12: unchanged. The compiler doesn't touch react-dom, the root, lanes, the scheduler or beginWork(HostRoot). createRoot(...).render(<App />) at module level isn't inside a component, so it is left alone. The _c import resolves to useMemoCache: react/compiler-runtime is literally export {useMemoCache as c} from './ReactHooks'.¹¹⁰

• Step 13: one extra hook call first. App() begins with _c(13), dispatched through the mount dispatcher to useMemoCache.⁵⁶¹¹¹ There is no cache on the fiber or its (nonexistent) alternate, so it allocates {data: [], index: 0}, creates the FunctionComponentUpdateQueue, stores the cache in fiber.updateQueue.memoCache, and returns a 13-slot array filled with REACT_MEMO_CACHE_SENTINEL (Symbol.for('react.memo_cache_sentinel')).¹¹¹¹¹² It doesn't add a node to the hook list.

• Step 14: same hook list, plus cache filling. Every $[i] !== dep test is true against the sentinel, and every === sentinel test is true by definition, so every scope runs once and writes its slots. useState, useLayoutEffect and useEffect produce exactly the hook nodes and effect ring shown in step 14. The effects are pushed into the same updateQueue object that holds the cache.

  TextCopy

  App.updateQueue.memoCache.data[0] =
    [0, layoutFn, [0], 0, passiveFn, [0], <Header/>, onClickFn, 0, <button/>, <Footer/>, <button/>, <div/>]
     0     1      2   3     4       5       6          7      8      9         10        11       12

• Step 15: same walk. Header and Footer are compiled too. Header caches <h1> on title (_c(2)), and Footer caches <footer> behind a sentinel (_c(1)). Each fills its own cache on its own fiber. Every component still runs exactly once, and every fiber is created exactly as before: current === null everywhere, so no bailout check applies.

• Steps 16–22: unchanged. Same DOM nodes, same single appendChildToContainer, same swap, same layout effect, same paint, same passive effect in the next task. The cached element objects simply become the pendingProps source for the fibers, as uncompiled elements would.

The cost on mount is three small arrays (13 + 2 + 1 slots), a few comparisons and stores, and the closures that would have been created anyway. The payoff shows up only on the next render, which is the subject of setState Walkthrough: the cached <Header/> and <Footer/> elements are what let React skip those subtrees.

Step by step comparison

Summary

createRoot(el).render(<App/>) renders nothing synchronously: it builds the root objects, attaches the listeners, buffers one DefaultLane update and books a microtask. The microtask books a Scheduler task, which renders the whole tree with renderRootSync, because DefaultLane is blocking and never time-sliced. The DOM is built off-screen, inserted with one appendChildToContainer, layout effects run, the browser paints, and useEffect runs in a later task. The compiler only adds cache filling; its payoff comes on the next render, in the click walkthrough.

Key takeaways

• JSX and createRoot: elements are inert objects; createRoot builds the FiberRootNode and HostRoot fiber and calls listenToAllSupportedEvents before any component runs.
• requestUpdateLane: with no React event and no transition, a top-level root.render resolves to DefaultEventPriority, which is DefaultLane.
• Buffered update: enqueueConcurrentClassUpdate parks the update in concurrentQueues; prepareFreshStack links it into shared.pending only when the render starts (root.render).
• One microtask, then a task: ensureRootIsScheduled queues one microtask, and scheduleTaskForRootDuringMicrotask books a NormalPriority Scheduler task because the lanes don't include SyncLane (Lanes & Scheduler).
• Not time-sliced: includesBlockingLane covers DefaultLane, so shouldTimeSlice is false; createRoot makes the first render asynchronous, not interruptible (Work Loop).
• Placement only on App: the HostRoot reconciles with side-effect tracking on, while everything below goes through mountChildFibers.
• Hooks on mount: HooksDispatcherOnMount builds the hook list, binds setCount to dispatchSetState, and flags the fiber Update | Passive.
• completeWork: createInstance writes the __reactFiber$/__reactProps$ expandos, appendAllChildren assembles the detached tree, and bubbleProperties summarises flags (completeWork).
• Commit: passive effects are scheduled first, clearContainer runs, one appendChildToContainer inserts the UI, then root.current = finishedWork and layout effects run before paint (Commit Phase).
• Paint, then useEffect: requestPaint makes Scheduler yield, the browser paints, and the passive effect runs in the next task because this commit was not SyncLane.

← Prev · Index · Next →