Commit and render

Learn to distinguish render and commit phases.

Commit and render

React rendering happens in two phases: render (computation) and commit (application). In the render phase the fiber tree is processed and side effects are computed; this phase can be interrupted.

In the commit phase side effects are applied to the DOM; this phase cannot be interrupted. The commitWork function walks the fiber tree and applies changes.

After commit useEffect and useLayoutEffect are called.

Commit phase details

The commit phase has three steps: DOM nodes are added/removed/updated, refs are attached, and useLayoutEffect is called.

These steps are synchronous and atomic; the user never sees an intermediate render. After commit the browser paints the screen.

useEffect is called asynchronously after paint; that is why it does not block the screen.

Exercise Write the commitWork function

Write a commitWork function. Take a fiber parameter. If fiber.effectTag === 'update' set fiber.dom.textContent = fiber.props.text. Recurse with if (fiber.child) commitWork(fiber.child) and if (fiber.sibling) commitWork(fiber.sibling). Export it.

Show example solution

function commitWork(fiber) {
  if (fiber.effectTag === 'update') {
    fiber.dom.textContent = fiber.props.text;
  }
  if (fiber.child) commitWork(fiber.child);
  if (fiber.sibling) commitWork(fiber.sibling);
}
export default commitWork;

Test yourself

Match phases

render

Computation, interruptible
commit

Applies to DOM
useEffect

After commit
useLayoutEffect

Right after DOM paint
What property does the commit phase have?
- Interruptible
- Asynchronous
- Runs only on the server
- Synchronous and atomic
Show answer

Synchronous and atomic — Commit is synchronous and atomic.

Fill in the blank: when is the hook called

// after render and commit
____ is called

Show answer

// after render and commit
useEffect is called

Next lesson: Summary - React internals

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies