--- title: How React Works Internally: Virtual DOM, Reconciliation,... description: A detailed walkthrough of React's internal rendering pipeline, covering why the Virtual DOM exists, how JSX transforms into Virtual DOM nodes, what happens... canonical: https://daily.dev/posts/how-react-works-internally-virtual-dom-reconciliation-and-rendering-en38kquvn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How React Works Internally: Virtual DOM, Reconciliation, and Rendering | daily.dev og:description: A detailed walkthrough of React's internal rendering pipeline, covering why the Virtual DOM exists, how JSX transforms into Virtual DOM nodes, what happens... og:url: https://daily.dev/posts/how-react-works-internally-virtual-dom-reconciliation-and-rendering-en38kquvn og:image: https://api.daily.dev/og/posts/eN38KQUVn.png og:image:alt: How React Works Internally: Virtual DOM, Reconciliation, and Rendering og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How React Works Internally: Virtual DOM, Reconciliation, and Rendering **[Medium](https://daily.dev/sources/medium_js)** · 12 min read · 2 upvotes · 0 comments ## Summary A detailed walkthrough of React's internal rendering pipeline, covering why the Virtual DOM exists, how JSX transforms into Virtual DOM nodes, what happens during reconciliation and diffing when state changes, and how the render and commit phases are separated. Also explains the role of keys in list rendering, common memoization tools (React.memo, useMemo, useCallback), and clears up misconceptions about the Virtual DOM — including that it doesn't eliminate real DOM updates, it just minimizes them. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does React recommend against using array index as a key in list rendering? Array index as a key fails because it does not reliably represent a specific item's identity when a list can reorder, insert, or remove items. When the index no longer maps to the same logical item across renders, React can misidentify which item is which, causing subtle bugs like state or focus jumping to the wrong row. _Debugging list re-render glitches gets easier when developers compare notes on daily.dev around React keys and reconciliation._ ### Does wrapping a component in React.memo skip reconciliation entirely? React.memo can skip re-rendering and re-diffing a component entirely if its props have not changed, avoiding reconciliation work for that component. In contrast, useMemo and useCallback do not skip rendering at all; they only avoid recomputing a value or recreating a function reference within a render that still happens. _Developers weighing memoization strategies for React performance often track these distinctions on daily.dev._ ### Does React's diffing algorithm guarantee the smallest possible set of DOM changes? No, React's diffing algorithm does not guarantee mathematically minimal DOM changes. It relies on practical heuristics, such as matching elements by type and position or by key for lists, which are fast enough to run on every update but represent a deliberate tradeoff between speed and perfect minimality rather than an optimal diff. _Understanding these tradeoffs helps developers reason about React performance discussions surfaced on daily.dev._ ## Similar posts on daily.dev - [React Behind The Scenes: Virtual DOM, Reconciliation, Render Phase, Commit Phase & Fiber Explained.](https://daily.dev/posts/react-behind-the-scenes-virtual-dom-reconciliation-render-phase-commit-phase-fiber-explained--9uynk7eyd) · Medium · 5 upvotes · 0 comments - [“Render” Doesn’t Mean What You Think It Means in React](https://daily.dev/posts/render-doesn-t-mean-what-you-think-it-means-in-react-xfthxw4hn) · Medium · 1 upvotes · 0 comments - [The React Handbook for Beginners – JSX, Hooks, and Rendering Explained](https://daily.dev/posts/the-react-handbook-for-beginners-jsx-hooks-and-rendering-explained-c128n6sxb) · freeCodeCamp · 28 upvotes · 0 comments - [React for Vue Developers, 2: State, Effects, Re-renders](https://daily.dev/posts/react-for-vue-developers-2-state-effects-re-renders-lf4kx00ba) · Telerik · 12 upvotes · 2 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/how-react-works-internally-virtual-dom-reconciliation-and-rendering-en38kquvn) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How React Works Internally: Virtual DOM, Reconciliation, and Rendering","url":"https://daily.dev/posts/how-react-works-internally-virtual-dom-reconciliation-and-rendering-en38kquvn","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-react-works-internally-virtual-dom-reconciliation-and-rendering-en38kquvn"},"datePublished":"2026-07-24T04:08:38.086Z","dateModified":"2026-09-14T07:15:18.109Z","description":"A detailed walkthrough of React's internal rendering pipeline, covering why the Virtual DOM exists, how JSX transforms into Virtual DOM nodes, what happens...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ac7bfddcf66095c959fd5e3d0b9e7567?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ac7bfddcf66095c959fd5e3d0b9e7567?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-react-works-internally-virtual-dom-reconciliation-and-rendering-en38kquvn","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,react","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"How React Works Internally: Virtual DOM, Reconciliation, and Rendering"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-react-works-internally-virtual-dom-reconciliation-and-rendering-en38kquvn#faq","mainEntity":[{"@type":"Question","name":"Why does React recommend against using array index as a key in list rendering?","acceptedAnswer":{"@type":"Answer","text":"Array index as a key fails because it does not reliably represent a specific item's identity when a list can reorder, insert, or remove items. When the index no longer maps to the same logical item across renders, React can misidentify which item is which, causing subtle bugs like state or focus jumping to the wrong row. Debugging list re-render glitches gets easier when developers compare notes on daily.dev around React keys and reconciliation."}},{"@type":"Question","name":"Does wrapping a component in React.memo skip reconciliation entirely?","acceptedAnswer":{"@type":"Answer","text":"React.memo can skip re-rendering and re-diffing a component entirely if its props have not changed, avoiding reconciliation work for that component. In contrast, useMemo and useCallback do not skip rendering at all; they only avoid recomputing a value or recreating a function reference within a render that still happens. Developers weighing memoization strategies for React performance often track these distinctions on daily.dev."}},{"@type":"Question","name":"Does React's diffing algorithm guarantee the smallest possible set of DOM changes?","acceptedAnswer":{"@type":"Answer","text":"No, React's diffing algorithm does not guarantee mathematically minimal DOM changes. It relies on practical heuristics, such as matching elements by type and position or by key for lists, which are fast enough to run on every update but represent a deliberate tradeoff between speed and perfect minimality rather than an optimal diff. Understanding these tradeoffs helps developers reason about React performance discussions surfaced on daily.dev."}}]} ```