Walkthrough: setState to Pixels

This continues the app from First Render Walkthrough. The first render has committed, its passive effect has run, and the screen shows 0.

Starting state

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>
  );
}

FiberRoot.current ─► HostRoot(B)          HostRoot(A) = alternate (the old WIP from mount)
                      └ App               alternate: null    lanes: 0
                         └ div            alternate: null
                            ├ Header ─ h1     (all alternate: null; only the HostRoot pair exists so far)
                            ├ button          stateNode: <button>, __reactProps$.onClick = arrow#1
                            └ Footer ─ footer
App.memoizedState: Hook{0, queue{pending: null, lastRenderedState: 0, dispatch: setCount}} → Hook{layout} → Hook{passive}
root.pendingLanes: 0

The whole flow

sequenceDiagram
  autonumber
  participant U as user
  participant B as browser
  participant L as root listener (react-dom)
  participant H as your onClick
  participant RC as reconciler
  participant MT as microtask
  participant WL as work loop
  participant C as commit
  U->>B: click <button>
  B->>L: native click, capture then bubble on #root
  L->>L: dispatchDiscreteEvent: p = DiscreteEventPriority, T = null
  L->>L: dispatchEvent → getClosestInstanceFromNode → button fiber
  L->>L: SimpleEventPlugin: accumulateSinglePhaseListeners('onClick')
  L->>H: processDispatchQueue → listener(syntheticEvent)
  H->>RC: setCount(c => c + 1) = dispatchSetState
  RC->>RC: requestUpdateLane → SyncLane, eager state: 1 ≠ 0
  RC->>RC: enqueueConcurrentHookUpdate (buffered), App.lanes = SyncLane
  RC->>MT: scheduleUpdateOnFiber → ensureRootIsScheduled → queueMicrotask
  L->>L: restore priority; listener returns
  MT->>RC: processRootScheduleInMicrotask: SyncLane → no Scheduler task
  RC->>WL: flushSyncWorkAcrossRoots → performSyncWorkOnRoot → renderRootSync
  WL->>WL: prepareFreshStack: link update, HostRoot.childLanes = SyncLane
  WL->>WL: HostRoot bails out → App renders (updateReducerImpl: 1)
  WL->>WL: div, Header, h1, button, Footer, footer (no compiler: all re-render)
  WL->>WL: completeWork: markUpdate on changed props (no diff yet)
  WL->>C: completeRoot → commitRoot
  C->>B: mutation: commitUpdate → updateProperties → button text "1"
  C->>C: root.current = finishedWork, layout: document.title
  C->>C: flushSpawnedWork: SyncLane → flushPendingEffects → useEffect NOW
  B->>U: microtask ends, task ends → paint "1"

Call stack at a glance

── browser task: native 'click' event ────────────────────────────────────
(root capture listener)  dispatchDiscreteEvent → dispatchEvent → … no onClickCapture handlers
(root bubble listener)   dispatchDiscreteEvent(click, flags, container, nativeEvent)
  setCurrentUpdatePriority(DiscreteEventPriority)            // ReactDOMSharedInternals.p = SyncLane
  dispatchEvent
    findInstanceBlockingEvent → getClosestInstanceFromNode(target)   → button fiber
    dispatchEventForPluginEventSystem → batchedUpdates
      dispatchEventsForPlugins
        extractEvents → SimpleEventPlugin.extractEvents
          accumulateSinglePhaseListeners(buttonFiber, 'onClick') → [{button, arrow}]
        processDispatchQueue → processDispatchQueueItemsInOrder → executeDispatch
          onClick()                                          // your arrow
            setCount(c => c + 1)  = dispatchSetState(AppFiber, queue, action)
              requestUpdateLane → resolveUpdatePriority      → SyncLane
              dispatchSetStateInternal
                eager: basicStateReducer(0, action) = 1;  !Object.is(1, 0)
                enqueueConcurrentHookUpdate                  // concurrentQueues, App.lanes |= SyncLane
                scheduleUpdateOnFiber → markRootUpdated → ensureRootIsScheduled
                  ensureScheduleIsScheduled → scheduleImmediateRootScheduleTask → queueMicrotask
  setCurrentUpdatePriority(previous)
── microtask checkpoint (listener returned) ──────────────────────────────
processRootScheduleInMicrotask
  scheduleTaskForRootDuringMicrotask                         → SyncLane, callbackNode = null
  flushSyncWorkAcrossRoots_impl → performSyncWorkOnRoot
    flushPendingEffects                                      // nothing left from the mount
    performWorkOnRoot(root, SyncLane, forceSync=true) → renderRootSync
      prepareFreshStack → createWorkInProgress(root.current) // reuses HostRoot(A)
                          finishQueueingConcurrentUpdates → markUpdateLaneFromFiberToRoot
      workLoopSync → performUnitOfWork
        beginWork(HostRoot) → attemptEarlyBailoutIfNoScheduledUpdate → bailoutOnAlreadyFinishedWork → cloneChildFibers
        beginWork(App)      → updateFunctionComponent → renderWithHooks(HooksDispatcherOnUpdate)
                               updateState → updateReducer → updateReducerImpl → markWorkInProgressReceivedUpdate
                               updateLayoutEffect / updateEffect → updateEffectImpl (deps changed)
                               reconcileChildFibers → reconcileSingleElement → useFiber(div)
        beginWork(div)      → updateHostComponent → reconcileChildrenArray → updateSlot → updateElement → useFiber ×3
        beginWork(Header)   → props !== → renderWithHooks → Header()      // without compiler
        beginWork(h1), beginWork(button), beginWork(Footer), beginWork(footer)
        completeWork(…)     → updateHostComponent (complete): oldProps !== newProps → markUpdate
      finishConcurrentRender → completeRootWhenReady → completeRoot → commitRoot
        flushMutationEffects → commitMutationEffectsOnFiber
          HostComponent + Update → commitHostUpdate → commitUpdate → updateProperties → setProp
                                                                     → setTextContent(button, "1")
          root.current = finishedWork
        flushLayoutEffects → commitHookLayoutEffects                // document.title = "count: 1"
        flushSpawnedWork → requestPaint(); includesSyncLane → flushPendingEffects
          flushPassiveEffects → flushPassiveEffectsImpl → commitPassiveMountEffects   // console.log
── task ends → style / layout / paint ─────────────────────────────────────

The steps

1. The click reaches the root container

The user clicks the <button>. The browser dispatches a native click that travels capture → target → bubble. React has no listener on the button. In step 2 of the first render, listenToAllSupportedEvents put a capture listener and a bubble listener for click on #root.¹ The capture listener fires first, on the way down. It collects onClickCapture handlers, finds none, and dispatches nothing. The bubble listener fires on the way back up.

→ deep dive: Event System

2. dispatchDiscreteEvent: the priority is set around your handler

Each listener was created by createEventListenerWrapperWithPriority, which picked dispatchDiscreteEvent because getEventPriority('click') is DiscreteEventPriority.²³ dispatchDiscreteEvent saves and nulls ReactSharedInternals.T (a click is never a transition), calls setCurrentUpdatePriority(DiscreteEventPriority), calls dispatchEvent, and restores both values in finally.⁴ This is a dynamic scope: anything that calls setState while it is active sees Discrete priority.

3. dispatchEvent: DOM node → fiber

dispatchEvent calls findInstanceBlockingEvent, which takes the event target and calls getClosestInstanceFromNode.⁵⁶ That reads the __reactFiber$<random> expando that precacheFiberNode wrote in createInstance and returns the button fiber.⁷ There's no dehydrated boundary in the way, so nothing blocks the event, and dispatchEventForPluginEventSystem runs dispatchEventsForPlugins inside batchedUpdates.⁸⁹

4. SimpleEventPlugin collects onClick

SimpleEventPlugin.extractEvents maps click → onClick, picks SyntheticMouseEvent, and calls accumulateSinglePhaseListeners(buttonFiber, 'onClick', …).¹⁰¹¹ That walks fiber.return up to the root. For each host fiber it calls getListener, which reads the prop from the DOM node's __reactProps$ (the latest committed props), not from fiber.memoizedProps.¹²

button (HostComponent)  onClick: arrow#1   ✔ collected
div    (HostComponent)  no onClick
App, HostRoot           not host fibers: skipped
dispatchQueue = [{ event: SyntheticMouseEvent('onClick'), listeners: [{button, arrow#1}] }]

5. Your handler runs

processDispatchQueue → processDispatchQueueItemsInOrder iterates the listeners target → root, and executeDispatch sets event.currentTarget and calls arrow#1(event).¹³¹⁴¹⁵ Your code runs: setCount(c => c + 1).

6. dispatchSetState → requestUpdateLane = SyncLane

setCount is dispatchSetState.bind(null, AppFiber, queue) from mountState.¹⁶ dispatchSetState asks requestUpdateLane(fiber).¹⁷¹⁸ We aren't rendering and T is null, so the answer is eventPriorityToLane(resolveUpdatePriority()). ReactDOMSharedInternals.p is DiscreteEventPriority, which is SyncLane.¹⁹²⁰

→ deep dive: setState, Lanes & Scheduler

7. The eager-state attempt

dispatchSetStateInternal builds {lane: SyncLane, action: c => c + 1, hasEagerState: false, eagerState: null, next: null}.²¹ Then it checks whether it can compute the next state now:

if (fiber.lanes === NoLanes && (alternate === null || alternate.lanes === NoLanes)) {
  const eagerState = queue.lastRenderedReducer(queue.lastRenderedState, action); // basicStateReducer(0, c => c + 1) = 1
  update.hasEagerState = true;
  update.eagerState = eagerState;
  if (is(eagerState, currentState)) { /* enqueue with NoLane, return: no render at all */ }
}

On this first click the App fiber has no pending lanes and no alternate, so the reducer runs. It returns 1, which differs from 0, so there's no bailout. The work isn't wasted, though. hasEagerState lets the render reuse 1 without calling your updater again (step 14).

The precondition matters. The eager result is only valid if no other update is queued ahead of this one. That has two consequences:

• A second setState in the same handler never eager-bails. Once one call has queued an update with a lane, fiber.lanes !== NoLanes and every later call goes straight to the queue. With setCount(c => c + 1); setCount(c => c - 1) the net result is 0, but React can only find that out by rendering App. updateReducerImpl then sees Object.is(0, 0), and updateFunctionComponent takes the late bailout (bailoutHooks).
• On the next click it usually can't run at all. After this update commits, the other twin of the App fiber still has lanes = SyncLane. beginWork clears lanes on the WIP only, and nothing on the commit path clears the old one. Only a late bailout (bailoutHooks does current.lanes = removeLanes(...)) cleans it.²² So "same value ⇒ no render" is a best-effort fast path, never a guarantee.

→ deep dive: setState, Hooks on Update

8. Buffered in concurrentQueues

enqueueConcurrentHookUpdate pushes (AppFiber, queue, update, SyncLane) onto the module-level concurrentQueues array and sets App.lanes |= SyncLane (and on the alternate, if there were one).²³²⁴ It does not touch queue.pending or the ancestors' childLanes. That happens in step 12, in finishQueueingConcurrentUpdates, so that a render already in progress never sees half an event's updates. It returns the FiberRoot by walking .return.²⁵

9. scheduleUpdateOnFiber → one microtask; the handler returns

scheduleUpdateOnFiber → markRootUpdated sets root.pendingLanes = SyncLane, then ensureRootIsScheduled adds the root to the schedule and ensureScheduleIsScheduled queues a microtask, unless one is already queued.^2627282930 setCount returns. Your handler returns. dispatchDiscreteEvent restores the old priority. Nothing has rendered yet, and count in your closure is still 0.

10. Microtask: SyncLane means no Scheduler task

When the listener's call stack empties, the microtask runs processRootScheduleInMicrotask.³¹ scheduleTaskForRootDuringMicrotask finds SyncLane in getNextLanes. Instead of booking a Scheduler task it cancels any existing one, sets root.callbackPriority = SyncLane, callbackNode = null, and returns. The source comment reads "Synchronous work is always flushed at the end of the microtask".³² Then processRootScheduleInMicrotask calls flushSyncWorkAcrossRoots_impl, which calls performSyncWorkOnRoot for every root with sync lanes.³³

Compare the first render: there, the microtask booked a NormalPriority Scheduler task and the render ran in a later macrotask. Here everything that follows happens inside this microtask, before the browser can render a frame.

11. performSyncWorkOnRoot → renderRootSync

performSyncWorkOnRoot first calls flushPendingEffects(). Leftover passive effects from the previous commit must run before a new render. They already ran in the first render's step 22, so there's nothing to do. Then it calls performWorkOnRoot(root, SyncLane, forceSync = true).³⁴ forceSync alone makes shouldTimeSlice false, and SyncLane is blocking anyway, so we get renderRootSync.³⁵³⁶

→ deep dive: Work Loop

12. prepareFreshStack: the update is linked and childLanes set

prepareFreshStack calls createWorkInProgress(root.current, null). This time HostRoot(B) has an alternate, so HostRoot(A) is reused and reset, not allocated.³⁷³⁸ Then finishQueueingConcurrentUpdates drains the buffer. It appends the update into queue.pending as a circular list, and markUpdateLaneFromFiberToRoot walks from App up and ORs SyncLane into every ancestor's childLanes, on both twins.³⁹⁴⁰

root.pendingLanes      = SyncLane
HostRoot.lanes         = 0          HostRoot.childLanes = SyncLane
App.lanes              = SyncLane   App.childLanes      = 0
App hook[0].queue.pending ─► {lane: SyncLane, action: c => c + 1, hasEagerState: true, eagerState: 1} ⟲

13. beginWork(HostRoot): bail out, follow childLanes

HostRoot's memoizedProps === pendingProps (both null), and checkScheduledUpdateOrContext finds no SyncLane in its own lanes. So beginWork takes attemptEarlyBailoutIfNoScheduledUpdate, which pushes the root contexts and calls bailoutOnAlreadyFinishedWork.⁴¹⁴²⁴³ childLanes intersects the render lanes, so instead of returning null it calls cloneChildFibers, which makes a WIP for App with createWorkInProgress(currentApp, currentApp.pendingProps), i.e. the old props object.⁴⁴⁴⁵ App has no alternate yet, so this allocates App's second fiber.

→ deep dive: beginWork & Reconciliation

14. beginWork(App): same props, but it has a lane, so it renders

App's oldProps === newProps holds (step 13 passed the old object). This time checkScheduledUpdateOrContext does find SyncLane in current.lanes, so beginWork sets didReceiveUpdate = false and falls through to updateFunctionComponent.⁴¹⁴⁶ renderWithHooks sees current.memoizedState !== null and installs HooksDispatcherOnUpdate. It nulls the WIP's memoizedState and updateQueue, and calls App().⁴⁷⁴⁸

15. updateReducerImpl produces 1, and didReceiveUpdate flips

useState → updateState → updateReducer → updateReducerImpl.⁴⁹⁵⁰⁵¹ First updateWorkInProgressHook clones hook #0 from the current fiber. The queue object is shared, not copied.⁵² Then:

1. queue.pending is moved into baseQueue (and onto current.baseQueue, so a discarded render can't lose it). pending = null.
2. The single update's lane is in the render lanes, so it's applied. hasEagerState is true, so newState = eagerState = 1. Your updater isn't called again.
3. !is(1, 0) → markWorkInProgressReceivedUpdate() sets didReceiveUpdate = true.⁵³⁵⁴
4. hook.memoizedState = 1, queue.lastRenderedState = 1.

useState returns [1, setCount]. The same setCount, because queue.dispatch never changes.

→ deep dive: Hooks on Update

16. Effects: deps changed, so both get HasEffect

useLayoutEffect and useEffect go through updateEffectImpl. areHookInputsEqual([1], [0]) is false, so each pushes an effect tagged HookHasEffect | … and sets the fiber flag (Update for layout, Passive for passive).⁵⁵ Both effects are pushed onto the fresh updateQueue ring either way. Unchanged ones would just lack HasEffect.

17. App's output is reconciled: a new <div>, fiber reused

App() returns a brand-new tree of element objects. didReceiveUpdate is true, so there's no late bailout. reconcileChildren → reconcileChildFibers (tracking on, since App has a current) → reconcileSingleElement: same key (null), same type ('div'), so it calls useFiber(currentDiv, element.props).⁵⁶⁵⁷⁵⁸ The WIP div's pendingProps is the new props object.

18. beginWork(div): three children, three new props objects

div's oldProps !== newProps, so didReceiveUpdate = true and updateHostComponent runs. Its children are an array, so reconcileChildrenArray runs. In the first pass, updateSlot matches each position by key, and updateElement → useFiber reuses the Header, button and Footer fibers with the new elements' props.⁵⁹⁶⁰⁶¹ No Placement (same order) and no ChildDeletion.

Header  memoizedProps {title:"Counter"}  ≠  pendingProps {title:"Counter"}   ← different objects
button  {onClick: arrow#1, children: 0} ≠  {onClick: arrow#2, children: 1}
Footer  {}                              ≠  {}

19. Without memoization the cascade continues: Header and Footer re-render

beginWork(Header): oldProps !== newProps (identity, not equality), so didReceiveUpdate = true and Header runs. Header has no hooks, so current.memoizedState === null and renderWithHooks actually picks the mount dispatcher. That's harmless.⁴⁷ It returns a new <h1> element, and h1 gets a new props object {children: "Counter"}. The same happens to Footer → footer. button is a host fiber whose child is the number 1: shouldSetTextContent is true, so there's no child fiber, and updateHostComponent returns null.⁶²

This is the default React behaviour: a re-render re-renders the whole subtree below the component that updated. The childLanes bailout only spared the ancestors (step 13). React.memo on Header/Footer would stop the cascade with a shallowEqual, and the compiler stops it with identity (below).

20. completeWork: mark, don't diff

On the way back up, completeWork for each HostComponent with a current and a stateNode calls the complete-phase updateHostComponent. It is just if (oldProps === newProps) return; markUpdate(workInProgress).⁶³⁶⁴ React 19 has no update payload. There's no prepareUpdate and no diffProperties in the render phase. The diff is deferred to the commit. So h1, button, footer and div all get Update, even though only one of them will change. bubbleProperties ORs it all up.⁶⁵

App     flags: Update | Passive   (effects with HasEffect)
div     flags: Update             (children array is a new object)
h1      flags: Update             (new {children:"Counter"})
button  flags: Update             (children 0 → 1, onClick arrow#1 → arrow#2)
footer  flags: Update
HostRoot.subtreeFlags ⊇ Update | Passive

→ deep dive: completeWork

21. Commit, mutation: commitUpdate → updateProperties

finishConcurrentRender → completeRootWhenReady → completeRoot → commitRoot.^66676869 markRootFinished clears SyncLane, and the Normal-priority passive callback is posted as before.⁷⁰ In flushMutationEffects, commitMutationEffectsOnFiber descends where subtreeFlags & MutationMask.⁷¹⁷² For each HostComponent with Update it calls commitHostUpdate → DOM commitUpdate, which runs updateProperties(dom, type, oldProps, newProps) and then updateFiberProps(dom, newProps).⁷³⁷⁴⁷⁵

updateProperties is the real diff: two loops over lastProps/nextProps, calling setProp only where nextProp !== lastProp.⁷⁶⁷⁷

updateFiberProps then points __reactProps$ at the new props, so the next click calls arrow#2.⁸⁰ App's Update flag also runs layout-effect cleanups here. Your layout effect returned nothing, so there's nothing to call.⁷²

22. The swap

root.current = finishedWork (line 4051).⁸⁴ HostRoot(A) is current again. B becomes the buffer for the next render. Every fiber that was cloned in this render now has an alternate.

23. Layout effects

flushLayoutEffects → commitLayoutEffectOnFiber → App has Update → commitHookLayoutEffects runs document.title = "count: 1".⁸⁵⁸⁶⁸⁷ The DOM already shows 1, but nothing has painted.

24. flushSpawnedWork: passive effects run now, before paint

flushSpawnedWork calls requestPaint() and marks the passive phase as pending. Then:⁸⁸⁸⁹

if (includesSyncLane(pendingEffectsLanes) && (disableLegacyMode || root.tag !== LegacyRoot)) {
  flushPendingEffects();
}

The committed lanes include SyncLane, so flushPendingEffects → flushPassiveEffects → flushPassiveEffectsImpl runs all passive cleanups (none here, since the effect returned nothing), then mounts. console.log("committed", 1) runs before the browser paints.⁹⁰⁹¹ The source comment gives the reason: the result of a discrete event should be "immediately observable". Later, flushSyncWorkOnAllRoots() would render any sync setState your effects made, still in this microtask.⁸⁸ The Normal-priority callback that commitRoot posted runs in a later task, finds no pending passive phase, and does nothing.⁹⁰

25. Pixels

The microtask finishes, the event task ends, and the browser runs style, layout and paint. The user sees 1. Everything from the click to the console log ran in one uninterrupted task.

With the React Compiler

Here is the compiled App again, verbatim from babel-plugin-react-compiler@1.0.0 (full output, including Header and Footer, in First Render Walkthrough). The comments are mine:

function App() {
  const $ = _c(13);
  const [count, setCount] = useState(0);
  let t0;
  let t1;
  if ($[0] !== count) {                      // 1 !== 0 → recompute
    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) {                      // recompute
    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")) {   // false now → cache hit
    t4 = <Header title="Counter" />;
    t5 = () => setCount(_temp);
    $[6] = t4; $[7] = t5;
  } else {
    t4 = $[6]; t5 = $[7];                     // SAME element object, SAME handler as the mount
  }
  let t6;
  if ($[8] !== count) {                       // recompute: new <button> element
    t6 = <button onClick={t5}>{count}</button>;
    $[8] = count; $[9] = t6;
  } else {
    t6 = $[9];
  }
  let t7;
  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {  // cache hit
    t7 = <Footer />;
    $[10] = t7;
  } else {
    t7 = $[10];                               // SAME element object
  }
  let t8;
  if ($[11] !== t6) {                          // t6 changed → new <div>
    t8 = <div>{t4}{t6}{t7}</div>;
    $[11] = t6; $[12] = t8;
  } else {
    t8 = $[12];
  }
  return t8;
}
function _temp(c) { return c + 1; }

Re-walking the 25 steps:

• Steps 1–5: unchanged, except handler identity. The onClick stored in __reactProps$ is the cached t5, created once on mount. It is the same function on every render.
• Steps 6–13: unchanged. setCount(_temp) is the same dispatchSetState, the same SyncLane, the same eager computation (_temp(0) = 1), the same buffer, microtask and prepareFreshStack, and the same HostRoot bailout. The compiler doesn't change who is scheduled.
• Step 14: App still re-renders. It owns the lane. The first call is _c(13) → useMemoCache(13). renderWithHooks nulled the WIP's updateQueue, so useMemoCache reads the cache from alternate.updateQueue.memoCache and makes a copy-on-write clone, data.map(array => array.slice()), because enableNoCloningMemoCache is false. It attaches the clone to a fresh updateQueue on the WIP.⁹²⁹³ Writes in this render go to the clone. If the render were thrown away, the committed cache would still match the screen.
• Steps 15–16: unchanged. Same updateReducerImpl result, same didReceiveUpdate. The effect scopes recompute on count, so both effects still get HasEffect. The compiler only avoids spurious effect re-runs, and this one is real.
• Step 17: different element identities. t4 (<Header title="Counter"/>) and t7 (<Footer/>) come from $[6] and $[10]. They are the very objects returned on mount. t6 and t8 are new. The div fiber is reused exactly as before.
• Step 18: the key difference. reconcileChildrenArray → updateElement → useFiber(currentHeader, t4.props). t4.props is the object that became Header.memoizedProps on mount, so the WIP Header gets pendingProps === current.memoizedProps. Same for Footer.⁶¹⁵⁸
• Step 19: bailout instead of cascade. beginWork(Header): oldProps === newProps, checkScheduledUpdateOrContext false, so attemptEarlyBailoutIfNoScheduledUpdate → bailoutOnAlreadyFinishedWork. Header.childLanes is 0, so it returns null.⁴¹⁴³⁴⁴ Header() never runs, and the h1 fiber isn't even cloned: the WIP Header's child still points at the current h1. Footer gets the identical treatment. button is processed as before, because t6 is new.
• Step 20: fewer Update flags. completeWork(Header) hits the didBailout branch of bubbleProperties (child is still the current child) and bubbles only static flags.⁶⁵ h1 and footer aren't visited, so they get no Update. div (new t8 props) and button (new t6 props) are flagged as before.
• Step 21: same DOM write, less diffing. updateProperties runs on div (no-op) and button. On the button, children: 0 → 1 → setTextContent → nodeValue = "1". onClick is now identical (t5), so the loop skips it. The h1 and footer no-op diffs don't happen at all.
• Steps 22–25: unchanged. Same swap, same layout effect, same synchronous passive flush, same paint.

flowchart TD
  R[HostRoot: bailout via childLanes] --> A["App: RENDERS (owns SyncLane)"]
  A --> D["div: new props (t8) → reconcile"]
  D --> H["Header: oldProps === newProps → BAILOUT"]
  D --> BT["button: new props (t6) → Update"]
  D --> F["Footer: oldProps === newProps → BAILOUT"]
  H -.-> H1["h1: not visited"]
  F -.-> FT["footer: not visited"]
  classDef render fill:#f8d7da,stroke:#c0392b,color:#000;
  classDef bail fill:#d4edda,stroke:#27ae60,color:#000;
  classDef skip fill:#eeeeee,stroke:#999,color:#555,stroke-dasharray: 4 3;
  class A,D,BT render
  class R,H,F bail
  class H1,FT skip

Step by step comparison

Counted over the whole update: component functions called 3 → 1, beginWork calls 8 → 6, host fibers diffed at commit 4 → 2, DOM writes that change pixels 1 → 1. In this tiny app that's noise. Under a real Header with a hundred descendants, it's the difference between re-rendering a hundred fibers and touching one. See With vs Without Compiler for the same effect on a larger tree, and React Compiler for how the scopes are derived.

Summary

A click reaches React through the root listener createRoot installed, and dispatchDiscreteEvent sets the priority around your handler, so setCount gets SyncLane. The update is buffered, and once the handler returns a microtask renders and commits it synchronously, with no Scheduler task. The render follows childLanes down to App, re-runs it and, without the compiler, Header and Footer too; the diff happens at commit and the only real write is the button's text. With the compiler, cached elements make Header and Footer bail out, and the DOM writes stay identical.

Key takeaways

• Root listener to fiber: the bubble listener maps the target to the button fiber via __reactFiber$ and collects onClick from the latest committed __reactProps$ (Event System).
• SyncLane from the event: requestUpdateLane reads DiscreteEventPriority, which is SyncLane (setState).
• Eager state: the reducer runs early only when no lanes are pending, so "same value means no render" is best-effort, not a guarantee.
• Buffered, then linked: enqueueConcurrentHookUpdate parks the update; finishQueueingConcurrentUpdates links it and sets childLanes on every ancestor in prepareFreshStack.
• No Scheduler task: for SyncLane, flushSyncWorkAcrossRoots_impl renders inside the microtask.
• Bail to App, then render: the HostRoot bails out and clones its child; App has the lane, so updateReducerImpl reuses the eager 1 and flips didReceiveUpdate (Hooks on Update).
• The uncompiled cascade: new element objects mean new props objects, so Header and Footer re-render on identity alone (beginWork).
• Mark, don't diff: completeWork only calls markUpdate; commitUpdate → updateProperties does the real diff and writes only the button's text.
• Effects before paint: layout effects run after the swap, and because the commit includes SyncLane, flushSpawnedWork flushes passive effects before the browser paints.
• With the compiler: App still renders, but cached <Header/> and <Footer/> make oldProps === newProps true, so their subtrees are skipped (With vs Without Compiler).

← Prev · Index · Next →