React Rendering Explained for Interviews – 2026 Guide

React rendering is the process that turns a component’s JSX output into actual changes in the browser’s DOM. In an interview you need to convey three things quickly: what rendering means, how React does it, and why the approach matters.

What Rendering Means in React

In plain terms, rendering is “producing a UI snapshot from the current state and props.” When a component’s state or its received props change, React re‑evaluates the component function (or class render method) and generates a new JSX tree. That tree is then compared to the previous one to decide what part of the real DOM must change.

The Virtual DOM Mechanism

1. Create a virtual representation – React builds a lightweight JavaScript object that mirrors the intended DOM structure. This object is called the virtual DOM.
2. Diff the trees – When a state update occurs, React creates a new virtual tree and runs a diff algorithm against the previous tree. The algorithm looks for the smallest set of changes (additions, deletions, attribute updates).
3. Batch updates – React batches the identified changes and applies them in a single commit phase. This reduces layout thrashing and improves perceived performance.
4. Commit to the real DOM – The batched changes are flushed to the browser’s DOM via the appropriate DOM APIs.

The diffing step is where React gains its performance edge: instead of re‑painting the whole page, it only touches the nodes that actually differ.

Trade‑offs and Performance Considerations

In practice, the overhead is small for typical component sizes, but large lists or deeply nested trees can become a bottleneck. Techniques like React.memo, useMemo, and list virtualization (e.g., react-window) help keep the cost in check.

Concrete Example: A Todo List Component

import React, { useState, memo } from "react";

// A memoized item prevents unnecessary re‑renders when other items change
const TodoItem = memo(function TodoItem({ item, toggle }) {
  console.log("render", item.id);
  return (
    <li>
      <input
        type="checkbox"
        checked={item.done}
        onChange={() => toggle(item.id)}
      />
      {item.text}
    </li>
  );
});

export default function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Buy milk", done: false },
    { id: 2, text: "Read book", done: false },
  ]);

  const toggle = id =>
    setTodos(prev =>
      prev.map(t => (t.id === id ? { ...t, done: !t.done } : t))
    );

  return (
    <ul>
      {todos.map(item => (
        <TodoItem key={item.id} item={item} toggle={toggle} />
      ))}
    </ul>
  );
}

When you click a checkbox, only the corresponding TodoItem re‑renders because it is wrapped with memo. The parent TodoList still runs its render function, but the diff sees that the list structure is unchanged, so the real DOM update is limited to the one <li> element.

Typical Interview Questions About Rendering

1. "What triggers a re‑render in a functional component?" – State updates via useState/useReducer, prop changes, and context updates.
2. "How does React decide what to update in the DOM?" – Through the virtual DOM diffing algorithm during the reconciliation phase.
3. "When would you use React.memo versus useMemo?" – React.memo memoizes a component’s rendered output; useMemo memoizes a value inside a component.
4. "What are the pitfalls of over‑using useEffect for rendering logic?" – It can cause extra renders or race conditions if dependencies are mis‑specified.
5. "Explain how React’s concurrent mode affects rendering." – It allows React to pause, abort, or restart work, improving responsiveness for large updates.

When answering, tie each point back to a real experience (e.g., “In a recent project I noticed the list slowed down, so I added React.memo to the item component, which cut the render count by about half”). This shows you understand both theory and practical impact.

60‑Second Spoken Answer

"React rendering is the process of converting a component’s JSX output into actual DOM changes. React keeps a lightweight virtual DOM copy of the UI, and when state or props change it creates a new virtual tree, diffs it against the previous one, and batches the minimal set of real DOM updates. The benefit is fewer layout thrashes and smoother UI, but it does add memory overhead for the virtual trees. In practice I use memoization (React.memo) and list virtualization to keep large lists performant. Interviewers often ask what triggers a re‑render, how the diff works, and when to apply memoization, so I explain those points and back them with a brief example from my recent work."

How to Practice This

1. Record yourself – Use a tool like Call Assistant to capture a 60‑second run‑through and get feedback on pacing and clarity.
2. Write the answer on paper – Draft the key points (definition, mechanism, trade‑offs, example) without looking at notes, then compare to a reference.
3. Mock interview – Pair with a peer and ask them to fire the common questions listed above; iterate until you can answer fluently.

---

FAQ

• What is the difference between a re‑render and a DOM update? A re‑render is React executing a component function to produce new JSX. A DOM update occurs only after the diff algorithm determines that the new JSX differs from the previous virtual DOM and applies those changes to the real DOM.

• When should I avoid using React.memo? If the component is cheap to render or its props change on every render, memoization adds unnecessary overhead. Benchmarking or profiling can reveal whether memoization helps.

• How does server‑side rendering affect the rendering process? SSR runs the render phase on the server to produce HTML, then sends it to the client. The client still performs the hydration step, reconciling the server‑generated markup with the virtual DOM.

• Can I force a component to skip rendering? In class components you can implement shouldComponentUpdate. In functional components you can return null from React.memo's comparator or use useCallback/useMemo to keep props stable.