[{"data":1,"prerenderedAt":147},["ShallowReactive",2],{"term-v\u002Fvirtual-dom":3,"related-v\u002Fvirtual-dom":128},{"id":4,"title":5,"acronym":6,"body":7,"category":108,"description":109,"difficulty":110,"extension":111,"letter":112,"meta":113,"navigation":114,"path":115,"related":116,"seo":122,"sitemap":123,"stem":126,"subcategory":6,"__hash__":127},"terms\u002Fterms\u002Fv\u002Fvirtual-dom.md","Virtual DOM",null,{"type":8,"value":9,"toc":102},"minimark",[10,15,19,23,26,30,91,95,98],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"The Virtual DOM is a lightweight copy of the real DOM that lives in memory. React or Vue make changes to this fake copy first, figure out the minimum number of real changes needed, then update the real page. It's like drafting an email before actually sending it.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"The Virtual DOM is an in-memory representation of the real DOM tree. When state changes, the framework creates a new Virtual DOM tree, diffs it against the previous one using a reconciliation algorithm, and applies only the minimal set of real DOM mutations needed. This avoids expensive full re-renders.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F React builds a virtual DOM tree from JSX\nconst element = \u003Ch1>Hello, world\u003C\u002Fh1>;\n\u002F\u002F React diffs and patches — you never touch the real DOM directly\n","jsx","",[38,39,40,49,85],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F React builds a virtual DOM tree from JSX\n",[41,50,52,56,60,64,67,71,74,77,80,82],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","const",[41,57,59],{"class":58},"sTEyZ"," element ",[41,61,63],{"class":62},"sMK4o","=",[41,65,66],{"class":62}," \u003C",[41,68,70],{"class":69},"swJcz","h1",[41,72,73],{"class":62},">",[41,75,76],{"class":58},"Hello, world",[41,78,79],{"class":62},"\u003C\u002F",[41,81,70],{"class":69},[41,83,84],{"class":62},">;\n",[41,86,88],{"class":43,"line":87},3,[41,89,90],{"class":47},"\u002F\u002F React diffs and patches — you never touch the real DOM directly\n",[11,92,94],{"id":93},"when-youll-hear-this","When You'll Hear This",[16,96,97],{},"\"The Virtual DOM makes React updates efficient by only patching what changed.\" \u002F \"Svelte skips the Virtual DOM entirely by compiling to direct DOM updates.\"",[99,100,101],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":103},[104,105,106,107],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":93,"depth":51,"text":94},"frontend","The Virtual DOM is a lightweight copy of the real DOM that lives in memory.","intermediate","md","v",{},true,"\u002Fterms\u002Fv\u002Fvirtual-dom",[117,118,119,120,121],"DOM","React","Vue","Render","Reactivity",{"title":5,"description":109},{"changefreq":124,"priority":125},"weekly",0.7,"terms\u002Fv\u002Fvirtual-dom","-fQ7peMl_Ds4X0DQhxCz-Z6qEBjZUb-GFMNIYAOwwsg",[129,134,137,140,144],{"title":117,"path":130,"acronym":131,"category":108,"difficulty":132,"description":133},"\u002Fterms\u002Fd\u002Fdom","Document Object Model","beginner","The DOM is a live map of your webpage that JavaScript can read and edit. When the browser loads your HTML it turns it into a big tree of objects.",{"title":118,"path":135,"acronym":6,"category":108,"difficulty":132,"description":136},"\u002Fterms\u002Fr\u002Freact","React is a JavaScript library from Meta for building UIs out of components.",{"title":121,"path":138,"acronym":6,"category":108,"difficulty":110,"description":139},"\u002Fterms\u002Fr\u002Freactivity","Reactivity is the system that makes your UI automatically keep up with your data.",{"title":120,"path":141,"acronym":6,"category":142,"difficulty":132,"description":143},"\u002Fterms\u002Fr\u002Frender","cloud","Render is another developer-friendly hosting platform that does web services, databases, cron jobs, and static sites all in one place.",{"title":119,"path":145,"acronym":6,"category":108,"difficulty":132,"description":146},"\u002Fterms\u002Fv\u002Fvue","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.",1776518323045]