Q151: React Rendering Mental Model

What Interviewers Want To Evaluate

This question checks whether you understand what React rendering actually means. Interviewers want component invocation, render output, reconciliation, commit, browser paint, state updates, parent-child rendering, and why a render is not always a DOM mutation.

Senior answers should separate React's render work from browser rendering and from user-visible paint.

Short Interview Answer

In React, rendering means calling components to calculate what the UI should look like for the current state and props. React compares the new output with previous output during reconciliation, then commits necessary changes to the host environment such as the DOM. A component render does not always mean the DOM changed, and a DOM commit is still separate from the browser's later layout, paint, and compositing work.

Detailed Interview Answer

React rendering is often confused with browser rendering.

React rendering:

component functions run
React elements are produced
React compares new tree with previous tree
React prepares updates

Browser rendering:

style calculation
layout
paint
compositing

They are related, but not the same thing.

Component Invocation

Function components are invoked by React.

function UserCard({ user }) {
  return <h2>{user.name}</h2>;
}

When React renders UserCard, it calls the function and receives React elements describing desired UI.

Render Output

React components return descriptions, not DOM nodes.

return <button>Save</button>;

This creates React element data. React later decides what host updates are needed.

Reconciliation

Reconciliation compares the new React element tree with the previous one.

React asks:

which component types are the same?
which keys match?
which props changed?
which children moved, appeared, or disappeared?

This lets React reuse work where possible.

Commit Phase

The commit phase applies changes.

For DOM apps, this can include:

creating DOM nodes
updating attributes
attaching refs
running layout effects
removing nodes

The commit phase is where user-visible host changes are applied.

Render Does Not Always Mean DOM Change

A component can render and produce the same output.

function Label({ text }) {
  return <span>{text}</span>;
}

If text is the same, React may have rendered the component but may not need to change the DOM.

Parent and Child Rendering

When a parent renders, children may render too.

function Parent({ user }) {
  return <Child user={user} />;
}

This does not automatically mean every child commits DOM changes. Rendering and committing are different stages.

State Updates

State updates schedule React work.

setCount((count) => count + 1);

React does not mutate the DOM immediately at the call site. It schedules work and processes updates according to its rendering model.

Browser Paint

After React commits DOM changes, the browser still decides when to paint.

This is why measuring only JavaScript completion may not measure when the user actually sees the update.

Common Mistakes

A common mistake is saying React render means the DOM rerendered. React may call components without changing DOM.

Another mistake is blaming React for layout cost when the expensive work is browser layout or paint after DOM changes.

Senior Trade-Offs

A senior engineer profiles the right layer.

component render cost: React profiler
DOM mutation cost: performance trace
layout and paint cost: browser performance tools
network delay: network panel
state churn: application instrumentation

Code or Design Example

function SearchPage({ results, query }) {
  return (
    <>
      <SearchBox value={query} />
      <ResultList results={results} />
    </>
  );
}

Typing may render SearchPage, but only the affected parts need host updates if identities and props are managed well.

Debugging Workflow

When UI feels slow:

check what state changed
use React Profiler for render cost
check why components rendered
inspect memoization and prop identity
record browser performance trace
separate React time from layout and paint
measure user-visible interaction

Interview Framing

Define React render as calculating UI, then explain reconciliation, commit, and browser paint as separate concepts.

Revision Notes

React render calculates desired UI. Commit applies host updates. Browser rendering paints pixels.

Key Takeaways

A precise render mental model prevents vague performance debugging and helps explain React behavior clearly.

Follow-Up Questions

1. What does React rendering mean?
2. Is React render the same as browser paint?
3. What is reconciliation?
4. What happens in commit?
5. Does every render update the DOM?
6. Why do children render when parents render?
7. What does state update scheduling mean?
8. How do you profile React render cost?
9. How do you profile browser paint cost?
10. Why does this distinction matter?

How I Would Answer This In A Real Interview

I would say React rendering is calculating the next UI tree, reconciliation compares it to the previous tree, and commit applies necessary host changes. I would explicitly separate that from browser layout and paint.