--- title: Understanding React Internals (Part 1): From the Browser... description: A deep dive into why React was created, starting from how browsers work. Covers the DOM, the browser rendering pipeline (DOM → CSSOM → Render Tree → Layout →... canonical: https://daily.dev/posts/understanding-react-internals-part-1-from-the-browser-to-react-why-react-exists-uyzoiaxv4 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Understanding React Internals (Part 1): From the Browser to React — Why React Exists | daily.dev og:description: A deep dive into why React was created, starting from how browsers work. Covers the DOM, the browser rendering pipeline (DOM → CSSOM → Render Tree → Layout →... og:url: https://daily.dev/posts/understanding-react-internals-part-1-from-the-browser-to-react-why-react-exists-uyzoiaxv4 og:image: https://api.daily.dev/og/posts/uYzoiAXV4.png og:image:alt: Understanding React Internals (Part 1): From the Browser to React — Why React Exists 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. # Understanding React Internals (Part 1): From the Browser to React — Why React Exists **[Medium](https://daily.dev/sources/medium_js)** · 6 min read · 2 upvotes · 0 comments ## Summary A deep dive into why React was created, starting from how browsers work. Covers the DOM, the browser rendering pipeline (DOM → CSSOM → Render Tree → Layout → Paint → Composite), and the real problem React solves: keeping UI synchronized with application state. Debunks the myth that React exists because the DOM is slow, and explains the shift from imperative DOM manipulation to React's declarative model. Part 1 of a series on React internals. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Does React exist because the DOM is slow? No, the DOM itself is highly optimized by modern browsers and not inherently slow. The expensive part is what happens after a DOM update: the browser may need to recalculate layout, repaint pixels, and composite layers before displaying the new frame. React's real purpose is keeping the UI synchronized with application state as apps grow complex, not making a slow DOM faster. _daily.dev surfaces deeper explainers like this for developers debugging React performance myths._ ### What are the steps in the browser rendering pipeline after the DOM changes? After a DOM change, the browser processes the update through several stages: DOM, CSSOM, Render Tree, Layout, Paint, and Composite. The DOM and CSSOM are combined into a Render Tree to determine visible elements, Layout calculates size and position, Paint draws pixels, and Composite assembles the final frame shown on screen. _Developers optimizing rendering performance can find pipeline breakdowns like this on daily.dev._ ### What is the difference between imperative and declarative UI updates in React versus vanilla JavaScript? Imperative code, like plain JavaScript DOM manipulation, requires manually specifying every step to update the interface, such as setting textContent and style properties directly. Declarative code, as used in React, only describes what the UI should look like for a given state, and React handles synchronizing the actual DOM changes automatically when that state updates. _daily.dev helps developers compare imperative and declarative UI approaches while learning React._ ## Similar posts on daily.dev - [How React Works Internally: Virtual DOM, Reconciliation, and Rendering](https://daily.dev/posts/how-react-works-internally-virtual-dom-reconciliation-and-rendering-en38kquvn) · Medium · 2 upvotes · 0 comments - [React Basics: Thinking in React](https://daily.dev/posts/react-basics-thinking-in-react-bxfmesfzy) · Telerik · 4 upvotes · 0 comments - [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 - [How Browsers Work](https://daily.dev/posts/how-browsers-work-1wzz0te7k) · Hacker News · 2 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#dom](https://daily.dev/tags/dom) [View this post on daily.dev](https://daily.dev/posts/understanding-react-internals-part-1-from-the-browser-to-react-why-react-exists-uyzoiaxv4) ```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":"Understanding React Internals (Part 1): From the Browser to React — Why React Exists","url":"https://daily.dev/posts/understanding-react-internals-part-1-from-the-browser-to-react-why-react-exists-uyzoiaxv4","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/understanding-react-internals-part-1-from-the-browser-to-react-why-react-exists-uyzoiaxv4"},"datePublished":"2026-07-30T11:51:31.164Z","dateModified":"2026-09-14T07:15:00.782Z","description":"A deep dive into why React was created, starting from how browsers work. Covers the DOM, the browser rendering pipeline (DOM → CSSOM → Render Tree → Layout →...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a2495d9420a529ba0b175a79ac8bcb68?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a2495d9420a529ba0b175a79ac8bcb68?_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/understanding-react-internals-part-1-from-the-browser-to-react-why-react-exists-uyzoiaxv4","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,dom","timeRequired":"PT6M"} {"@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":"Understanding React Internals (Part 1): From the Browser to React — Why React Exists"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/understanding-react-internals-part-1-from-the-browser-to-react-why-react-exists-uyzoiaxv4#faq","mainEntity":[{"@type":"Question","name":"Does React exist because the DOM is slow?","acceptedAnswer":{"@type":"Answer","text":"No, the DOM itself is highly optimized by modern browsers and not inherently slow. The expensive part is what happens after a DOM update: the browser may need to recalculate layout, repaint pixels, and composite layers before displaying the new frame. React's real purpose is keeping the UI synchronized with application state as apps grow complex, not making a slow DOM faster. daily.dev surfaces deeper explainers like this for developers debugging React performance myths."}},{"@type":"Question","name":"What are the steps in the browser rendering pipeline after the DOM changes?","acceptedAnswer":{"@type":"Answer","text":"After a DOM change, the browser processes the update through several stages: DOM, CSSOM, Render Tree, Layout, Paint, and Composite. The DOM and CSSOM are combined into a Render Tree to determine visible elements, Layout calculates size and position, Paint draws pixels, and Composite assembles the final frame shown on screen. Developers optimizing rendering performance can find pipeline breakdowns like this on daily.dev."}},{"@type":"Question","name":"What is the difference between imperative and declarative UI updates in React versus vanilla JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Imperative code, like plain JavaScript DOM manipulation, requires manually specifying every step to update the interface, such as setting textContent and style properties directly. Declarative code, as used in React, only describes what the UI should look like for a given state, and React handles synchronizing the actual DOM changes automatically when that state updates. daily.dev helps developers compare imperative and declarative UI approaches while learning React."}}]} ```