React Rendering and Re-renders

Interviewers love asking “when does a React component re-render?” because the answer reveals whether you understand React’s mental model or just its syntax. Here’s the precise version. React’s own guide to render and commit is the best primer on React rendering and re-renders.

1. What a “render” is

A render is React calling your component function to get a new description of the UI (React elements). Rendering is not the same as updating the DOM. After rendering, React reconciles the new element tree against the previous one and only commits the differences to the DOM.

render (call component) -> reconcile (diff) -> commit (touch DOM, run effects)

A component can render many times without the DOM changing at all.

2. What triggers a re-render

• State change: calling a useState setter or useReducer dispatch with a new value. If the new value is identical (Object.is) to the current one, React bails out.
• Parent re-render: by default, when a component renders, all of its children render too, whether or not their props changed.
• Context change: every component that calls useContext(SomeContext) re-renders when the provider’s value changes.

Notice what is not on the list: “props changed”. Props changing is a consequence of a... premium content.