React Engine Map · React Handbook

React’s source has hundreds of functions, and the notes mention about 90 of them. You don’t need most of them. This card is the map: where each function sits, what calls what, which ones are worth remembering, and a deck of flashcards for the important ones. Anywhere on the site, tap a function name to see its card, or switch Names off in the top-right corner to read the notes in plain English.

How to read React’s function names

Almost every internal function belongs to one of four steps, and the name usually tells you which:

If the name starts with…	It belongs to	Example
`dispatch…`, `schedule…`, `ensure…`, `request…Lane`	scheduling: an update was requested	`dispatchSetState`
`perform…`, `render…`, `workLoop…`, `begin…`, `complete…`, `reconcile…`, `create…Fiber…`, `bailout…`	render phase: working out what changed	`beginWork`
`commit…`, `flush…Effects`	commit phase: changing the DOM, running effects	`commitRoot`
`mount…` / `update…`	the first render of something vs. a re-render	`mountState` / `updateReducer`

And three rules cover most of the nesting:

Everything in a render happens inside workLoopSync (or its concurrent twin), one fiber at a time: beginWork on the way down, completeWork on the way up.
Your component is called from renderWithHooks, which is called from beginWork. Your jsx() calls and hooks run inside it.
Everything in a commit happens inside commitRoot, in a fixed order: mutation (flushMutationEffects) → layout (flushLayoutEffects) → passive (flushPassiveEffects).

The map

must knowgood to knowimplementation detail· indented = called by the line above · tap a name for its card

1 · Setup and eventsOnce at start-up, then every time the user does something

- - your onClick

2 · SchedulingsetState never renders: it queues and schedules

↓ microtask ↓

3 · Render phasePure, off-screen, can be paused or thrown away

- - - - YourComponent()

4 · Commit phaseSynchronous, all at once, then effects

- - root.current = finishedWork

The main functions of React DOM 19.2.5, nested the way they call each other. Each lane is one step of every update: setup/event → scheduling → render → commit.

The ten names worth knowing

If you only remember ten, make it these. Everything else is a helper of one of them.

dispatchSetState: what your setState really is. It queues and schedules.
ensureRootIsScheduled: makes sure one render is coming (batching happens here).
performWorkOnRoot: renders, then commits, the root.
workLoopSync: the loop that processes one fiber at a time.
beginWork: going down: bail out, or render this fiber.
renderWithHooks: calls your component.
reconcileChildren: compares the new elements with the old fibers.
completeWork: going up: create DOM nodes, bubble flags.
commitRoot: applies everything to the DOM, all at once.
flushPassiveEffects: runs your useEffects.

Flashcards

Say the answer out loud first, then check. Cards you got wrong come back first. Progress is saved in this browser only.

Glossary

Every function and fiber field used in the notes, grouped by step. Must-know names come first in each group.

Setup

Name	In plain English	What it does
`createRoot`	set up React on a DOM node	Creates the FiberRoot and the first fiber (HostRoot) for a container, and attaches React’s event listeners to it. Renders nothing.
`listenToAllSupportedEvents`	listen for every event on the root	Attaches one capture and one bubble listener per event type to the root container. This is event delegation: your onClick never becomes an addEventListener on the button.
`createFiberRoot`	create the root’s records	Allocates the FiberRoot (bookkeeping for one root) and its HostRoot fiber.

Event

Name	In plain English	What it does
`dispatchDiscreteEvent`	React’s click/keydown listener	The root listener for discrete events (click, keydown, input…). Sets the event priority, finds the target fiber, collects onX props on the path and calls your handlers.
`dispatchEvent`	route a native event to handlers	Finds the fiber for the event target and runs the plugin event system that builds the SyntheticEvent.

Scheduling

Name	In plain English	What it does
`dispatchSetState`	setState	The function your setState actually is. Creates an update, picks a lane, tries the eager bailout, queues the update and schedules a render.
`root.render`	ask React to render this element	Queues an update whose payload is the element on the HostRoot fiber and schedules a render. Returns before anything renders.
`ensureRootIsScheduled`	make sure a render is coming	Adds the root to the schedule and queues one microtask to process it. Later setStates in the same tick find it already scheduled: that’s batching.
`processRootScheduleInMicrotask`	decide when to render	Runs in the microtask. Sync lanes are rendered right there; other lanes get a Scheduler task at a matching priority.
`requestUpdateLane`	pick the update’s priority	Chooses the lane: SyncLane inside a click, DefaultLane outside events, a transition lane inside startTransition.
`scheduleCallback`	ask the Scheduler for a task	The Scheduler’s API: puts a task on a min-heap ordered by expiration time and runs it in a later macrotask.
`scheduleUpdateOnFiber`	mark the root as having work	Adds the lane to root.pendingLanes and makes sure the root is scheduled.
`dispatchSetStateInternal`	queue the state update	Computes the new state eagerly when the fiber has no pending work; if it’s Object.is-equal, it skips scheduling a render.
`enqueueConcurrentHookUpdate`	stash the update	Puts the update in a module-level array until the next render links it into the hook’s queue.
`performSyncWorkOnRoot`	render now (Sync lane)	The microtask’s entry point for Sync lanes: calls performWorkOnRoot.
`performWorkOnRootViaSchedulerTask`	render in a Scheduler task	The Scheduler task’s entry point for non-sync lanes: calls performWorkOnRoot.
`scheduleImmediateRootScheduleTask`	queue the microtask	Calls queueMicrotask(processRootScheduleInMicrotask).
`updateContainerImpl`	queue the root update	Creates the root update { element }, enqueues it and calls scheduleUpdateOnFiber.

Elements

Name	In plain English	What it does
`createElement`	create an element	Returns a plain object describing UI: { $$typeof, type, key, props }. What JSX compiled to before the automatic runtime; children go in as extra arguments.
`jsx`	create an element object	What JSX compiles to (automatic runtime). Returns a plain object { $$typeof, type, key, ref, props }. It does not call the component.
`jsxDEV`	create an element (development)	The development version of jsx: also records where the element was written (file, line) for warnings and DevTools.
`jsxs`	create an element with static children	The same as jsx in production; in development it skips the key warning for children written side by side in JSX.

Render phase

Name	In plain English	What it does
`bailoutOnAlreadyFinishedWork`	skip this component	Skips calling the component. If childLanes says something below has work, the children are cloned and visited; otherwise the whole subtree is skipped.
`beginWork`	start work on a fiber (going down)	Decides what to do with one fiber: bail out if nothing changed, otherwise render it (call the component, or reconcile a DOM tag’s children). Returns the first child.
`completeWork`	finish a fiber (going up)	For DOM tags: creates the DOM node (detached) on mount and appends its children’s nodes, or flags an Update. For every fiber: bubbles subtreeFlags to the parent.
`reconcileChildren`	compare new elements with old fibers	Diffs what the component returned against the existing child fibers and decides what to reuse, create or delete.
`reconcileChildrenArray`	diff a list of children	The list diff: walk in step while keys match, then use a Map by key, and decide moves with lastPlacedIndex.
`renderWithHooks`	call your component	Installs the right hook implementations (mount or update), calls your component function, and returns the elements it produced.
`workLoopSync`	process fibers until done	The render loop: while (workInProgress !== null) performUnitOfWork(workInProgress). No recursion, one pointer.
`completeUnitOfWork`	finish a fiber and climb	Calls completeWork, then moves to the sibling, or up to the parent and completes that.
`createFiberFromTypeAndProps`	create a fiber for an element	Makes a new fiber and picks its tag from element.type: function → FunctionComponent, string → HostComponent, context → provider.
`createWorkInProgress`	make the draft copy of a fiber	Returns the fiber’s alternate, creating it the first time, with new props. This is double buffering.
`deleteChild`	mark a child for deletion	Adds the old fiber to the parent’s deletions list and flags the parent ChildDeletion. The DOM is removed later, in the commit.
`mapRemainingChildren`	index old children by key	Puts the remaining old fibers in a Map keyed by key (or index when there is no key).
`markUpdateLaneFromFiberToRoot`	leave a trail to the updated fiber	Sets lanes on the updated fiber and childLanes on every ancestor, so the work loop knows which paths to walk down.
`mountState`	useState on the first render	Creates the hook object and its update queue, stores the initial value, returns [state, setState].
`performUnitOfWork`	work on one fiber	Calls beginWork on the fiber. If it returned a child, that’s next; otherwise completeUnitOfWork climbs up.
`performWorkOnRoot`	render, then commit, the root	Chooses the synchronous or time-sliced loop for the lanes, runs the render, and commits the result.
`placeChild`	decide stay, move or insert	Compares a reused fiber’s old index with lastPlacedIndex: smaller means move (Placement); a new fiber is an insert.
`prepareFreshStack`	start a render from the root	Creates the work-in-progress HostRoot and links queued updates in. If a half-built tree exists for other lanes, it is thrown away.
`propagateContextChanges`	find readers of a changed context	When a provider’s value changed, searches below for fibers that read that context and schedules them, even through memo.
`reconcileChildFibers`	diff the children	The entry point of child reconciliation: dispatches to the single-element, text or array case.
`reconcileSingleElement`	diff one child	Same key and same type → reuse the fiber; otherwise delete the old one and create a new fiber.
`renderRootConcurrent`	render in 5ms slices	Like renderRootSync but runs workLoopConcurrentByScheduler, which can pause.
`renderRootSync`	render without pausing	Prepares a fresh stack if needed and runs workLoopSync to the end.
`shouldYield`	is my 5ms slice used up?	Asked after every fiber in the concurrent loop. True after about 5ms, so React pauses and lets the browser paint and handle input.
`updateFunctionComponent`	render a function component	beginWork’s case for function components: renderWithHooks, then reconcile the returned elements.
`updateReducer`	useState on a re-render	Takes the hook from the current fiber and folds its queued updates into the new state.
`useFiber`	reuse an existing fiber	Same key and type: gets the fiber’s alternate (createWorkInProgress) with the new props. State and the DOM node are kept.
`workLoopConcurrentByScheduler`	process fibers until time’s up	The same loop, but it also stops when shouldYield() says the slice is used up.
`attemptEarlyBailoutIfNoScheduledUpdate`	try to skip early	The fast path in beginWork when props, context and the fiber’s own lanes say nothing changed.
`createFiberFromElement`	create a fiber for an element	A thin wrapper around createFiberFromTypeAndProps.
`createFiberFromText`	create a text fiber	Creates a HostText fiber for a string or number child.
`finishQueueingConcurrentUpdates`	link stashed updates into queues	Moves updates stashed by setState into their hooks’ circular queues and marks lanes up to the root.
`mountWorkInProgressHook`	append a hook	Creates a hook object and appends it to fiber.memoizedState. Hooks are matched by this order.
`readContext`	read a context value	What useContext calls: reads the nearest provider’s value and records a dependency on the fiber.
`updateFromMap`	find the old child by key	Looks the new element’s key up in the Map: reuse if found, create if not.
`updateSlot`	compare one list position	In the first pass: returns null when keys differ (ends the fast path), otherwise reuses or replaces.
`updateWorkInProgressHook`	take the next hook	Walks the current fiber’s hook list in step with the calls. Calling hooks in a different order breaks here.

Commit phase

Name	In plain English	What it does
`commitRoot`	apply the finished render	Runs the commit: before mutation → mutation (DOM writes) → swap trees → layout effects, then schedules or flushes passive effects.
`commitDeletionEffects`	tear down a deleted subtree	Walks a deleted subtree parent-first: detaches refs, runs layout cleanups, then removes the top DOM node.
`commitPlacement`	insert into the DOM	Inserts a new or moved fiber’s DOM nodes (descending through components to the real nodes) with appendChild or insertBefore.
`commitUpdate`	update a DOM node’s attributes	Compares old and new props of a DOM element and writes only what changed.
`flushLayoutEffects`	run layout effects	The layout phase: attaches refs and runs useLayoutEffect setups and componentDidMount/Update, child before parent, before paint.
`flushMutationEffects`	write the DOM	The mutation phase: inserts, updates and removes DOM nodes as flagged, runs layout cleanups, then sets root.current = finishedWork.
`commitBeforeMutationEffects`	read the DOM before it changes	Runs getSnapshotBeforeUpdate and focus bookkeeping while the old UI is still in the DOM.
`commitLayoutEffectOnFiber`	one fiber’s layout work	Attaches the ref and runs the layout effects of one fiber.
`commitMutationEffectsOnFiber`	apply one fiber’s DOM changes	Walks the flagged fibers and performs their Placement, Update and ChildDeletion work.
`commitTextUpdate`	change a text node	Sets a text node’s value.
`flushSpawnedWork`	schedule what comes after the commit	Decides whether passive effects run now (Sync lanes) or in a later task.
`insertOrAppendPlacementNode`	append or insert the real nodes	For a DOM fiber calls appendChild/insertBefore; for a component fiber descends to its children.
`removeChild`	remove a DOM node	The DOM call that removes the top node of a deleted subtree.

Effects

Name	In plain English	What it does
`flushPassiveEffects`	run useEffect	Runs all useEffect cleanups, then all setups. Normally after paint in a separate task; for discrete events like clicks, at the end of the commit.
`commitHookEffectListMount`	run effect setups	Runs the setup functions of a fiber’s effects that match the flags (Layout or Passive) and changed deps.
`commitHookEffectListUnmount`	run effect cleanups	Runs the cleanup functions of a fiber’s effects that match the flags, before the new setups.
`flushPendingEffects`	finish leftover commit work	Flushes any commit phase or passive effects still pending before new work starts.

Fiber field

Name	In plain English	What it does
`workInProgress`	the fiber being worked on	Both the draft tree being rendered and the work loop’s one pointer to the next fiber to process.
`alternate`	the fiber’s other copy	Links a fiber in the current tree to its counterpart in the work-in-progress tree (double buffering).
`childLanes`	work pending below	A bitmask on each fiber saying that something in its subtree has updates. Zero means the whole subtree can be skipped.
`flags`	what the commit must do here	Bits on a fiber such as Placement, Update, ChildDeletion, Passive: recorded in render, performed in commit.
`lanes`	this fiber’s pending priorities	A bitmask of update priorities pending on the fiber itself.
`lastPlacedIndex`	rightmost position kept in place	During the list diff: the largest old index kept so far. A reused child with a smaller old index has to move.
`memoizedProps`	props from the last render	The props the fiber rendered with last time. Compared by reference to decide whether to bail out.
`memoizedState`	the component’s hooks	On a function component fiber: the head of its hook list. Each hook stores its value here, in call order.
`pendingProps`	props for this render	The new props the fiber is being rendered with.
`subtreeFlags`	changes somewhere below	The flags of all descendants ORed together, so the commit can skip subtrees with nothing to do.
`stateNode`	the real DOM node	For a DOM fiber, the DOM element; for a class, the instance; for HostRoot, the FiberRoot.
`updateQueue`	queued effects or updates	On function components, the circular list of effects the commit walks.

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