A React render is not a browser repaint—and it does not necessarily change the DOM. React first calls components to calculate the next UI, then commits any necessary DOM updates; the browser handles painting afterward.
What React rendering means
When React renders, it calls components and uses their output to determine what the UI should look like. Rendering is a calculation step, not a synonym for updating the DOM or drawing pixels on the screen.
As an Amazon Associate I earn from qualifying purchases.
In discussions of reconciliation, the term often refers to React working out how the next element tree relates to the previous one. For understanding visible updates, React’s documented sequence is more useful: trigger, render, commit, then browser paint. See React’s Render and Commit guide.
How render, commit, and paint differ
| Stage | Who does it | What happens |
|---|---|---|
| Render | React | Calls components and calculates the next UI. |
| Commit | React | Applies the necessary changes to the DOM. |
| Paint | The browser | Repaints the screen based on the updated page. |
The key distinction is that React can render without changing any DOM nodes. If the calculated result is the same as before, React has no DOM update to commit. When something differs, React applies the necessary operations rather than replacing everything by default.
#1 Best Overall
Why a re-render may leave the DOM alone
Imagine an update changes the text in an <h1> while an <input> remains unchanged. React can update the heading and preserve the existing input node. The component rendered again, but that does not mean every DOM node was recreated—or that a change to every node was needed.
This is why “the component rendered” is not enough to conclude that the DOM changed. A render tells you React calculated output; the commit step determines whether there are DOM operations to apply.
When DOM refs are safe to read
Do not assume that a DOM ref already reflects an update while React is rendering it. During an update’s render phase, the DOM nodes have not yet been updated. React sets affected refs during commit, around the DOM update. The Manipulating the DOM with Refs guide explains this timing.
Recommended Free Tools
How effects fit into the sequence
Passive effects such as useEffect usually run after paint, but “usually” matters: effect timing is not a universal promise that every update follows one identical schedule. React’s Performance Tracks distinguish commit work, layout effects, and remaining passive effects. Check the guidance for the specific update path rather than assuming that all effects run at one fixed point.
What flushSync changes—and what it does not
flushSync is a specialized API for integrations that need React to flush pending work and update the DOM synchronously. React cautions that it can significantly hurt performance and should be used sparingly; see the flushSync reference.
Synchronously updating the DOM does not make React’s render calculation the same thing as browser painting. The stages still describe different work performed by different actors.
Quick Recap
Best Value
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.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute
