What causes a re-render? Does it always change the DOM?

Definition:

Rendering means React calls components to calculate the next UI description. Committing is the later step where React applies needed changes to the host environment, such as the browser DOM. A component can render again without causing any DOM change if the calculated output is effectively the same.

Key points:

• State updates, parent renders and consumed context changes can trigger rendering.

• React calculates the next UI, then commits needed DOM changes.

• A re-render can produce the same UI and need no DOM change.

• Setting state to an equal value may let React skip work, but avoid relying on exact render counts as application logic.

Interview point:

• Separate a render from a DOM update and from a browser paint; they are related but different steps.