React Rn-Rendering Wrokflow

In this blog I am going to share my personal analysis of React re-render workflow. there are mainly 3 core steps (plus browser paint), let me tell you in very simple words what all these steps do: Step 1. Trigger – basically it is when React triggers a render. There can be many ways to trigger, for example: state change props change context change parent re-render Note: React does not immediately update DOM here, it just schedules an update. Step 2. Render Phase – here Fiber engine comes into the picture. It handles reconciliation of new changes. Basically it: calls components and creates new React elements (Virtual DOM concept) compares it with previous output using reconciliation (diffing) decides what needs to update, delete, or create Note: This phase is pure computation (no DOM updates) It can be paused, restarted, or interrupted (Concurrent React) React builds a Fiber tree to track and manage updates React may skip re-rendering of components if props/state did not change (bailout optimization) Step 3. Commit Phase – after render phase, commit phase starts. This phase cannot be stopped. Once React has final changes, it directly updates the real DOM. In this phase: DOM mutations happen refs get updated cleanup of previous effects runs useLayoutEffect runs (synchronously, before paint) Note: this phase is fast and blocking. Step 4. Browser Paint – once DOM is updated, browser paints the UI on screen. After paint: useEffect runs (async, non-blocking) Note: That’s why useEffect does not block UI, but useLayoutEffect can. Here is an example with explanation: function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> {count} </button> ); } when button clicked: Trigger: setCount called Render Phase: React creates new elements and compares with previous ones Commit Phase: button text updated in real DOM Browser Paint: UI shows new count useEffect (if any) runs after paint React may skip DOM update if output is same (optimization) Some important points: Re-render does not always mean DOM update Parent re-render can trigger child re-render React batches multiple state updates Keys are important for list rendering In Strict Mode, React may render twice (dev only) Render phase can run multiple times, but commit runs once per update

Read full story →