What causes a re-render? Does it always change the DOM?
Try code in the playgroundUnderstand the concept
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.
Important ideas
-
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.
Can you explain it without the notes?
What causes a re-render? Does it always change the DOM?
Use your own words. Explain an example and one limitation before checking the explanation.
Check your explanation
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.
Turn this concept into a clear answer.
- Separate a render from a DOM update and from a browser paint; they are related but different steps.
Adapted from 06_REACT_NEXTJS.md · “What causes a re-render? Does it always change the DOM?”. Examples are study fragments; framework behavior can depend on your version.