[React](/courses/reactjs) updates can be understood as two important stages: the **render phase** and the **commit phase**. The render phase calculates what the next UI should be. The commit phase applies the finished changes to the actual environment, such as the browser DOM. ### Complete Mental Model ```text Update triggered ↓ RENDER PHASE Calculate next UI Reconcile component tree Determine required changes ↓ COMMIT PHASE Apply finished changes ↓ Browser displays updated UI ``` ### What Happens During the Render Phase? During rendering, [React](/courses/reactjs) calls components to calculate their output. ```jsx function Greeting({ name }) { return

Hello {name}

; } ``` If `name` changes: ```text Asif → Sara ``` React runs `Greeting` again and calculates: ```jsx

Hello Sara

``` During this phase React also performs reconciliation to determine how the new component tree relates to the current one. ### Render Phase Does Not Mean DOM Mutation This is important: ```text Component function executed ≠ DOM immediately changed ``` React may calculate new UI without modifying the browser DOM yet. This separation allows React to prepare work safely before making it visible. ### Render Work Can Be Discarded With React's modern scheduling architecture, some rendering work may be restarted or abandoned before it is committed. For that reason, rendering must remain pure. Do not perform important external side effects directly during render: ```jsx function Checkout() { chargeCreditCard(); // wrong return ; } ``` React could potentially render this component more than once without committing each attempt. ### What Happens During the Commit Phase? Once React has a completed result, it can commit the required changes. For example: ```text Previous

Hello Asif

Hello Sara

``` React can commit the relevant DOM update: ```text Asif → Sara ``` rather than replacing unrelated parts of the document. ### Refs and DOM Availability DOM refs become useful around committed DOM elements because the actual [node](/courses/nodejs) now exists in the rendered environment. For example: ```jsx const inputRef = useRef(null); return ; ``` React manages the ref as the corresponding DOM [node](/courses/nodejs) is committed or removed. ### Effects and the Commit Process Effects happen in relation to committed UI rather than while React is purely calculating JSX. For DOM-related work that must happen before the browser paints the result, React provides `useLayoutEffect`. Ordinary external synchronization typically uses: ```jsx useEffect(() => { // synchronize with external system }); ``` The important distinction is: ```text render → calculate UI commit/effect lifecycle → interact with committed external environment ``` ### Why Must the Commit Phase Be Different from Rendering? Rendering can be prepared without exposing incomplete work. DOM mutation, however, changes what the user actually sees. Conceptually: ```text Render work → may be prepared/restarted Commit work → makes the finished update real ``` ### Rendering Can Produce No DOM Changes Suppose a parent renders again but a DOM element still resolves to: ```jsx

Hello

``` React may complete a render and determine that no DOM mutation is required. Therefore: ```text render occurred ``` does not imply: ```text DOM changed ``` ### Interview-Ready Answer The render phase is where React calls components, calculates the next UI, and performs reconciliation. It should remain pure because render work may be repeated or abandoned. The commit phase happens after React has a completed result and applies the necessary DOM changes, manages committed refs, and coordinates effects. Rendering does not automatically mean the DOM changed.