Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
JSX se pixels tak ka poora safar â render trigger karo aur har phase dekho.
Har baar jab React render karta hai, woh ek predictable two-phase pipeline se guzarta hai: Render Phase aur Commit Phase. Render phase pure aur interruptible hai â React aapke components call karta hai aur ek naya fiber tree build karta hai. Commit phase synchronous aur side-effectful hai â React computed changes real DOM par apply karta hai aur effects fire karta hai.
Build time par, JSX jaise <Button color='blue'>Click</Button> React.createElement(Button, '{' color: 'blue' '}', 'Click') ban jaata hai. Yeh ek plain object tree produce karta hai â virtual DOM.
React fiber tree walk karta hai har component function call karte hue (ya render() method). Yeh phase pure hai aur koi side effects produce nahi karta â React concurrent mode mein ise kisi bhi waqt interrupt aur restart kar sakta hai.
React naye output ko previous fiber tree ke against compare karta hai. Har fiber ko ek effect tag se mark karta hai: Update, Placement (insert), ya Deletion. Result ek 'effect list' hai â pending work wale fibers ki flat list.
React class components par getSnapshotBeforeUpdate() call karta hai aur passive effects schedule karta hai. Yeh sub-phase kisi bhi DOM mutation se pehle run hota hai.
React effect list walk karta hai aur saari DOM mutations synchronously apply karta hai: insertions, updates, deletions. Iske baad, DOM nayi UI reflect karta hai.
useLayoutEffect callbacks DOM mutation ke baad synchronously run hote hain lekin browser paint se pehle. Phir browser paint karta hai. Aakhir mein, useEffect callbacks paint ke baad asynchronously run hote hain.
Pure, side-effect-free phase jahan React components call karta hai aur naya fiber tree build karta hai. Concurrent mode mein interrupt ho sakta hai.
Synchronous phase jahan React DOM mutations apply karta hai aur lifecycle methods/effects fire karta hai. Interrupt nahi ho sakta.
DOM mutation ke baad synchronously fire hota hai, browser paint se pehle. DOM measurements ke liye use karein. Painting block karta hai.
Browser paint ke baad asynchronously fire hota hai. Painting block nahi karta â subscriptions, fetches, aur non-visual side effects ke liye ideal.
Development mein, React side effects detect karne ke liye render phase mein components do baar render karta hai. Sirf ek commit hota hai.
1function MyComponent() {2 // Fires: after every render, after browser paint (async)3 useEffect(() => {4 console.log('3. useEffect â DOM painted, async');5 return () => console.log('cleanup');6 });78 // Fires: after every render, before browser paint (sync)9 useLayoutEffect(() => {10 console.log('2. useLayoutEffect â DOM mutated, not painted');11 });1213 console.log('1. Render phase â pure, no side effects');14 return <div />;15}16// Order: Render â DOM mutation â useLayoutEffect â Paint â useEffect
Pipeline samajhna aapko code sahi jagah rakhne mein help karta hai. DOM measurements useLayoutEffect mein jaani chahiye (paint se pehle). Data fetching useEffect mein jaati hai (paint ke baad, non-blocking). Initialization jo pehle render se pehle hona chahiye useState initializer ya useMemo mein jaati hai. Yeh galat karne se visual flashes, layout jumps, ya missed renders hote hain.
You're building a tooltip that positions itself relative to a target element. Using useEffect, the tooltip first renders at (0,0), then jumps to the correct position â causing a visible flash.
useEffect fires AFTER the browser paints. So the sequence is: Render (tooltip at 0,0) â Paint (user sees misplaced tooltip) â useEffect (measure & reposition) â Re-render â Paint (correct). The first paint shows the wrong position.
Switch to useLayoutEffect which fires AFTER DOM mutation but BEFORE paint. The sequence becomes: Render â DOM mutation â useLayoutEffect (measure & update) â Paint (correct position). The user never sees the wrong position because the browser hasn't painted yet.
Takeaway: Use useLayoutEffect for any DOM measurement or mutation that affects visual layout (tooltips, popovers, scroll position, animations). Use useEffect for everything else (data fetching, analytics, subscriptions).
You add console.log statements to debug when state changes propagate. The logs appear in an unexpected order: render logs appear before effect logs, and cleanup logs appear between them.
Without understanding the pipeline phases, developers assume effects run 'during' rendering. They place side effects in the render function body (causing bugs) or misread the log order and chase phantom timing issues.
The rendering pipeline has strict phases: Render (pure, produces VDOM) â Commit (DOM writes) â Layout Effects (sync, before paint) â Paint (browser) â Effects (async, after paint). Each console.log appears in pipeline order. Understanding this order lets you read debug output correctly and place code in the right phase.
Takeaway: The rendering pipeline is NOT a single step â it's 5 distinct phases with different timing guarantees. Most React bugs come from putting code in the wrong phase (e.g., side effects in render, DOM reads in useEffect instead of useLayoutEffect).