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.
देखें कि React रिकन्सिलिएशन के दौरान depth-first search से Fiber ट्री को कैसे पार करता है।
Fiber, React का आंतरिक रिकन्सिलिएशन इंजन है, जिसे React 16 में पेश किया गया था। आपके ऐप के प्रत्येक कॉम्पोनेंट का एक Fiber नोड होता है — एक JavaScript ऑब्जेक्ट जो कॉम्पोनेंट का प्रकार, उसके props, state, संबद्ध DOM नोड, और parent, child तथा sibling fibers के पॉइंटर संग्रहीत करता है। यह linked संरचना React को कई frames में काम को रोकने, फिर से शुरू करने और प्राथमिकता देने की अनुमति देती है।
जब React आपके कॉम्पोनेंट ट्री को रेंडर करता है, तो वह प्रत्येक element के लिए एक Fiber नोड बनाता है। नोड में स्टोर होता है: type (function/class/string), props, state, effect hooks, और पिछले रेंडर से work-in-progress state।
एक recursive call stack (जिसे रोका नहीं जा सकता) के विपरीत, Fibers एक linked list के रूप में जुड़े होते हैं: प्रत्येक नोड में एक child pointer (पहला child), sibling pointer (अगला sibling), और return pointer (parent) होता है। इससे React ट्री को iteratively traverse कर सकता है।
React fiber ट्री को depth-first walk करता है। यह नीचे जाते समय (parent → child) 'beginWork' और वापस ऊपर आते समय (child → parent) 'completeWork' कॉल करता है। यह two-pass approach React को bottom-up effect list बनाने देती है।
React एक साथ दो fiber trees बनाए रखता है: 'current' tree (जो स्क्रीन पर है) और 'work-in-progress' tree (जो बन रही है)। प्रत्येक fiber नोड में एक 'alternate' pointer होता है जो दूसरे tree में उसके समकक्ष को जोड़ता है।
जब commit phase पूरा होता है, React root के 'current' pointer को work-in-progress tree की ओर इंगित करके दोनों trees को atomically swap करता है। पुरानी current tree अगले रेंडर के लिए नई work-in-progress बन जाती है।
एक JS ऑब्जेक्ट जो एक कॉम्पोनेंट के लिए काम की एक इकाई दर्शाता है। इसमें type, key, ref, props, state, hooks list, effect tags, और tree pointers होते हैं।
रिकन्सिलिएशन के दौरान बनाई जा रही fiber tree। commit phase के पूरा होने और current tree से swap होने तक user को दिखाई नहीं देती।
वे दो functions जिन्हें React fiber tree traverse करते समय कॉल करता है। beginWork नीचे जाते समय नोड को process करता है; completeWork वापस ऊपर आते समय उसे finalize करता है।
एक fiber नोड पर bitmask flag जो दर्शाता है कि कौन सा DOM काम होना है: Placement (insert), Update (patch props), Deletion (remove)।
प्रत्येक fiber में एक 'alternate' field होती है जो दूसरे tree (current ↔ work-in-progress) में उसके समकक्ष को इंगित करती है। Double buffering को सक्षम करती है।
1// Simplified Fiber node structure (React internals)2{3 tag: FunctionComponent, // type of fiber4 type: MyComponent, // component function/class/string5 key: null,6 ref: null,7 pendingProps: { id: 1 },8 memoizedProps: { id: 1 }, // props from last render9 memoizedState: hooksList, // linked list of hooks1011 // Tree pointers12 return: parentFiber, // parent13 child: firstChildFiber, // first child14 sibling: nextSiblingFiber, // next sibling1516 // Double buffering17 alternate: workInProgressFiber,1819 // Work tracking20 flags: Update | Passive, // effect tags21 lanes: DefaultLane, // priority22}
Fiber आर्किटेक्चर ही React की concurrent features को संभव बनाता है। क्योंकि काम को एक data structure (call stack नहीं) के रूप में दर्शाया जाता है, React किसी भी fiber नोड पर रिकन्सिलिएशन रोक सकता है, user input जैसे high-priority tasks के लिए browser को control वापस दे सकता है, और जहाँ छोड़ा था वहाँ से फिर शुरू कर सकता है। यह Suspense, transitions और automatic batching की नींव है।
Your dashboard app freezes for 200ms when a user opens a settings panel. React DevTools Profiler shows a long 'Render' phase but you can't identify which component is slow.
Without understanding Fiber, the profiler's flame graph (which shows fiber-by-fiber render times) looks like random colored bars. You don't know why some components are 're-rendered' when their props haven't changed.
Understanding that each bar in the Profiler IS a fiber node helps you trace the work loop: parent → child → sibling. You can identify which fiber's `beginWork` is slow, check its `memoizedProps` vs `pendingProps`, and apply React.memo or useMemo precisely.
Takeaway: The React DevTools Profiler is literally a fiber tree visualizer. Understanding fiber architecture transforms it from a confusing chart into a powerful debugging tool.
You have a drag-and-drop interface where moving an item should animate at 60fps, but data fetching from a heavy table re-render causes janky movement.
A single synchronous render blocks the main thread for 50ms+, causing the browser to skip animation frames during the data fetch re-render.
React Fiber's priority lanes system lets you wrap the heavy re-render in `startTransition()`, marking it as low-priority. The fiber work loop can now pause the heavy render, yield to the browser for animation frames, and resume later — all because fibers are interruptible units of work.
Takeaway: Fiber architecture is the reason `useTransition` and `useDeferredValue` exist. These APIs wouldn't be possible without interruptible, priority-based rendering.