React Rendering Interview Questions

One of the most common React interview questions is:

How does React rendering work?

Many developers answer:

React re-renders the component.

While technically true, interviewers often go deeper:

• What is rendering?
• What causes a re-render?
• Does React update the entire DOM?
• What is reconciliation?
• What happens during the render phase?
• How can unnecessary renders be avoided?

Let's understand React rendering from first principles.

1. What is Rendering in React?

Rendering is the process of React calculating what the UI should look like.

Example:

function UserCard() {
  return <h1>John</h1>;
}

When React executes:

<UserCard />

it produces:

<h1>John</h1>

This process is called:

Rendering

Important Interview Point

Rendering does not mean:

Updating The Real DOM

Rendering simply means:

Executing Components
And Generating UI Output

DOM updates happen later.

What Happens During Rendering?

React performs:

Execute Component
        ↓
Generate JSX
        ↓
Create Virtual DOM
        ↓
Compare Changes
        ↓
Update DOM If Needed

Visual Representation

Component
     ↓
Render
     ↓
Virtual DOM
     ↓
Reconciliation
     ↓
Real DOM Update

This is React's rendering pipeline.

Initial Render

Consider:

function App() {
  return <h1>Hello</h1>;
}

First render:

App Executes
      ↓
Virtual DOM Created
      ↓
DOM Updated
      ↓
UI Appears

This is called:

Initial Render

2. What Causes Re-renders?

One of the most important interview questions.

React components re-render when:

State Changes

setCount(count + 1);

Props Change

<UserCard name={user.name} />

Context Changes

useContext(UserContext);

Parent Re-renders

Parent Re-render
        ↓
Child Re-render

even if child props remain unchanged.

Example: State Change

function Counter() {
  const [count, setCount] = useState(0);
 
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Clicking:

State Update
      ↓
Re-render

Example: Prop Change

Parent:

<UserCard name={user.name} />

When:

user.name;

changes:

New Props
      ↓
Child Re-renders

3. Rendering vs. DOM Updates

A very common interview trap.

Answer:

No

React may re-render a component without updating the DOM.

Example:

setCount(1);

when:

count === 1;

React may skip DOM changes.

Rendering vs DOM Updates

Rendering:

Calculate UI

DOM Update:

Apply UI Changes

These are different operations.

4. Understanding the Virtual DOM & Reconciliation

React uses a lightweight JavaScript representation of the UI.

Example:

<h1>Hello</h1>

becomes:

{
  type: "h1",
  props: {
    children: "Hello"
  }
}

This structure is called:

Virtual DOM

Why Does React Use a Virtual DOM?

Direct DOM manipulation is expensive.

React instead:

Render
      ↓
Compare
      ↓
Update Only Changes

This improves efficiency.

What is Reconciliation?

One of the most important React concepts.

Reconciliation is React's process of comparing:

Previous Virtual DOM

with:

New Virtual DOM

and determining what changed.

Visual Example

Before:

<h1>Hello</h1>

After:

<h1>Hello World</h1>

React detects:

Text Changed

Only that update is applied.

Reconciliation Flow

Old Virtual DOM
         ↓
New Virtual DOM
         ↓
Diffing Algorithm
         ↓
Minimal DOM Updates

5. The Render and Commit Phases

React rendering happens in two major phases.

Render Phase

React calculates:

What Should Change

Commit Phase

React applies:

Actual DOM Updates

Visual Representation

Render Phase
      ↓
Commit Phase

This distinction is commonly asked in senior interviews.

Render Phase

During render:

Execute Components
Generate Virtual DOM
Calculate Changes

No DOM updates occur yet.

Commit Phase

During commit:

Update DOM
Attach Refs
Run Effects

Users can now see changes.

6. Parent and Child Rendering Dynamics

function App() {
  const [count, setCount] = useState(0);
 
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Flow:

Click
 ↓
State Update
 ↓
Render Phase
 ↓
Reconciliation
 ↓
Commit Phase
 ↓
DOM Update

Parent and Child Rendering

A common interview question.

Example:

function Parent() {
  const [count, setCount] = useState(0);
 
  return (
    <>
      <button />
      <Child />
    </>
  );
}

What Happens?

When:

count;

changes:

Parent Re-renders
       ↓
Child Re-renders

by default.

How to Prevent Child Re-renders?

Using:

React.memo();

Example:

const Child = React.memo(() => {
  return <div>Child</div>;
});

Now React compares props before re-rendering.

React.memo and Rendering

Without:

Parent Render
      ↓
Child Render

With:

Parent Render
      ↓
Props Unchanged
      ↓
Skip Child Render

Key Prop and Rendering

Interviewers frequently ask about keys.

Bad:

key={Math.random()}

Every render:

New Key

React treats items as new elements.

Better

key={user.id}

Stable keys help reconciliation.

7. React Strict Mode Rendering Behavior

In development:

<React.StrictMode>

React may intentionally render components twice.

Example:

function App() {
  console.log("Render");
 
  return <div />;
}

Development:

Render
Render

Production:

Render

This helps detect side effects.

8. Common Interview Q&A

What Is Rendering?

Rendering is React calculating what the UI should look like.

What Causes React Re-renders?

Common causes:

• State changes
• Props changes
• Context changes
• Parent re-renders

Does Re-render Mean DOM Update?

No.

React may render without updating the DOM.

What Is Reconciliation?

The process of comparing old and new Virtual DOM trees to determine changes.

What Is the Virtual DOM?

A lightweight JavaScript representation of the UI.

What Are Render and Commit Phases?

Render Phase:

Calculate Changes

Commit Phase:

Apply Changes

How Can Unnecessary Renders Be Prevented?

Common techniques:

• React.memo
• useMemo
• useCallback
• Context splitting

Rendering Flow Summary

State/Props Change
         ↓
Render Phase
         ↓
Virtual DOM Creation
         ↓
Reconciliation
         ↓
Commit Phase
         ↓
DOM Update

React Rendering vs Reconciliation

Senior-Level Interview Answer

React rendering is the process of executing components and generating a new Virtual DOM tree that represents the desired UI. When state, props, context, or parent renders occur, React enters the render phase where it calculates the next UI state. React then performs reconciliation by comparing the new Virtual DOM with the previous one. Finally, during the commit phase, React applies the minimal set of DOM updates required. Importantly, a component re-render does not necessarily mean a DOM update occurs. React's rendering architecture allows efficient UI updates while minimizing expensive DOM operations.

Common Interview Mistakes

❌ Re-render Means DOM Update

Correct:

Rendering and DOM updates
are separate operations.

❌ React Updates The Entire DOM

Correct:

React updates only
what changed.

❌ Parent Re-renders Never Affect Children

Correct:

Children re-render by default
when parents re-render.

❌ React.memo Prevents All Renders

Correct:

State and context changes
can still trigger renders.

Key Takeaways

• Render vs. Commit: Rendering is the process of generating virtual DOM nodes; committing is writing those changes to the real browser DOM.
• Virtual DOM: React's lightweight representation of the UI used to compute minimal layout changes via diffing.
• Reconciliation: The matching engine that determines which DOM elements need to be updated.
• Rerender Scope: A parent re-render recursively triggers child renders unless optimized using React.memo.
• Strict Mode: Triggers double renders in development to flush out hidden side effects.