How React Works, Start to Finish

One small, real app followed from the code you write to the pixels on screen: what Babel turns your JSX into, when the element objects {} are created, what runs first when the page opens, how React decides which component to call, and what happens on a click, a context change, a list edit and a page switch. Each step has a plain-English story and an Under the hood block with the real React 19.2.5 functions and objects. Nothing here is hand-written guesswork: the compiled code, the element objects, the fiber trees and every call order were recorded by running the demo app (see “How this was recorded” at the end).

The whole journey in one picture

1. Compile time. Babel (or Vite’s Oxc) rewrites every <Tag /> into a function call: jsx(Tag, props). Your source no longer contains JSX.
2. Page load. The browser runs main.jsx. createRoot sets React up, <App /> becomes an object, and root.render() schedules a render. No component has run yet.
3. Render phase. React walks a tree of fibers. When it reaches a component fiber it calls your function, which runs its jsx() calls and returns new element objects. React compares them with what was there before and records what must change.
4. Commit phase. React applies the recorded changes to the DOM in one synchronous pass, runs layout effects, and lets the browser paint. useEffect runs after.
5. Updates. setState queues an update and schedules another render that starts from the root but only calls the components that need it.

The rest of this note is each of those steps, in order, on a real app.

0. The app

Two pages switched with state (no router), a context, a component that receives children, effects with cleanups, and a keyed list. React and ReactDOM are pinned to 19.2.5. There is no <StrictMode>, so every component runs once per render and the traces stay readable.

main.jsx, the entry point:

import { createRoot } from 'react-dom/client'
import { App } from './App.jsx'
import './styles.css'

const container = document.getElementById('root')
const root = createRoot(container)
root.render(<App />)

App.jsx owns the two pieces of top-level state: which page is shown, and the theme.

import { useState } from "react";
import { ThemeContext } from "./ThemeContext.js";
import { Layout } from "./Layout.jsx";
import { Nav } from "./Nav.jsx";
import { CounterPage } from "./CounterPage.jsx";
import { TodosPage } from "./TodosPage.jsx";
import { log } from "./trace.js";

export function App() {
  log("render App");
  const [page, setPage] = useState("counter");
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext value={theme}>
      <Layout>
        <Nav page={page} onNavigate={setPage} />
        <button
          className="theme"
          onClick={() => setTheme(theme === "light" ? "dark" : "light")}
        >
          Theme: {theme}
        </button>
        {page === "counter" ? <CounterPage /> : <TodosPage />}
      </Layout>
    </ThemeContext>
  );
}

Layout.jsx reads the theme from context and renders whatever it gets as children:

import { useContext } from 'react'
import { ThemeContext } from './ThemeContext.js'
import { log } from './trace.js'

export function Layout({ children }) {
	log('render Layout')
	const theme = useContext(ThemeContext)
	return (
		<div className={`layout ${theme}`}>
			<h1>How React Works</h1>
			<main>{children}</main>
		</div>
	)
}

Nav.jsx gets the current page and a callback through props:

import { log } from './trace.js'

export function Nav({ page, onNavigate }) {
	log('render Nav', page)
	return (
		<nav>
			<button aria-current={page === 'counter'} onClick={() => onNavigate('counter')}>
				Counter
			</button>
			<button aria-current={page === 'todos'} onClick={() => onNavigate('todos')}>
				Todos
			</button>
		</nav>
	)
}

CounterPage.jsx has state, a ref, a layout effect, an effect with a cleanup, and a child component:

import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import { log } from './trace.js'

export function CounterPage() {
	log('render CounterPage')
	const [count, setCount] = useState(0)
	const buttonRef = useRef(null)

	useLayoutEffect(() => {
		log('layout effect: button is', buttonRef.current.offsetWidth, 'px wide')
	}, [count])

	useEffect(() => {
		log('effect: set title', count)
		document.title = `Clicked ${count} times`
		return () => log('cleanup: title effect', count)
	}, [count])

	return (
		<section>
			<h2>Counter</h2>
			<Display value={count} />
			<button ref={buttonRef} onClick={() => setCount(count + 1)}>
				Add one
			</button>
		</section>
	)
}

function Display({ value }) {
	log('render Display', value)
	return <p className="display">Count: {value}</p>
}

TodosPage.jsx has a controlled input and a keyed list, and subscribes to resize in an effect:

import { useContext, useEffect, useState } from 'react'
import { ThemeContext } from './ThemeContext.js'
import { log } from './trace.js'

let nextId = 3

export function TodosPage() {
	log('render TodosPage')
	const [todos, setTodos] = useState([
		{ id: 1, text: 'Learn JSX' },
		{ id: 2, text: 'Read about fibers' },
	])
	const [text, setText] = useState('')

	useEffect(() => {
		log('effect: subscribe to resize')
		const onResize = () => log('window resized')
		window.addEventListener('resize', onResize)
		return () => {
			log('cleanup: unsubscribe from resize')
			window.removeEventListener('resize', onResize)
		}
	}, [])

	function addTodo(event) {
		event.preventDefault()
		if (!text.trim()) return
		setTodos([...todos, { id: nextId++, text }])
		setText('')
	}

	return (
		<section>
			<h2>Todos</h2>
			<form onSubmit={addTodo}>
				<input value={text} onChange={(e) => setText(e.target.value)} placeholder="New todo" />
				<button>Add</button>
			</form>
			<ul>
				{todos.map((todo) => (
					<TodoItem
						key={todo.id}
						todo={todo}
						onRemove={() => setTodos(todos.filter((t) => t.id !== todo.id))}
					/>
				))}
			</ul>
		</section>
	)
}

function TodoItem({ todo, onRemove }) {
	log('render TodoItem', todo.id)
	const theme = useContext(ThemeContext)
	return (
		<li className={theme}>
			{todo.text} <button onClick={onRemove}>×</button>
		</li>
	)
}

ThemeContext.js and the log helper:

import { createContext } from 'react'

export const ThemeContext = createContext('light')
ThemeContext.displayName = 'ThemeContext'

// Open the app with ?trace to log every component call, effect and cleanup
// in the browser console, in the order React runs them.
const enabled = new URLSearchParams(location.search).has('trace')

export function log(...args) {
	if (!enabled) return
	console.log('%c[app]', 'color:#d9539f;font-weight:bold', ...args)
	// scripts/trace.mjs collects these alongside React's own calls
	globalThis.__TRACE__?.push(['app', args.join(' '), globalThis.__depth?.('log') ?? 0])
}

To follow along, run the demo (examples/how-react-works in the site’s repository: npm install && npm run dev) and open http://localhost:5199/?trace. Every component call, effect and cleanup is logged to the console in the order React runs them.

1. Compile time: JSX becomes function calls

Browsers don’t understand JSX. Before your code ever reaches the browser, a compiler rewrites each JSX tag into a function call that returns a plain object. This happens once, at build time. At run time there is no JSX left.

This is App after Babel’s React preset with the automatic runtime (@babel/preset-react with runtime: 'automatic', the default since React 17):

export function App() {
  log("render App");
  const [page, setPage] = useState("counter");
  const [theme, setTheme] = useState("light");
  return /*#__PURE__*/_jsx(ThemeContext, {
    value: theme,
    children: /*#__PURE__*/_jsxs(Layout, {
      children: [/*#__PURE__*/_jsx(Nav, {
        page: page,
        onNavigate: setPage
      }), /*#__PURE__*/_jsxs("button", {
        className: "theme",
        onClick: () => setTheme(theme === "light" ? "dark" : "light"),
        children: ["Theme: ", theme]
      }), page === "counter" ? /*#__PURE__*/_jsx(CounterPage, {}) : /*#__PURE__*/_jsx(TodosPage, {})]
    })
  });
}

And the import Babel added at the top of the file, which you never wrote:

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

What changed, tag by tag:

• <Nav page={page} onNavigate={setPage} /> → _jsx(Nav, { page, onNavigate }). The first argument is the type: the Nav function itself, not a string and not a call.
• <button className="theme" …>Theme: {theme}</button> → _jsxs("button", { …, children: ["Theme: ", theme] }). A lowercase tag becomes a string type. Children are no longer separate arguments: they move into props.children.
• jsx vs jsxs: jsxs is used when the children are a static array written in the JSX (several children side by side). One child, or none → jsx.
• key is pulled out of props and passed as the third argument. In TodosPage:

export function TodosPage() {
  log('render TodosPage');
  const [todos, setTodos] = useState([{
    id: 1,
    text: 'Learn JSX'
  }, {
    id: 2,
    text: 'Read about fibers'
  }]);
  const [text, setText] = useState('');
  useEffect(() => {
    log('effect: subscribe to resize');
    const onResize = () => log('window resized');
    window.addEventListener('resize', onResize);
    return () => {
      log('cleanup: unsubscribe from resize');
      window.removeEventListener('resize', onResize);
    };
  }, []);
  function addTodo(event) {
    event.preventDefault();
    if (!text.trim()) return;
    setTodos([...todos, {
      id: nextId++,
      text
    }]);
    setText('');
  }
  return /*#__PURE__*/_jsxs("section", {
    children: [/*#__PURE__*/_jsx("h2", {
      children: "Todos"
    }), /*#__PURE__*/_jsxs("form", {
      onSubmit: addTodo,
      children: [/*#__PURE__*/_jsx("input", {
        value: text,
        onChange: e => setText(e.target.value),
        placeholder: "New todo"
      }), /*#__PURE__*/_jsx("button", {
        children: "Add"
      })]
    }), /*#__PURE__*/_jsx("ul", {
      children: todos.map(todo => /*#__PURE__*/_jsx(TodoItem, {
        todo: todo,
        onRemove: () => setTodos(todos.filter(t => t.id !== todo.id))
      }, todo.id))
    })]
  });
}

Notice _jsx("ul", { children: todos.map(...) }): the children are an array, but it’s jsx, not jsxs, because the array is created at run time by map. The compiler can’t know its length, so React has to check that each item has a key (the “Each child in a list should have a unique key” warning comes from here).

The /*#__PURE__*/ comments tell minifiers the call has no side effects, so an unused element can be dropped.

The classic runtime: React.createElement

Before React 17, the same JSX compiled to React.createElement. Babel still supports it with runtime: 'classic':

export function App() {
  log("render App");
  const [page, setPage] = useState("counter");
  const [theme, setTheme] = useState("light");
  return /*#__PURE__*/React.createElement(ThemeContext, {
    value: theme
  }, /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Nav, {
    page: page,
    onNavigate: setPage
  }), /*#__PURE__*/React.createElement("button", {
    className: "theme",
    onClick: () => setTheme(theme === "light" ? "dark" : "light")
  }, "Theme: ", theme), page === "counter" ? /*#__PURE__*/React.createElement(CounterPage, null) : /*#__PURE__*/React.createElement(TodosPage, null)));
}

The differences:

Both produce the same kind of object. The automatic runtime just makes the call cheaper and removes the React import requirement.

function jsxProd(type, config, maybeKey) {
  var key = null;
  void 0 !== maybeKey && (key = "" + maybeKey);
  void 0 !== config.key && (key = "" + config.key);
  if ("key" in config) {
    maybeKey = {};
    for (var propName in config)
      "key" !== propName && (maybeKey[propName] = config[propName]);
  } else maybeKey = config;
  config = maybeKey.ref;
  return {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
    key: key,
    ref: void 0 !== config ? config : null,
    props: maybeKey
  };
}
exports.jsx = jsxProd;
exports.jsxs = jsxProd;

exports.createElement = function (type, config, children) {
  var propName, props = {}, key = null;
  if (null != config)
    for (propName in (void 0 !== config.key && (key = "" + config.key), config))
      hasOwnProperty.call(config, propName) && "key" !== propName &&
        "__self" !== propName && "__source" !== propName &&
        (props[propName] = config[propName]);
  var childrenLength = arguments.length - 2;
  if (1 === childrenLength) props.children = children;
  else if (1 < childrenLength) {
    for (var childArray = Array(childrenLength), i = 0; i < childrenLength; i++)
      childArray[i] = arguments[i + 2];
    props.children = childArray;
  }
  if (type && type.defaultProps) /* … copy defaultProps … */
  return ReactElement(type, key, props);
};

What your browser actually receives in development

npm run dev doesn’t use Babel. Vite 8 compiles JSX with Oxc, and in development it uses the jsxDEV variant, which also records where each element came from (file, line, column) for warnings and React DevTools. This is the App function exactly as Vite’s dev server sends it:

export function App() {
	_s();
	log("render App");
	const [page, setPage] = useState("counter");
	const [theme, setTheme] = useState("light");
	return /* @__PURE__ */ _jsxDEV(ThemeContext, {
		value: theme,
		children: /* @__PURE__ */ _jsxDEV(Layout, { children: [
			/* @__PURE__ */ _jsxDEV(Nav, {
				page,
				onNavigate: setPage
			}, void 0, false, {
				fileName: _jsxFileName,
				lineNumber: 17,
				columnNumber: 9
			}, this),
			/* @__PURE__ */ _jsxDEV("button", {
				className: "theme",
				onClick: () => setTheme(theme === "light" ? "dark" : "light"),
				children: ["Theme: ", theme]
			}, void 0, true, {
				fileName: _jsxFileName,
				lineNumber: 18,
				columnNumber: 9
			}, this),
			page === "counter" ? /* @__PURE__ */ _jsxDEV(CounterPage, {}, void 0, false, {
				fileName: _jsxFileName,
				lineNumber: 24,
				columnNumber: 31
			}, this) : /* @__PURE__ */ _jsxDEV(TodosPage, {}, void 0, false, {
				fileName: _jsxFileName,
				lineNumber: 24,
				columnNumber: 49
			}, this)
		] }, void 0, true, {
			fileName: _jsxFileName,
			lineNumber: 16,
			columnNumber: 7
		}, this)
	}, void 0, false, {
		fileName: _jsxFileName,
		lineNumber: 15,
		columnNumber: 5
	}, this);
}

The extra _s(), $RefreshSig$ and $RefreshReg$ lines are Fast Refresh bookkeeping (hot reloading that keeps state). Babel produces the same jsxDEV calls with development: true. vite build produces the production jsx/jsxs form shown above.

2. The element object {}

So <Display value={count} /> is just a call that returns an object. Here is a real element, produced by React’s production runtime for <p className="display">Count: {0}</p>:

{
  $$typeof: "Symbol(react.transitional.element)",
  type: "p",
  key: null,
  ref: null,
  props: {
    className: "display",
    children: [
      "Count: ",
      0
    ]
  }
}

And for <App />:

{
  $$typeof: "Symbol(react.transitional.element)",
  type: "[Function App]",
  key: null,
  ref: null,
  props: {}
}

• $$typeof marks the object as a React element. It’s a Symbol, and JSON can’t contain symbols, so a server response or user input can never be mistaken for an element (an XSS defence).
• type is either a string ("p": a DOM tag) or the component itself (App: a function). This one field is what React later uses to decide what to do.
• key is null or a string. jsx('li', {...}, 1) gives key: "1".
• props holds everything else, including children.

Elements are cheap, immutable descriptions. In development React freezes them (Object.freeze(element.props) and Object.freeze(element)). A new element object is created every time the JSX runs, which happens every time the component renders. They are never updated; they are thrown away.

{
  $$typeof: "Symbol(react.transitional.element)",
  type: "p",
  key: null,
  props: {
    className: "display",
    children: [
      "Count: ",
      0
    ]
  },
  _owner: null,
  ref: null,
  _store: "{…}",
  _debugInfo: null,
  _debugStack: "{…}",
  _debugTask: "{…}"
}

When exactly are elements created? Only when the code containing the jsx() call runs:

• <App /> in main.jsx is created once, when the module runs.
• Everything inside App’s return is created each time React calls App.
• children are created by the parent that wrote them. <Layout>’s children (Nav, the theme button, the page) are created by App, not by Layout.

3. The page opens

The browser loads index.html, which contains <script type="module" src="/src/main.jsx">. Module scripts run after the HTML is parsed. Here is everything that happens, in the order it happened in the recorded trace:

1. Imports run first. react-dom/client, react and the Scheduler evaluate their top-level code, which mostly defines functions. Then your modules run, which defines App, Layout, … but calls none of them.
2. createRoot(container) creates the FiberRoot (React’s bookkeeping for this root) and the very first fiber, HostRoot. It stores a pointer to that fiber on the #root DOM node.
3. listenToAllSupportedEvents(#root) attaches one listener per event type to #root, for both the capture and bubble phases. Your onClick={...} will never become a real addEventListener on a button.
4. <App /> is evaluated before render is called (JavaScript evaluates arguments first): jsxDEV(App, {}) returns { type: App, props: {} }.
5. root.render(element) asks for a lane: no event is in progress, so it’s DefaultLane (32). It creates an update with payload { element }, queues it on the HostRoot fiber, and calls scheduleUpdateOnFiber.
6. render() returns. It doesn’t render anything. ensureRootIsScheduled queued a microtask, and main.jsx finishes with #root still empty.
7. The microtask (processRootScheduleInMicrotask) sees a Default lane. That isn’t Sync, so it asks the Scheduler for a task.
8. The Scheduler task (performWorkOnRootViaSchedulerTask) runs performWorkOnRoot(root, 32) → renderRootSync. The render begins.

▾createRoot  container #rootcreateFiberRootlistenToAllSupportedEventsjsxDEV  App▾root.render  <App>requestUpdateLane  HostRoot▾updateContainerImpl  lane 32▾scheduleUpdateOnFiber  HostRoot lane 32▾ensureRootIsScheduledscheduleImmediateRootScheduleTaskprocessRootScheduleInMicrotask▾performWorkOnRootViaSchedulerTask▾performWorkOnRoot  lanes 32▾renderRootSyncprepareFreshStack

exports.createRoot = function(container, options) {
  if (!isValidContainer(container)) throw Error("Target container is not a DOM element.");
  // … read options …
  options = createFiberRoot(container, 1 /* ConcurrentRoot */, false, null, null, isStrictMode, …);
  container[internalContainerInstanceKey] = options.current;   // #root → HostRoot fiber
  listenToAllSupportedEvents(container);
  return new ReactDOMRoot(options);
};

ReactDOMRoot.prototype.render = function(children) {
  var root = this._internalRoot;
  var current = root.current;
  updateContainerImpl(current, requestUpdateLane(current), children, root, null, null);
};

function updateContainerImpl(rootFiber, lane, element, container, parentComponent, callback) {
  // …
  container = createUpdate(lane);
  container.payload = { element };
  element = enqueueUpdate(rootFiber, container, lane);
  null !== element && (scheduleUpdateOnFiber(element, rootFiber, lane), entangleTransitions(element, rootFiber, lane));
}

4. The first render: how React decides what to call

React now walks the tree one fiber at a time: down with beginWork, across to siblings, up with completeWork (The Work Loop). There’s no fiber tree yet, so each step creates the fibers for the children it finds.

The question “how does React know whether to call something?” has a short answer: the element’s type. When React creates a fiber from an element it picks a tag:

So a component is called when the work loop reaches its fiber, and only then. The order is depth-first: a component is called before its children, and a child is called before the parent’s next sibling.

In order, the first render called: App → Layout → Nav → CounterPage → Display. ThemeContext and every DOM tag were never “called”; they’re not functions.

Each component creates its own output only when it’s called. App’s jsx() calls run inside renderWithHooks(App). Nav’s run later, inside renderWithHooks(Nav). That’s why in the trace the jsxDEV lines appear right after each [app] render … line.

function createFiberFromTypeAndProps(type, key, pendingProps, owner, mode, lanes) {
  var fiberTag = 0 /* FunctionComponent */, resolvedType = type;
  if ("function" === typeof type) shouldConstruct(type) && (fiberTag = 1 /* ClassComponent */);
  else if ("string" === typeof type) fiberTag = /* hoistable / singleton checks */ … 5 /* HostComponent */;
  else switch (type) {
    case REACT_FRAGMENT_TYPE: return createFiberFromFragment(pendingProps.children, mode, lanes, key);
    case REACT_SUSPENSE_TYPE: /* … tag 13 … */
    default:
      if ("object" === typeof type && null !== type) switch (type.$$typeof) {
        case REACT_CONTEXT_TYPE:     fiberTag = 10; break; // <ThemeContext value>
        case REACT_CONSUMER_TYPE:    fiberTag = 9;  break;
        case REACT_FORWARD_REF_TYPE: fiberTag = 11; break;
        case REACT_MEMO_TYPE:        fiberTag = 14; break;
        // …
      }
  }
  // … createFiber(fiberTag, pendingProps, key, mode), set type …
}

switch (workInProgress.tag) {
  case 0: return updateFunctionComponent(current, workInProgress, workInProgress.type, workInProgress.pendingProps, renderLanes);
  case 5: /* HostComponent: reconcile props.children (inlined in the build) */ …
  // case 10: pushProvider(workInProgress, context, value); reconcileChildren(…)
  // …
}

function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes) {
  renderLanes = nextRenderLanes;
  currentlyRenderingFiber = workInProgress;
  workInProgress.memoizedState = null;
  workInProgress.updateQueue = null;
  workInProgress.lanes = 0;
  ReactSharedInternals.H = null !== current && null !== current.memoizedState
    ? HooksDispatcherOnUpdateInDEV
    : HooksDispatcherOnMountInDEV;          // ← useState means "mountState" on the first render
  var children = callComponentInDEV(Component, props, secondArg);   // ← App(props)
  // …
  return children;                          // the element objects App returned
}

▾beginWork  HostRoot▾reconcileChildFibersImpl  HostRoot ← <App>createFiberFromTypeAndProps  App▾beginWork  App▾renderWithHooks  App (mount)▾[app] render AppmountState  "counter"mountState  "light"jsxDEV  NavjsxDEV  buttonjsxDEV  CounterPagejsxDEV  LayoutjsxDEV  ThemeContext▾reconcileChildFibersImpl  App ← <ThemeContext>createFiberFromTypeAndProps  ThemeContextbeginWork  ThemeContext

▾beginWork  Layout▾renderWithHooks  Layout (mount)▾[app] render LayoutjsxDEV  h1jsxDEV  mainjsxDEV  div▾reconcileChildFibersImpl  Layout ← <div>createFiberFromTypeAndProps  div▾beginWork  div▾reconcileChildFibersImpl  div ← array[2]▾reconcileChildrenArray  div ← [2 children]createFiberFromTypeAndProps  h1placeChild  h1 (new) lastPlacedIndex 0createFiberFromTypeAndProps  mainplaceChild  main (new) lastPlacedIndex 0beginWork  h1completeWork  h1▾beginWork  main▾reconcileChildFibersImpl  main ← array[3]reconcileChildrenArray  main ← [3 children]

HostRoot  (tag 3)
  App  (tag 0)  hooks: ["counter", "light"]
    ThemeContext  (tag 10)
      Layout  (tag 0)  hooks: []
        div  (tag 5)  → <div>
          h1  (tag 5)  → <h1>
          main  (tag 5)  → <main>
            Nav  (tag 0)  hooks: []
              nav  (tag 5)  → <nav>
                button  (tag 5)  → <button>
                button  (tag 5)  → <button>
            button  (tag 5)  → <button>
              text "Theme: "  (tag 6)  → <#text>
              text "light"  (tag 6)  → <#text>
            CounterPage  (tag 0)  hooks: [0, ref, effect, effect]
              section  (tag 5)  → <section>
                h2  (tag 5)  → <h2>
                Display  (tag 0)  hooks: []
                  p  (tag 5)  → <p>
                    text "Count: "  (tag 6)  → <#text>
                    text "0"  (tag 6)  → <#text>
                button  (tag 5)  → <button>

5. Commit and the first paint

During the render, every completeWork on a host fiber created its DOM node and appended its children’s DOM nodes to it. By the time the render reaches the root, the whole UI exists as one detached <div>. The document hasn’t been touched.

Then the commit runs in one synchronous pass (Commit Phase and Effects):

1. Mutation. The App fiber carries the Placement flag. It isn’t a DOM node, so React descends (App → ThemeContext → Layout) until it finds one, and does one appendChild(<div>) into #root.
2. Swap. root.current = finishedWork: the new tree is now the current one.
3. Layout effects. useLayoutEffect runs. The DOM exists and can be measured, but nothing has been painted.
4. Paint. The Scheduler task ends; the browser paints.
5. Passive effects. Because this render used the Default lane, useEffect runs in a later task, after the paint.

▾commitRootcommitBeforeMutationEffects▾flushMutationEffects▾commitPlacement  App▾insertOrAppendPlacementNodeIntoContainer  App is not a DOM node → descend to its child▾insertOrAppendPlacementNodeIntoContainer  ThemeContext is not a DOM node → descend to its child▾insertOrAppendPlacementNodeIntoContainer  Layout is not a DOM node → descend to its childinsertOrAppendPlacementNodeIntoContainer  appendChild(<div>) into #root▾flushLayoutEffects▾commitHookEffectListMount  CounterPage HasEffect|Layout[app] layout effect: button is 88 px wide▾ensureRootIsScheduledscheduleImmediateRootScheduleTaskensureRootIsScheduledprocessRootScheduleInMicrotask▾flushPassiveEffects▾commitHookEffectListMount  CounterPage HasEffect|Passive[app] effect: set title 0

6. A click: state update and re-render

The user clicks “Add one”. Here is everything that happens:

1. The event. The browser dispatches click. React’s listener on #root runs (dispatchDiscreteEvent, once for the capture phase and once for bubble), finds the fiber of the clicked button, collects the onClick props on the path, and calls yours inside a SyntheticEvent.
2. setCount(1) calls dispatchSetState(CounterPage fiber, queue, 1). A click is a discrete event → SyncLane (2). The update is queued on the hook and a microtask is scheduled. Your handler returns. Nothing has re-rendered yet.
3. Render, starting from the root. React marks the path: CounterPage.lanes, and childLanes on every ancestor. Then the work loop starts at HostRoot again. Ancestors with only childLanes bail out: their functions are not called. Siblings with no work (h1, Nav, the theme button) are skipped with their entire subtree.
4. CounterPage is called because it has the update. useState now returns 1. Its jsx() calls create brand-new element objects, the same way as on the first render.
5. Reconciliation. The new elements are compared with the existing fibers: same types at the same positions, so the fibers are reused (useFiber) with new props. Display is called (its props object is new), and its text child changes from "0" to "1".
6. Commit. One DOM write: the text node becomes "1". The layout effect reruns (its deps changed). Because this was a SyncLane render, useEffect is flushed at the end of the commit: first the old effect’s cleanup (with count 0), then the new effect.
7. Paint. The microtask ends and the browser paints “Count: 1”.

Elements vs fibers on this click: every element under CounterPage was recreated (they always are), but no fiber was created. Every fiber was the old one, updated in place through its alternate (React Fiber).

dispatchDiscreteEvent  click (capture listener)▾dispatchDiscreteEvent  click (bubble listener)▾dispatchSetState  CounterPage ← 1requestUpdateLane  CounterPage▾scheduleUpdateOnFiber  CounterPage lane 2▾ensureRootIsScheduledscheduleImmediateRootScheduleTask▾processRootScheduleInMicrotask▾performSyncWorkOnRoot▾performWorkOnRoot  lanes 2▾renderRootSync▾prepareFreshStackmarkUpdateLaneFromFiberToRoot  CounterPage▾beginWork  HostRootbailoutOnAlreadyFinishedWork  HostRoot → children have work▾beginWork  AppbailoutOnAlreadyFinishedWork  App → children have work▾beginWork  ThemeContextbailoutOnAlreadyFinishedWork  ThemeContext → children have work▾beginWork  LayoutbailoutOnAlreadyFinishedWork  Layout → children have work▾beginWork  divbailoutOnAlreadyFinishedWork  div → children have work▾beginWork  h1bailoutOnAlreadyFinishedWork  h1 → skip subtreecompleteWork  h1▾beginWork  mainbailoutOnAlreadyFinishedWork  main → children have work▾beginWork  NavbailoutOnAlreadyFinishedWork  Nav → skip subtreecompleteWork  Nav▾beginWork  buttonbailoutOnAlreadyFinishedWork  button → skip subtreecompleteWork  button▾beginWork  CounterPage▾renderWithHooks  CounterPage (update)▾[app] render CounterPageupdateReducerjsxDEV  h2jsxDEV  DisplayjsxDEV  buttonjsxDEV  section▾reconcileChildFibersImpl  CounterPage ← <section>useFiber  section▾beginWork  section▾reconcileChildFibersImpl  section ← array[3]▾reconcileChildrenArray  section ← [3 children]useFiber  h2placeChild  h2 oldIndex 0 lastPlacedIndex 0useFiber  DisplayplaceChild  Display oldIndex 1 lastPlacedIndex 0useFiber  buttonplaceChild  button oldIndex 2 lastPlacedIndex 1beginWork  h2completeWork  h2▾beginWork  Display▾renderWithHooks  Display (update)▾[app] render Display 1jsxDEV  p▾reconcileChildFibersImpl  Display ← <p>useFiber  p▾beginWork  p▾reconcileChildFibersImpl  p ← array[2]▾reconcileChildrenArray  p ← [2 children]useFiber  text "Count: "placeChild  text "Count: " oldIndex 0 lastPlacedIndex 0useFiber  text "0"placeChild  text "1" oldIndex 1 lastPlacedIndex 0▾beginWork  text "Count: "bailoutOnAlreadyFinishedWork  text "Count: " → skip subtreecompleteWork  text "Count: "beginWork  text "1"completeWork  text "1"completeWork  pcompleteWork  DisplaybeginWork  buttoncompleteWork  buttoncompleteWork  sectioncompleteWork  CounterPagecompleteWork  maincompleteWork  divcompleteWork  LayoutcompleteWork  ThemeContextcompleteWork  AppcompleteWork  HostRoot▾commitRootcommitBeforeMutationEffects▾flushMutationEffectscommitUpdate  h2commitTextUpdate  "0" → "1"commitUpdate  pcommitUpdate  buttoncommitUpdate  section▾flushLayoutEffects▾commitHookEffectListMount  CounterPage HasEffect|Layout[app] layout effect: button is 88 px wide▾flushPassiveEffects▾commitHookEffectListUnmount  CounterPage HasEffect|Passive[app] cleanup: title effect 0▾commitHookEffectListMount  CounterPage HasEffect|Passive[app] effect: set title 1

7. A context change

The theme button calls setTheme('dark'). The state lives in App, so this time App re-renders. Because App creates new elements for everything below it, every component under it re-renders too: Layout, Nav, CounterPage, Display. None of them is wrapped in memo, and each receives a new props object.

Context propagation only becomes visible when something would bail out: React then searches the subtree for fibers that read the changed context (propagateContextChanges) and schedules them, even through a memo boundary. In this app both Layout and every TodoItem read ThemeContext, so after a theme change they’d re-render even if their parents were memoized.

▾dispatchSetState  App ← "dark"requestUpdateLane  App▾scheduleUpdateOnFiber  App lane 2▾ensureRootIsScheduledscheduleImmediateRootScheduleTask▾processRootScheduleInMicrotask▾performSyncWorkOnRoot▾performWorkOnRoot  lanes 2▾renderRootSync▾prepareFreshStackmarkUpdateLaneFromFiberToRoot  App▾beginWork  HostRootbailoutOnAlreadyFinishedWork  HostRoot → children have work▾beginWork  App▾renderWithHooks  App (update)▾[app] render AppupdateReducerupdateReducerjsxDEV  NavjsxDEV  buttonjsxDEV  CounterPagejsxDEV  LayoutjsxDEV  ThemeContext▾reconcileChildFibersImpl  App ← <ThemeContext>useFiber  ThemeContext▾beginWork  ThemeContext▾reconcileChildFibersImpl  ThemeContext ← <Layout>useFiber  Layout▾beginWork  Layout▾renderWithHooks  Layout (update)[app] render Layout

▾commitRootcommitBeforeMutationEffects▾flushMutationEffectscommitUpdate  h1commitUpdate  buttoncommitUpdate  buttoncommitUpdate  navcommitTextUpdate  "light" → "dark"commitUpdate  buttoncommitUpdate  h2commitUpdate  pcommitUpdate  buttoncommitUpdate  sectioncommitUpdate  maincommitUpdate  divflushLayoutEffectsflushPassiveEffects

8. The list: keys at work

On the Todos page, todos.map(todo => <TodoItem key={todo.id} … />) produces an array of elements, and each one carries a key (compiled to the third argument of jsx). React matches old and new children by key (Child Reconciliation Algorithm).

Typing in the input. Every keystroke calls setText, re-renders TodosPage, and with it both TodoItems, because they get new props objects (a new onRemove function every render). The DOM writes are tiny, but the components run:

dispatchDiscreteEvent  input (capture listener)▾dispatchDiscreteEvent  input (bubble listener)▾dispatchSetState  TodosPage ← "x"requestUpdateLane  TodosPage▾scheduleUpdateOnFiber  TodosPage lane 2▾ensureRootIsScheduledscheduleImmediateRootScheduleTask▾performSyncWorkOnRoot▾performWorkOnRoot  lanes 2▾renderRootSync▾prepareFreshStackmarkUpdateLaneFromFiberToRoot  TodosPage▾beginWork  HostRootbailoutOnAlreadyFinishedWork  HostRoot → children have work▾beginWork  AppbailoutOnAlreadyFinishedWork  App → children have work▾beginWork  ThemeContextbailoutOnAlreadyFinishedWork  ThemeContext → children have work▾beginWork  LayoutbailoutOnAlreadyFinishedWork  Layout → children have work▾beginWork  divbailoutOnAlreadyFinishedWork  div → children have work▾beginWork  h1bailoutOnAlreadyFinishedWork  h1 → skip subtreecompleteWork  h1▾beginWork  mainbailoutOnAlreadyFinishedWork  main → children have work▾beginWork  NavbailoutOnAlreadyFinishedWork  Nav → skip subtreecompleteWork  Nav▾beginWork  buttonbailoutOnAlreadyFinishedWork  button → skip subtreecompleteWork  button▾beginWork  TodosPage▾renderWithHooks  TodosPage (update)▾[app] render TodosPageupdateReducerupdateReducerjsxDEV  h2jsxDEV  inputjsxDEV  buttonjsxDEV  formjsxDEV  TodoItem key=1jsxDEV  TodoItem key=2jsxDEV  uljsxDEV  section▾reconcileChildFibersImpl  TodosPage ← <section>useFiber  section▾beginWork  section▾reconcileChildFibersImpl  section ← array[3]▾reconcileChildrenArray  section ← [3 children]useFiber  h2placeChild  h2 oldIndex 0 lastPlacedIndex 0useFiber  formplaceChild  form oldIndex 1 lastPlacedIndex 0useFiber  ulplaceChild  ul oldIndex 2 lastPlacedIndex 1beginWork  h2completeWork  h2▾beginWork  form▾reconcileChildFibersImpl  form ← array[2]▾reconcileChildrenArray  form ← [2 children]useFiber  inputplaceChild  input oldIndex 0 lastPlacedIndex 0useFiber  buttonplaceChild  button oldIndex 1 lastPlacedIndex 0beginWork  inputcompleteWork  inputbeginWork  buttoncompleteWork  buttoncompleteWork  form▾beginWork  ul▾reconcileChildFibersImpl  ul ← array[2]▾reconcileChildrenArray  ul ← [2 children]useFiber  TodoItem[key=1]placeChild  TodoItem[key=1] oldIndex 0 lastPlacedIndex 0useFiber  TodoItem[key=2]placeChild  TodoItem[key=2] oldIndex 1 lastPlacedIndex 0▾beginWork  TodoItem[key=1]▾renderWithHooks  TodoItem[key=1] (update)▾[app] render TodoItem 1jsxDEV  buttonjsxDEV  li▾reconcileChildFibersImpl  TodoItem[key=1] ← <li>useFiber  li▾beginWork  li▾reconcileChildFibersImpl  li ← array[3]▾reconcileChildrenArray  li ← [3 children]useFiber  text "Learn JSX"placeChild  text "Learn JSX" oldIndex 0 lastPlacedIndex 0useFiber  text " "placeChild  text " " oldIndex 1 lastPlacedIndex 0useFiber  buttonplaceChild  button oldIndex 2 lastPlacedIndex 1▾beginWork  text "Learn JSX"bailoutOnAlreadyFinishedWork  text "Learn JSX" → skip subtreecompleteWork  text "Learn JSX"▾beginWork  text " "bailoutOnAlreadyFinishedWork  text " " → skip subtreecompleteWork  text " "beginWork  buttoncompleteWork  buttoncompleteWork  licompleteWork  TodoItem[key=1]▾beginWork  TodoItem[key=2]▾renderWithHooks  TodoItem[key=2] (update)[app] render TodoItem 2

Adding a todo. The submit handler calls setTodos and setText. Two updates, one render: both are queued during the event and the single microtask processes them together (batching). The keyed diff reuses keys 1 and 2 and creates key 3:

▾dispatchSetState  TodosPage ← [{"id":1,"text":"Learn JSX"},{"id":2,"text":"Read about fiberequestUpdateLane  TodosPage▾scheduleUpdateOnFiber  TodosPage lane 2▾ensureRootIsScheduledscheduleImmediateRootScheduleTask▾dispatchSetState  TodosPage ← ""requestUpdateLane  TodosPage▾scheduleUpdateOnFiber  TodosPage lane 2ensureRootIsScheduled▾processRootScheduleInMicrotask▾performSyncWorkOnRoot▾performWorkOnRoot  lanes 2renderRootSync

▾reconcileChildrenArray  ul ← [3 children]useFiber  TodoItem[key=1]placeChild  TodoItem[key=1] oldIndex 0 lastPlacedIndex 0useFiber  TodoItem[key=2]placeChild  TodoItem[key=2] oldIndex 1 lastPlacedIndex 0createFiberFromTypeAndProps  TodoItemplaceChild  TodoItem[key=3] (new) lastPlacedIndex 1

Removing the first todo. The first keys differ, so React builds a Map of the old children, reuses keys 2 and 3, and deletes key 1. That’s one removeChild:

▾reconcileChildrenArray  ul ← [2 children]mapRemainingChildrenuseFiber  TodoItem[key=2]placeChild  TodoItem[key=2] oldIndex 1 lastPlacedIndex 0useFiber  TodoItem[key=3]placeChild  TodoItem[key=3] oldIndex 2 lastPlacedIndex 1deleteChild  TodoItem[key=1]

▾commitDeletionEffectsOnFiber  TodoItem[key=1]▾commitDeletionEffectsOnFiber  licommitDeletionEffectsOnFiber  text "Learn JSX"commitDeletionEffectsOnFiber  text " "commitDeletionEffectsOnFiber  buttonremoveChild  <li> from <ul>

9. A page switch: unmount and mount

“Todos” calls setPage('todos'). App re-renders and, in the third slot of Layout’s children, returns <TodosPage /> where there used to be <CounterPage />. Same position, different type: React doesn’t compare inside. It deletes the whole CounterPage subtree (with count) and mounts TodosPage from scratch (Reconciliation, Rule 1).

The order of effects is the part people get wrong:

1. Render: TodosPage and its items are called and their DOM is built off-screen. CounterPage is only marked for deletion.
2. Commit, mutation: React walks the deleted subtree (commitDeletionEffectsOnFiber), then removes its top DOM node with one removeChild(<section>), and inserts the new <section> with one appendChild.
3. Passive effects: first the unmount cleanups (cleanup: title effect), then the new effects (effect: subscribe to resize).

▾reconcileChildrenArray  main ← [3 children]useFiber  NavplaceChild  Nav oldIndex 0 lastPlacedIndex 0useFiber  buttonplaceChild  button oldIndex 1 lastPlacedIndex 0createFiberFromTypeAndProps  TodosPagedeleteChild  CounterPageplaceChild  TodosPage (new) lastPlacedIndex 1

▾commitRootcommitBeforeMutationEffects▾flushMutationEffectscommitUpdate  h1▾commitDeletionEffectsOnFiber  CounterPage▾commitDeletionEffectsOnFiber  sectioncommitDeletionEffectsOnFiber  h2▾commitDeletionEffectsOnFiber  Display▾commitDeletionEffectsOnFiber  pcommitDeletionEffectsOnFiber  text "Count: "commitDeletionEffectsOnFiber  text "1"commitDeletionEffectsOnFiber  buttonremoveChild  <section> from <main>commitUpdate  buttoncommitUpdate  buttoncommitUpdate  navcommitUpdate  button▾commitPlacement  TodosPage▾insertOrAppendPlacementNode  TodosPage is not a DOM node → descend to its childinsertOrAppendPlacementNode  appendChild(<section>) into <main>commitUpdate  maincommitUpdate  divflushLayoutEffects▾flushPassiveEffects▾commitHookEffectListUnmount  CounterPage Passive[app] cleanup: title effect 1▾commitHookEffectListMount  TodosPage HasEffect|Passive[app] effect: subscribe to resize

HostRoot  (tag 3)
  App  (tag 0)  hooks: ["todos", "dark"]
    ThemeContext  (tag 10)
      Layout  (tag 0)  hooks: []
        div  (tag 5)  → <div>
          h1  (tag 5)  → <h1>
          main  (tag 5)  → <main>
            Nav  (tag 0)  hooks: []
              nav  (tag 5)  → <nav>
                button  (tag 5)  → <button>
                button  (tag 5)  → <button>
            button  (tag 5)  → <button>
              text "Theme: "  (tag 6)  → <#text>
              text "dark"  (tag 6)  → <#text>
            TodosPage  (tag 0)  hooks: [[{"id":1,"text":"Learn JSX"},{"id":2,"text":"Read about fibe, "", effect]
              section  (tag 5)  → <section>
                h2  (tag 5)  → <h2>
                form  (tag 5)  → <form>
                  input  (tag 5)  → <input>
                  button  (tag 5)  → <button>
                ul  (tag 5)  → <ul>
                  TodoItem[key=1]  (tag 0)  hooks: []
                    li  (tag 5)  → <li>
                      text "Learn JSX"  (tag 6)  → <#text>
                      text " "  (tag 6)  → <#text>
                      button  (tag 5)  → <button>
                  TodoItem[key=2]  (tag 0)  hooks: []
                    li  (tag 5)  → <li>
                      text "Read about fibers"  (tag 6)  → <#text>
                      text " "  (tag 6)  → <#text>
                      button  (tag 5)  → <button>

10. Recap: the order of everything

Rules of thumb that follow from the traces:

• A component runs when React’s work loop reaches its fiber, not when its JSX is written. <Nav /> in App doesn’t call Nav.
• children are created by the component that writes them, not the one that renders them.
• Elements are recreated on every render; fibers and DOM nodes are reused when type (and key) match at the same position.
• setState never renders by itself: it schedules a render. Several setStates in one event produce one render.
• The DOM is only touched in the commit, and only where flags say so.

Interview Q&A

How this was recorded

The demo lives in the site’s repository under examples/how-react-works.

• npm run compile runs @babel/core with @babel/preset-react (automatic, development and classic runtimes) on every source file, and asks Vite’s dev server for its output. Everything in chapter 1 is that output.
• npm run trace opens the app in Chrome, sets logpoints (breakpoints that log instead of pausing) on 49 functions of the React DOM 19.2.5 development build through the Chrome DevTools Protocol, and records them together with the app’s own log() calls. It then clicks “Add one”, “Theme”, “Todos”, types, adds and removes a todo. The traces, fiber trees and element objects above are that recording, filtered only to hide pointer/focus event noise and empty reconcileChildFibers(… ← null) calls.

Development builds keep function names, which is why the traces read like the source. Production builds are minified, but run the same functions in the same order.

Primary source: github.com/facebook/react/tree/v19.2.5/packages