Engrain by ByteRush

RCT.01.01 Mid-level· 10 minCore — asked often

Render vs commit: what React actually does when state changes

React elements are plain objects; rendering calls your components to describe the UI, and committing changes the DOM. Learn what triggers a re-render, and why a render is not a DOM update.

Comes up in: React, Recruiter screen

Learn#

Rohan adds console.log to every component and panics: clicking one button prints 40 logs. Is React redrawing the whole page?

No. A React element is a plain object describing what to show, such as { type: Price, props: { amount: 499 } }. Creating one does not run your component:

import { createElement } from "react";
import { renderToString } from "react-dom/server";

let renders = 0;
function Price({ amount }) {
  renders++;
  return createElement("strong", null, `₹${amount}`);
}
const element = createElement(Price, { amount: 499 });
console.log(typeof element, element.type.name, element.props, "renders so far:", renders);
console.log(renderToString(element), "renders:", renders);
This example uses Node.js, so it runs in our checks rather than in your browser.

Output (verified)

object Price { amount: 499 } renders so far: 0
<strong>₹499</strong> renders: 1

An update has two steps. In the render phase, React calls your components to get new elements and compares them with the previous ones. In the commit phase, it applies only the differences to the DOM, sets refs and runs layout effects.

One click: render several components, change one text nodeStep 1 of 4

State

  • Cart: count 0 → 1 (queued)

Call stack

    empty

    Page

      empty

      The user clicks +. setCount(1) queues an update for Cart and schedules a render.

      Read the steps as text
      1. The user clicks +. setCount(1) queues an update for Cart and schedules a render.
      2. Render phase: React calls Cart(), then its children Header() and Total(), and gets new elements: plain objects.
      3. React compares the new elements with the previous ones. Only Total's text changed: "1 item".
      4. Commit phase: React updates that one text node, sets refs, runs layout effects; the browser paints. Header rendered but its DOM was not touched.

      Predict#

      Predict first

      A parent re-renders, and its child gets exactly the same props. Does the child re-render?

      Interview angle#

      Say it like this — about 30 seconds

      “A React element is a plain object describing UI. When state changes, React renders: it calls the component and its descendants to get new elements, and diffs them against the previous tree. That phase must be pure and may run more than once, or be thrown away. Then it commits: it applies the minimal DOM changes, attaches refs and runs layout effects. A component re-renders when its state changes, its parent renders, or a context it reads changes. A render does not mean a DOM update.”

      Stays on your device. Nothing is uploaded.
      Follow-up What is the difference between the render phase and the commit phase?
      Render: calling components and diffing, pure and interruptible. Commit: applying DOM changes, refs and layout effects, synchronous.
      Follow-up When does a component re-render?
      When it sets state, when its parent re-renders (unless memoized with equal props), or when a context it reads changes.
      Follow-up Does a re-render always change the DOM?
      No. If the new elements match the old ones, the commit changes nothing for that part.

      Practice#

      Guided

      Predict which components render after a state update, including memo and context.

      Done when

      • The updated component and its descendants render, in depth-first order.
      • Memo components with unchanged props skip their whole subtree.
      • Context readers below a memo still render when the updated component provides that context.
      Your solution
      Ctrl/⌘ + Enter

      Remember#

      Try to answer each card before you open it. Then add them to your reviews.

      What is a React element?

      A plain object describing a component or tag and its props.

      What happens in the commit phase?

      React applies DOM changes, sets refs and runs layout effects.

      Name three reasons a component re-renders.

      Its state changes, its parent renders, or a context it reads changes.

      Does a child with the same props re-render when its parent does?

      Yes, unless it is wrapped in memo.

      Go deeper

      Four layers. Stop at the one your interview needs; each ends with a quick check.

      The core ideaEvery round
      A render starts from a state update (setState, a reducer dispatch), a parent rendering, or a changed context value. Props never “change” on their own: they change because the parent rendered.
      Check yourself: Does creating an element call the component?

      No. React calls it later, during rendering.

      How it works underneathSenior rounds

      React may render a component twice (Strict Mode does it on purpose in development), pause a render for urgent input, or discard it. So rendering must have no side effects .

      Check yourself: Why must the render phase be pure?

      React may call it more than once, pause it, or discard it.

      Edge cases and trapsWhere people slip
      If a component returns the same output, the commit leaves its DOM alone. So a render is cheap compared with layout and paint, unless the component itself does heavy work.
      Check yourself: Does an unchanged element cause a DOM write?

      No; the diff finds no change, so nothing is committed for it.

      In productionStaff-level answers

      Use the React DevTools Profiler to see which components rendered and why. The React Compiler can add memoization automatically, which reduces renders of unchanged subtrees .

      Check yourself: Which tool shows why a component rendered?

      The React DevTools Profiler.

      Finished the five steps? Mark it, and its cards join your reviews.

      Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

      Interview questions this answers

      • What is the difference between the render phase and the commit phase?
      • When does a component re-render?