How does React rendering work?

Direct answer

What a strong answer covers

How it works

A render is React calling the component function to produce a description of the UI. It happens when the component’s own state changes, when its parent renders, or when a context it consumes changes. The result is diffed against the previous output during reconciliation and only real differences are committed to the DOM. Rendering is cheap by design; the expensive parts are heavy computations inside render and effects that fire after every commit.

Example

Memoising a child only helps when its props retain stable identities; it does not stop a parent render by itself. Passing an inline object or arrow function to a memoised list item creates a new reference each render, so React.memo sees changed props and the memo buys nothing until useMemo or useCallback stabilises them.

Common mistakes

• Equating a re-render with a DOM update.
• Mutating state in place and expecting a render, when React compares references.
• Wrapping every component in memo before measuring whether renders are actually slow.

A useful answer structure

Answer from your own work.

Do not memorise a script: use only examples you can explain honestly in follow-up questions.