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 कैसे एक वर्चुअल प्रतिनिधित्व बनाता है और न्यूनतम DOM परिवर्तन खोजने के लिए diff करता है।
Virtual DOM एक lightweight JavaScript object tree है जो real DOM को mirror करता है। React दो copies रखता है: current tree और प्रत्येक render के दौरान बनाई गई 'work-in-progress' tree। real DOM को तुरंत छूने के बजाय, React दोनों virtual trees को diff करता है और ज़रूरी changes का minimum set compute करता है — फिर उन्हें एक single batch में apply करता है।
जब आप JSX लिखते हैं, तो Babel (या React compiler) इसे React.createElement(type, props, ...children) calls में transform करता है। ये plain JavaScript objects return करते हैं जिन्हें React elements कहा जाता है — real DOM nodes नहीं।
React.createElement() एक nested object tree return करता है जैसे '{' type: 'div', props: '{' className: 'box', children: [...] '}' '}'। यही Virtual DOM है — UI कैसा दिखना चाहिए इसका एक सस्ता in-memory विवरण।
जब state या props बदलते हैं, React आपके component function को फिर से call करता है और नए desired UI को दर्शाती एक brand-new Virtual DOM tree बनाता है।
React का diffing algorithm (O(n) heuristic) दोनों trees को एक साथ walk करता है। यह मान लेता है कि अलग-अलग types के elements अलग-अलग trees बनाते हैं, और renders के पार list items को match करने के लिए key prop का उपयोग करता है।
Diffing के बाद, React के पास mutations की एक list होती है: इस prop को update करो, इस node को insert करो, उस node को remove करो। ये commit phase में real DOM पर apply होते हैं — reflows और repaints को minimize करते हुए।
React.createElement() द्वारा return किया गया एक plain JS object। type, props, और children describe करता है। real DOM node नहीं।
दो virtual trees की तुलना करने के लिए React का O(n) heuristic। मान लेता है कि same-position elements तब तक same type के हैं जब तक keys अलग न हों।
पुराने और नए virtual trees की तुलना करने और ज़रूरी DOM operations का minimum set निर्धारित करने की प्रक्रिया।
List items के लिए एक stable identity। React को old और new list elements को match करने देता है, भले ही उनकी positions बदल गई हों।
React एक reconciliation pass से सभी DOM mutations collect करता है और उन्हें एक साथ apply करता है, browser reflows को कम करता है।
1// JSX you write:2const element = <div className="box"><span>Hello</span></div>;34// Compiles to:5const element = React.createElement(6 'div',7 { className: 'box' },8 React.createElement('span', null, 'Hello')9);1011// Produces this Virtual DOM object:12{13 type: 'div',14 props: {15 className: 'box',16 children: {17 type: 'span',18 props: { children: 'Hello' }19 }20 }21}
Direct DOM manipulation महंगा है क्योंकि browser को layout recalculate करना और repaint करना होता है। JavaScript में diffing (fast) करके और DOM writes (slow) को batch करके, React महंगे browser operations की संख्या minimize करता है। इसीलिए complex UIs के साथ भी React apps fast लगती हैं।
You have a chat app rendering 500+ messages. Scrolling to load older messages causes the entire message list to re-render, taking 300ms and causing visible lag.
When new messages are appended, React creates a new VDOM tree for the entire list. The diffing algorithm walks all 500+ nodes even though only 20 new messages were added.
Use windowing (react-window/react-virtualized) to only render visible messages in the VDOM. Combined with proper `key` props, React's diff only processes ~20 visible nodes instead of 500+. The VDOM tree stays small, diffs stay fast.
Takeaway: The VDOM's diffing cost is proportional to tree size, not DOM size. Keeping your VDOM tree small via virtualization is the most effective optimization for large lists.
A component receives `style={{ color: 'red' }}` as a prop. Despite no visual change, React DevTools shows it re-renders on every parent update.
Each render creates a NEW style object `{ color: 'red' }`. When React diffs oldProps vs newProps, `oldStyle !== newStyle` (different object reference), so React marks this node as 'changed' and commits a DOM update — even though the actual CSS hasn't changed.
Hoist the style object outside the component or wrap it in `useMemo`. Now `oldStyle === newStyle` (same reference), the diff correctly marks it as 'unchanged', and React skips the DOM write entirely.
Takeaway: Understanding how the VDOM diff compares props (by reference, not deep equality) reveals why inline objects, arrays, and arrow functions in JSX cause performance issues.