What is the role of React Fiber, and how do Render Phase and Commit Phase differ?

Short answer

Render calculates changes in memory and Fiber may pause or delay it to keep the interface responsive; Commit synchronously applies all changes to the real DOM without interruption.

Explanation

React Fiber divides work into small units (Fibers). During Render, React calls components and compares trees, and can pause or defer an update if a higher-priority event arrives (such as user input). Once calculations finish, Commit updates the DOM, then calls useLayoutEffect and useEffect.

Code example

import { useEffect, useLayoutEffect, useState } from "react";

function Counter() {
  console.log("RENDER phase: a pure calculation — may run twice, be paused or be discarded");
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    console.log("COMMIT: DOM is updated, runs before the browser paints");
  });
  useEffect(() => {
    console.log("COMMIT: runs after the browser has painted");
  });

  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

Common mistakes

• Causing side effects such as fetch or changing document.title directly during Render instead of using useEffect.

Follow-up questions

• What are Pure Components and purity in React functions (Pure Functions)?
• What is the Virtual DOM in React, and how does the Reconciliation (Diffing) algorithm work?

Sources

• React docs — Render and Commit