Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A React render does not mean the browser repainted—or even that the DOM changed. React first calls components to calculate the next UI, then commits any necessary DOM updates; the browser paints the resulting screen afterward. The useful distinction is calculate → commit → paint.
What React rendering means
When React renders, it calls components and uses their output to determine what the UI should look like. This is a calculation step, not a synonym for changing the page’s DOM or drawing pixels on the screen. React’s Render and Commit guide describes rendering as React calling components to figure out what should appear.
“Reconciliation” is commonly used for the work of relating the next element tree to the previous one. For understanding visible updates, however, keep the documented stages distinct: React renders, commits necessary DOM changes, and then the browser paints.
Render, commit, and paint are different steps
| Stage | Who does it | What happens | What it does not guarantee |
|---|---|---|---|
| Render | React | Calls components and calculates the next UI. | It does not guarantee a DOM mutation or a repaint. |
| Commit | React | Applies the necessary operations to the DOM so it matches the latest output. | It does not mean every DOM node was replaced. |
| Paint | Browser | Repaints the screen after React has rendered and updated the DOM. | It is not another name for React calling components. |
React’s guide explicitly distinguishes its use of “rendering” from browser rendering, using “painting” for the browser’s work. Its sequence is trigger, render, commit, followed by the browser repainting the screen (React: Render and Commit).
#1 Best Overall
Why a render may leave the DOM alone
After a component renders, React compares the result with the previous output and updates only what is necessary. If the result is the same, React does not touch the DOM nodes. That is why “the component rendered” does not establish that an element was created, replaced, or updated.
React’s guide illustrates this with a changed heading and an input that remains in place: the update can change the <h1> while preserving the unaffected input DOM node. A render can therefore produce some DOM work without replacing the whole interface, or produce no DOM changes at all.
What this means for refs and effects
Refs are updated during commit
During rendering an update, the DOM may not yet reflect the new output. React sets affected refs during the commit, around the DOM update. Avoid reading a DOM ref during render on the assumption that the new DOM is already in place. See React’s Manipulating the DOM with Refs guide.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Passive effects usually run after paint
React’s performance-tracks documentation says passive effects such as useEffect usually run after paint. “Usually” matters: effect timing should not be reduced to a universal rule detached from the update path. React’s guide distinguishes the commit, layout effects, and remaining passive effects; consult its React Performance Tracks documentation when timing is important.
When synchronous DOM updates are needed
flushSync is a specialized API for integrations that need React to flush pending work and update the DOM synchronously. React warns that it can significantly hurt performance and should be used sparingly. Synchronous DOM updating still does not make React’s render calculation the same thing as browser paint. See the flushSync reference.
Quick Recap
Best Value
A practical way to debug an apparent “extra render”
- Check what ran: a component render means React called it to calculate output; it does not by itself prove that the DOM changed.
- Check what committed: identify whether React needed to apply DOM operations after comparing the new output with the old.
- Check what the browser displayed: painting is browser work after React’s render and DOM update, not a direct measure of component calls.
- Check timing-sensitive code: treat refs as commit-time DOM references and remember that passive effects usually happen after paint, not invariably.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
