[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Fthe-end-of-the-virtual-dom-why-solidjs-signals-ensure-o1-performance-without-re-renders":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"post":38,"related":763,"translations":834,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":47,"views":48,"author":49,"category":51,"tags":52,"contentJson":62,"metaTitle":760,"metaDescription":761,"updatedAt":762},"009222f1-cec3-42f9-a547-c42b20545e8b","the-end-of-the-virtual-dom-why-solidjs-signals-ensure-o1-performance-without-re-renders","The end of the Virtual DOM: why SolidJS Signals ensure O(1) performance without re-renders","Discover how SolidJS fine-grained reactivity and Signals are changing the front-end by eliminating the Virtual DOM and the cost of re-renders.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1781938263280-featured-zbiz78.webp",false,"eae1bf5f-3f05-4c61-8b4f-1f0b4308f028","2026-06-20T06:56:18.540866+00:00",10,0,{"name":50,"avatar":9},"Genildo Souza",{"slug":13,"name":14,"color":15},[53,56,59],{"slug":54,"name":55},"javascript","JavaScript",{"slug":57,"name":58},"performance","Performance",{"slug":60,"name":61},"typescript","TypeScript",{"type":63,"content":64},"doc",[65,76,84,95,101,107,109,116,122,128,134,149,155,160,169,182,188,194,213,219,225,231,243,254,265,281,288,294,300,319,337,344,350,356,363,369,375,381,542,563,578,584,590,596,602,624,630,636,660,667,673,679,685,691,703,710,727,733,739,745,751,752],{"type":66,"attrs":67},"summaryBox",{"id":68,"items":69,"title":75},"sum_kj8z6gyl",[70,71,72,73,74],"The Virtual DOM sacrifices performance by re-rendering entire components to compare changes in the element tree.","SolidJS uses fine-grained reactivity, where each signal is connected directly to the DOM node, eliminating the need for diffing.","Components in SolidJS are executed only once, drastically reducing unnecessary processing during updates.","The Signals system eliminates the need for manual dependency arrays, avoiding common bugs related to closures and stale states.","The Signals-based architecture offers update efficiency close to O(1), surpassing the complexity of stores and observables.","The Rise of Signals in Front-end",{"type":77,"attrs":78,"content":80},"paragraph",{"id":79},"p_caljf7co",[81],{"text":82,"type":83},"There is a strange truth about the last decade of front-end development: we have dedicated our most refined technical intelligence to making a hack faster.","text",{"type":77,"attrs":85,"content":87},{"id":86},"p_e32f6hlh",[88,90],{"text":89,"type":83},"The hack was the Virtual DOM. When your data changes, React rebuilds a copy of your interface in memory, compares it with the previous copy, finds the difference, and applies the adjustment to the actual screen. It is ingenious, and React made it fast. But all this dance exists to answer a question that another architecture does not even need to ask: ",{"text":91,"type":83,"marks":92},"what changed?",[93],{"type":94},"italic",{"type":77,"attrs":96,"content":98},{"id":97},"p_trry88ws",[99],{"text":100,"type":83},"Ryan Carniato asked the better question. What if the code simply knew what changed the instant it changed, and updated only that point? He spent a decade building the answer, named it SolidJS, and, in 2026, the rest of the industry quietly admitted he was right. Signals — the idea at the heart of Solid — are entering JavaScript itself.",{"type":77,"attrs":102,"content":104},{"id":103},"p_m30ddlgb",[105],{"text":106,"type":83},"This is the story of how “not comparing nodes” went from heresy to standard.",{"type":108},"horizontalRule",{"type":110,"attrs":111,"content":113},"heading",{"id":112,"level":36},"h_tc14wlom",[114],{"text":115,"type":83},"The Virtual DOM fallacy",{"type":77,"attrs":117,"content":119},{"id":118},"p_lo69jj09",[120],{"text":121,"type":83},"The Virtual DOM made a reasonable bet. It re-renders the entire component on every change, compares the new tree with the old one, and applies only what differs. In exchange, you get a clean mental model: your interface is a function of your state, and you never touch the DOM manually. This model is a big part of why React won, and it deserves the credit.",{"type":123,"attrs":124},"svgDiagram",{"id":125,"svg":126,"label":127},"svg_qc3gc1sl","\u003Csvg viewBox=\"0 0 364 405\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" font-family=\"system-ui, -apple-system, sans-serif\">\n\u003Cdefs>\u003Cmarker id=\"dgArrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\">\u003Cpath d=\"M 0 1 L 9 5 L 0 9 z\" fill=\"#64748b\"\u002F>\u003C\u002Fmarker>\u003C\u002Fdefs>\n\u003Crect x=\"0\" y=\"0\" width=\"364\" height=\"405\" fill=\"#ffffff\" rx=\"0\"\u002F>\n\u003Ctext x=\"182\" y=\"36\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"16\" font-weight=\"700\" fill=\"#0f172a\">Funcionamento do Virtual DOM\u003C\u002Ftext>\n\u003Cpath d=\"M 181.734375 143 C 181.734375 171, 181.734375 171, 181.734375 199\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"181.734375\" y=\"171\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"11\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">nova vs antiga\u003C\u002Ftext>\n\u003Cpath d=\"M 181.734375 262 C 181.734375 290, 181.734375 290, 181.734375 318\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"181.734375\" y=\"290\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"11\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">aplica diferenças\u003C\u002Ftext>\n\u003Crect x=\"24.6875\" y=\"80\" width=\"314.09375\" height=\"63\" rx=\"10\" fill=\"#ffffff\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"181.734375\" y=\"101.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Reconstrução da árvore do componente\u003C\u002Ftext>\n\u003Ctext x=\"181.734375\" y=\"123\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Re-renderiza componente inteiro a cada mudança\u003C\u002Ftext>\n\u003Crect x=\"24\" y=\"199\" width=\"315.46875\" height=\"63\" rx=\"10\" fill=\"#ffffff\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"181.734375\" y=\"220.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Comparação entre árvore nova e antiga\u003C\u002Ftext>\n\u003Ctext x=\"181.734375\" y=\"242\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Identifica diferenças para atualizar só o necessário\u003C\u002Ftext>\n\u003Crect x=\"24.9375\" y=\"318\" width=\"313.59375\" height=\"63\" rx=\"10\" fill=\"#ffffff\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"181.734375\" y=\"339.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Aplicação das mudanças no DOM real\u003C\u002Ftext>\n\u003Ctext x=\"181.734375\" y=\"361\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Atualiza o DOM real com as diferenças detectadas\u003C\u002Ftext>\n\u003C\u002Fsvg>","How the Virtual DOM works",{"type":77,"attrs":129,"content":131},{"id":130},"p_hkxl7b04",[132],{"text":133,"type":83},"But the bet has a cost. To find what changed, the engine first needs to re-check everything that did not change. On a busy screen at sixty frames per second, this means burning cycles re-rendering and re-comparing nodes that were never going to move.",{"type":135,"attrs":136,"content":140},"callout",{"id":137,"type":138,"title":139},"call_ip3c43iz","tip","Ryan Carniato, creator of SolidJS",[141],{"type":77,"attrs":142,"content":144},{"id":143},"p_wr7vqcfj",[145],{"text":146,"type":83,"marks":147},"React is super fast here — but if you send the entire page again and again, you have already lost.",[148],{"type":94},{"type":77,"attrs":150,"content":152},{"id":151},"p_5umngg8u",[153],{"text":154,"type":83},"Solid made the opposite bet, called fine-grained reactivity. Instead of rebuilding a tree and comparing it, Solid connects each piece of state directly to the single DOM node it controls. Change the state, and that node updates. There is no tree to traverse, no diff to calculate, and no re-rendering.",{"type":123,"attrs":156},{"id":157,"svg":158,"label":159},"svg_si7ik673","\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"-10 -10 360 663\" font-family=\"system-ui, -apple-system, sans-serif\">\n\u003Cdefs>\u003Cmarker id=\"dgArrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\">\u003Cpath d=\"M 0 1 L 9 5 L 0 9 z\" fill=\"#64748b\"\u002F>\u003C\u002Fmarker>\u003C\u002Fdefs>\n\u003Crect x=\"0\" y=\"0\" width=\"340\" height=\"643\" fill=\"#ffffff\" rx=\"0\"\u002F>\n\u003Ctext x=\"170\" y=\"36\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"16\" font-weight=\"700\" fill=\"#0f172a\">Fluxo da reatividade fina no SolidJS\u003C\u002Ftext>\n\u003Cpath d=\"M 169.5625 262 C 169.5625 290, 169.5625 290, 169.5625 318\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"169.5625\" y=\"290\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">liga a\u003C\u002Ftext>\n\u003Cpath d=\"M 169.5625 381 C 169.5625 409, 169.5703125 409, 169.5703125 437\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"169.56640625\" y=\"409\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">dispara\u003C\u002Ftext>\n\u003Cpath d=\"M 169.5625 143 C 169.5625 171, 169.5625 171, 169.5625 199\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"169.5625\" y=\"171\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">cria\u003C\u002Ftext>\n\u003Cpath d=\"M 169.5625 143 C 169.5625 171, 169.5703125 528, 169.5703125 556\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"169.56640625\" y=\"360.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">define\u003C\u002Ftext>\n\u003Cpath d=\"M 169.5703125 500 C 169.5703125 528, 169.5703125 528, 169.5703125 556\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"169.5703125\" y=\"528\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">mantém\u003C\u002Ftext>\n\u003Crect x=\"74.15625\" y=\"199\" width=\"190.8125\" height=\"63\" rx=\"10\" fill=\"#ffffff\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"169.5625\" y=\"220.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Estado (Signal)\u003C\u002Ftext>\n\u003Ctext x=\"169.5625\" y=\"242\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Pedaço de estado individual\u003C\u002Ftext>\n\u003Crect x=\"73.703125\" y=\"318\" width=\"191.71875\" height=\"63\" rx=\"10\" fill=\"#ffffff\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"169.5625\" y=\"339.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Ligação direta\u003C\u002Ftext>\n\u003Ctext x=\"169.5625\" y=\"380.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Estado ligado ao nó do DOM\u003C\u002Ftext>\n\u003Crect x=\"73.8125\" y=\"437\" width=\"191.515625\" height=\"63\" rx=\"10\" fill=\"#ffffff\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"169.5703125\" y=\"458.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Atualização no nó DOM\u003C\u002Ftext>\n\u003Ctext x=\"169.5703125\" y=\"480\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Só o nó afetado é atualizado\u003C\u002Ftext>\n\u003Crect x=\"53.5625\" y=\"80\" width=\"232\" height=\"63\" rx=\"10\" fill=\"#ffffff\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"169.5625\" y=\"101.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Componente monta uma vez\u003C\u002Ftext>\n\u003Ctext x=\"169.5625\" y=\"123\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Função executada só na montagem\u003C\u002Ftext>\n\u003Crect x=\"24\" y=\"556\" width=\"291.140625\" height=\"63\" rx=\"10\" fill=\"#ffffff\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"169.5703125\" y=\"577.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Sem re-renderização\u003C\u002Ftext>\n\u003Ctext x=\"169.5703125\" y=\"599\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Não há reexecução da função do componente\u003C\u002Ftext>\n\u003C\u002Fsvg>","Flow of fine-grained reactivity in SolidJS",{"type":161,"attrs":162,"content":166},"codeBlock",{"id":163,"language":164,"highlighted":165},"code_bjog5w2r","jsx","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createSignal } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"solid-js\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Counter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setCount\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Este componente roda UMA vez. Só o nó de texto se atualiza.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setCount\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)}>{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[167],{"text":168,"type":83},"import { createSignal } from \"solid-js\";\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n  \u002F\u002F Este componente roda UMA vez. Só o nó de texto se atualiza.\n  return \u003Cbutton onClick={() => setCount(count() + 1)}>{count()}\u003C\u002Fbutton>;\n}",{"type":77,"attrs":170,"content":172},{"id":171},"p_by7o0fmm",[173,175,180],{"text":174,"type":83},"Read the comment again, because it is the entire revolution in one line: ",{"text":176,"type":83,"marks":177},"the component runs once.",[178],{"type":179},"bold",{"text":181,"type":83}," React calls your component function again on every render. Solid calls it a single time, sets up the wiring, and from then on, the signals do the work.",{"type":110,"attrs":183,"content":185},{"id":184,"level":36},"h_6frzds1h",[186],{"text":187,"type":83},"A brief history of reactivity",{"type":77,"attrs":189,"content":191},{"id":190},"p_5kb0jtln",[192],{"text":193,"type":83},"It helps to see where this fits in. Reactivity in the front-end has gone through three eras, and each one traded one pain for another.",{"type":195,"attrs":196},"speedCards",{"id":197,"cards":198,"title":211,"caption":212},"speed_0mp7vsjs",[199,203,207],{"label":200,"value":201,"detail":202},"2005–2012","Callbacks","Rápido e direto — mas o “callback hell” crescia junto com a aplicação.",{"label":204,"value":205,"detail":206},"2013–2018","Virtual DOM","Previsível e declarativo — mas pesado em memória e CPU pelo diffing constante.",{"label":208,"value":209,"detail":210},"2019–today","Signals","Atualizações finas em tempo quase constante — previsível E rápido.","Three eras of reactivity","Each era solved the problem of the previous one and created its own. Signals were the first to refuse the trade-off.",{"type":77,"attrs":214,"content":216},{"id":215},"p_xnpxaql7",[217],{"text":218,"type":83},"The first era was fast and tangled. The second untangled the code and paid in memory. Signals are the first model to refuse the trade-off — you get the declarative clarity of the Virtual DOM era without needing to re-render the world for it.",{"type":110,"attrs":220,"content":222},{"id":221,"level":36},"h_38bzaiox",[223],{"text":224,"type":83},"The anatomy of a signal",{"type":77,"attrs":226,"content":228},{"id":227},"p_2yk9qjq0",[229],{"text":230,"type":83},"Reduce Solid to the bone and you find three primitives. Learn these three and you have learned the framework.",{"type":77,"attrs":232,"content":234},{"id":233},"p_giclejx9",[235,237,241],{"text":236,"type":83},"A ",{"text":238,"type":83,"marks":239},"Signal",[240],{"type":179},{"text":242,"type":83}," is the source of state. You read it, you write it — and, this is the part that matters, it tracks on its own who reads it. No dependency arrays.",{"type":77,"attrs":244,"content":246},{"id":245},"p_znp3mnz1",[247,248,252],{"text":236,"type":83},{"text":249,"type":83,"marks":250},"Memo",[251],{"type":179},{"text":253,"type":83}," (computed) is a derived value. It is lazy and pure: it recalculates only when something it depends on changes, and only when someone actually reads it.",{"type":77,"attrs":255,"content":257},{"id":256},"p_naumct65",[258,259,263],{"text":236,"type":83},{"text":260,"type":83,"marks":261},"Effect",[262],{"type":179},{"text":264,"type":83}," is the side effect. It is the only place with permission to touch the outside world — the DOM, the console, the network — and it re-executes only when its inputs change.",{"type":195,"attrs":266},{"id":267,"cards":268,"title":279,"caption":280},"speed_19w7yved",[269,272,276],{"label":238,"value":270,"detail":271},"Source of state","Rastreamento automático de quem lê, sem arrays de dependência.",{"label":273,"value":274,"detail":275},"Computed","Derived value","Memoização pura e preguiçosa (lazy): só recalcula quando lido e quando muda.",{"label":260,"value":277,"detail":278},"Side effect","Atualização cirúrgica direta no DOM, apenas quando as entradas mudam.","Signal, Computed and Effect","The three primitives of a signal-first architecture. The component runs only once.",{"type":161,"attrs":282,"content":285},{"id":283,"language":164,"highlighted":284},"code_2mhpcd69","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createSignal, createMemo, createEffect } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"solid-js\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">preco\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setPreco\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);      \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Signal: a origem\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> comImposto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createMemo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> preco\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Memo: derivado, lazy\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">createEffect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Total:\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">comImposto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">());            \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Effect: o efeito colateral\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Sem arrays de dependência. O Solid rastreia o que você leu.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[286],{"text":287,"type":83},"import { createSignal, createMemo, createEffect } from \"solid-js\";\n\nconst [preco, setPreco] = createSignal(100);      \u002F\u002F Signal: a origem\nconst comImposto = createMemo(() => preco() * 1.1); \u002F\u002F Memo: derivado, lazy\n\ncreateEffect(() => {\n  console.log(\"Total:\", comImposto());            \u002F\u002F Effect: o efeito colateral\n});\n\u002F\u002F Sem arrays de dependência. O Solid rastreia o que você leu.",{"type":77,"attrs":289,"content":291},{"id":290},"p_bhnuuqdo",[292],{"text":293,"type":83},"That last comment is the silent superpower, and it deserves its own section.",{"type":110,"attrs":295,"content":297},{"id":296,"level":36},"h_wphom32d",[298],{"text":299,"type":83},"The end of the dependency array",{"type":77,"attrs":301,"content":303},{"id":302},"p_8ns70e6q",[304,306,311,313,317],{"text":305,"type":83},"If you write React, you know the tax. The ",{"text":307,"type":83,"marks":308},"useEffect",[309],{"type":310},"code",{"text":312,"type":83}," and the ",{"text":314,"type":83,"marks":315},"useMemo",[316],{"type":310},{"text":318,"type":83}," force you to list dependencies by hand:",{"type":135,"attrs":320,"content":324},{"id":321,"type":322,"title":323},"call_gpqzxizm","warning","Beware of manual dependency arrays in React",[325,331],{"type":77,"attrs":326,"content":328},{"id":327},"p_2uieet31",[329],{"text":330,"type":83},"In React, hooks like useEffect and useMemo require you to manually list all dependencies in an array. Forgetting an item can cause hard-to-detect bugs, such as stale closures, missed updates, or renders that do not happen.",{"type":77,"attrs":332,"content":334},{"id":333},"p_rfny9wq9",[335],{"text":336,"type":83},"This problem is common because React cannot automatically identify which values were used inside the hook, making manual control error-prone.",{"type":161,"attrs":338,"content":341},{"id":339,"language":164,"highlighted":340},"code_ksnjy7v7","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F React: você mantém o array de dependências na mão\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">useEffect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  sync\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(count, query);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}, [count, query]); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F esqueça um item e nasce um valor velho ou um update perdido\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[342],{"text":343,"type":83},"\u002F\u002F React: você mantém o array de dependências na mão\nuseEffect(() => {\n  sync(count, query);\n}, [count, query]); \u002F\u002F esqueça um item e nasce um valor velho ou um update perdido",{"type":77,"attrs":345,"content":347},{"id":346},"p_6hj86j5k",[348],{"text":349,"type":83},"Forget an item and you introduce a bug — a stale closure, a missed update, a render that never fires. It is one of the most common bugs in modern React, and it exists because the framework cannot see which values you actually used.",{"type":77,"attrs":351,"content":353},{"id":352},"p_00ss2s3d",[354],{"text":355,"type":83},"Solid can. Its effects observe what you read while they run, and the array disappears:",{"type":161,"attrs":357,"content":360},{"id":358,"language":164,"highlighted":359},"code_y0vadv8o","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Solid: o runtime detecta o que foi usado\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">createEffect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  sync\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(), \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">query\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F sem array, sem bug\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[361],{"text":362,"type":83},"\u002F\u002F Solid: o runtime detecta o que foi usado\ncreateEffect(() => {\n  sync(count(), query()); \u002F\u002F sem array, sem bug\n});",{"type":77,"attrs":364,"content":366},{"id":365},"p_b4raf90r",[367],{"text":368,"type":83},"Hold that thought. Soon it will stop being a Solid feature and become a JavaScript feature.",{"type":110,"attrs":370,"content":372},{"id":371,"level":36},"h_y4urpgy6",[373],{"text":374,"type":83},"The physical cost",{"type":77,"attrs":376,"content":378},{"id":377},"p_00qp5f36",[379],{"text":380,"type":83},"Performance arguments are easy to dismiss, so look at the mechanism, not the marketing. The question is how the cost of an update grows as your application grows.",{"type":382,"attrs":383,"content":385},"table",{"id":384},"tbl_istf8lpx",[386,427,466,504],{"type":387,"content":388},"tableRow",[389,400,409,418],{"type":390,"attrs":391,"content":393},"tableHeader",{"align":9,"colspan":392,"rowspan":392,"colwidth":9},1,[394],{"type":77,"attrs":395,"content":397},{"id":396},"p_3frcqa76",[398],{"text":399,"type":83},"Architecture",{"type":390,"attrs":401,"content":402},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[403],{"type":77,"attrs":404,"content":406},{"id":405},"p_5eucsudc",[407],{"text":408,"type":83},"Update Cost",{"type":390,"attrs":410,"content":411},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[412],{"type":77,"attrs":413,"content":415},{"id":414},"p_utzcjml9",[416],{"text":417,"type":83},"Complexity",{"type":390,"attrs":419,"content":420},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[421],{"type":77,"attrs":422,"content":424},{"id":423},"p_vduje5fl",[425],{"text":426,"type":83},"Need for Manual Cleanup",{"type":387,"content":428},[429,439,448,457],{"type":430,"attrs":431,"content":432},"tableCell",{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[433],{"type":77,"attrs":434,"content":436},{"id":435},"p_dpv4fpia",[437],{"text":438,"type":83},"Store (NgRx)",{"type":430,"attrs":440,"content":441},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[442],{"type":77,"attrs":443,"content":445},{"id":444},"p_glubci5x",[446],{"text":447,"type":83},"O(n)",{"type":430,"attrs":449,"content":450},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[451],{"type":77,"attrs":452,"content":454},{"id":453},"p_ro8ns612",[455],{"text":456,"type":83},"Work proportional to the number of subscribers",{"type":430,"attrs":458,"content":459},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[460],{"type":77,"attrs":461,"content":463},{"id":462},"p_tb0f6c65",[464],{"text":465,"type":83},"Yes",{"type":387,"content":467},[468,477,486,495],{"type":430,"attrs":469,"content":470},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[471],{"type":77,"attrs":472,"content":474},{"id":473},"p_ks5uu57b",[475],{"text":476,"type":83},"Observables (RxJS)",{"type":430,"attrs":478,"content":479},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[480],{"type":77,"attrs":481,"content":483},{"id":482},"p_j4okgdrf",[484],{"text":485,"type":83},"O(n²)",{"type":430,"attrs":487,"content":488},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[489],{"type":77,"attrs":490,"content":492},{"id":491},"p_5unhfqb0",[493],{"text":494,"type":83},"Can grow quadratically with long chains",{"type":430,"attrs":496,"content":497},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[498],{"type":77,"attrs":499,"content":501},{"id":500},"p_0e2m9d7d",[502],{"text":503,"type":83},"Yes, to avoid leaks",{"type":387,"content":505},[506,515,524,533],{"type":430,"attrs":507,"content":508},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[509],{"type":77,"attrs":510,"content":512},{"id":511},"p_lqr8uw94",[513],{"text":514,"type":83},"Signals (SolidJS)",{"type":430,"attrs":516,"content":517},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[518],{"type":77,"attrs":519,"content":521},{"id":520},"p_c722m4qn",[522],{"text":523,"type":83},"O(1)",{"type":430,"attrs":525,"content":526},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[527],{"type":77,"attrs":528,"content":530},{"id":529},"p_27dkcls7",[531],{"text":532,"type":83},"Update propagates only to exact computations",{"type":430,"attrs":534,"content":535},{"align":9,"colspan":392,"rowspan":392,"colwidth":9},[536],{"type":77,"attrs":537,"content":539},{"id":538},"p_lxap9mae",[540],{"text":541,"type":83},"No",{"type":77,"attrs":543,"content":545},{"id":544},"p_1bcg8syd",[546,548,551,553,556,558,561],{"text":547,"type":83},"With a centralized store (the NgRx pattern), an update tends to cost about ",{"text":447,"type":83,"marks":549},[550],{"type":310},{"text":552,"type":83}," — work proportional to the number of subscribers. With long chains of observables (the RxJS pattern), it can rise to ",{"text":485,"type":83,"marks":554},[555],{"type":310},{"text":557,"type":83},", and each subscription is something you need to remember to terminate, or it leaks. With signals, an update stays close to ",{"text":523,"type":83,"marks":559},[560],{"type":310},{"text":562,"type":83}," — the change propagates to the exact computations that read it, and nothing else.",{"type":195,"attrs":564},{"id":565,"cards":566,"title":576,"caption":577},"speed_ll0den71",[567,570,573],{"label":438,"value":568,"detail":569},"~O(n)","Memória cresce de forma linear. Subscrições exigem limpeza manual.",{"label":476,"value":571,"detail":572},"~O(n²)","“Memory churn” de cadeias aninhadas. Subscrições exigem limpeza manual.",{"label":209,"value":574,"detail":575},"~O(1)","Memória plana ou sublinear. Limpeza automática: zero vazamentos esquecidos.","The duel of architectures","How the cost of an update grows — and who needs manual cleanup.",{"type":77,"attrs":579,"content":581},{"id":580},"p_6nkd6ocp",[582],{"text":583,"type":83},"The practical result is the kind of unglamorous victory that the user actually feels: fewer frame drops, less GPU usage, and no slow leaks from forgotten subscriptions. Signals avoid the “memory churn” that chains of nested observables create, and they clean themselves up when their owner is destroyed.",{"type":110,"attrs":585,"content":587},{"id":586,"level":36},"h_z6w32ulo",[588],{"text":589,"type":83},"An ecosystem ready for production",{"type":77,"attrs":591,"content":593},{"id":592},"p_0tx6pjl6",[594],{"text":595,"type":83},"None of this matters if the framework is a weekend project, so be clear about its size. Solid passes 1.5 million weekly downloads and leads the State of JS satisfaction surveys year after year. Its creator, Ryan Carniato, is now a principal open source engineer at Netlify and has been refining this same reactive model for over a decade. This longevity is rare, and it shows: the core of Solid is a philosophy, not a fad.",{"type":77,"attrs":597,"content":599},{"id":598},"p_kubqvai7",[600],{"text":601,"type":83},"The surrounding stack is complete:",{"type":195,"attrs":603},{"id":604,"cards":605,"title":622,"caption":623},"speed_udu2k6x4",[606,610,614,618],{"label":607,"value":608,"detail":609},"SolidStart","Meta-framework","Isomórfico: file-based routing, server functions, SSR nativo, HTML streaming e dados sobre a Fetch API.",{"label":611,"value":612,"detail":613},"Solid Primitives","Reactive utilities","De createGeolocation e createIntersectionObserver a debounce e throttle.",{"label":615,"value":616,"detail":617},"Kobalte & Corvu","Headless UI","Componentes acessíveis (WAI-ARIA) que gerenciam foco e teclado. Você traz o seu CSS, zero lock-in.",{"label":619,"value":620,"detail":621},"Modular Forms","Surgical validation","Valida um campo em tempo real sem re-renderizar o resto do formulário.","The architectural foundation","From community-maintained libraries to an isomorphic meta-framework.",{"type":110,"attrs":625,"content":627},{"id":626,"level":36},"h_p3frdfvj",[628],{"text":629,"type":83},"Beyond Signals: the asynchronous chapter",{"type":77,"attrs":631,"content":633},{"id":632},"p_blf7j7x9",[634],{"text":635,"type":83},"This is where most analyses age poorly. They treat signals as the finish line. Carniato treats them as chapter one.",{"type":77,"attrs":637,"content":639},{"id":638},"p_ckb6h9qm",[640,642,646,648,652,654,658],{"text":641,"type":83},"Signals solved ",{"text":643,"type":83,"marks":644},"synchronous",[645],{"type":94},{"text":647,"type":83}," reactivity — the moment-to-moment flow of state to the screen. The next hard problem is ",{"text":649,"type":83,"marks":650},"asynchronous",[651],{"type":94},{"text":653,"type":83}," reactivity: data arriving over time, loading states, race conditions, the whole fetch mess. ",{"text":655,"type":83,"marks":656},"SolidJS 2.0",[657],{"type":179},{"text":659,"type":83},", in beta throughout 2026, makes async a first-class citizen. A computation can return a Promise, and the reactive graph handles suspension and resumption on its own. You hand a promise directly to a memo. Suspense has been rebuilt to manage only initial readiness, and batching is now deterministic.",{"type":161,"attrs":661,"content":664},{"id":662,"language":164,"highlighted":663},"code_ilj0mwp4","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Solid 2.0: async é cidadão de primeira classe\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> user\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createAsync\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> getUser\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(props.id));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">user\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()?.name}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F O grafo reativo cuida da suspensão e da retomada por você.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[665],{"text":666,"type":83},"\u002F\u002F Solid 2.0: async é cidadão de primeira classe\nconst user = createAsync(() => getUser(props.id));\n\nreturn \u003Ch1>{user()?.name}\u003C\u002Fh1>;\n\u002F\u002F O grafo reativo cuida da suspensão e da retomada por você.",{"type":77,"attrs":668,"content":670},{"id":669},"p_8swy7n8d",[671],{"text":672,"type":83},"This is the part that the “signals are over” crowd does not see. The model that started by tracking a number is now learning to track time.",{"type":110,"attrs":674,"content":676},{"id":675,"level":36},"h_zr8ygbge",[677],{"text":678,"type":83},"The war ends in the language",{"type":77,"attrs":680,"content":682},{"id":681},"p_yk3d2fj8",[683],{"text":684,"type":83},"Now step back and see where everyone ended up.",{"type":77,"attrs":686,"content":688},{"id":687},"p_sxcqknq4",[689],{"text":690,"type":83},"Vue’s Vapor Mode removes the Virtual DOM. Svelte 5 swapped compiler magic for runes — explicit reactivity, looking like a signal. Angular rebuilt its change detection on signals and made zoneless the way forward. Three different syntaxes, all orbiting the same idea that Solid delivered years earlier.",{"type":77,"attrs":692,"content":694},{"id":693},"p_tqwfbl63",[695,697,701],{"text":696,"type":83},"But the real news is not that they copied in parallel. It is that they are ",{"text":698,"type":83,"marks":699},"collaborating to standardize",[700],{"type":179},{"text":702,"type":83},". The maintainers of Angular, Vue, Svelte, Solid, Preact, Qwik, MobX, Ember, RxJS, and more are working together on a TC39 proposal to add signals to JavaScript itself. It has reached Stage 1 and is modeled on purpose after the Promises\u002FA+ effort, which aligned the ecosystem before TC39 standardized Promises in ES2015. A polyfill already exists.",{"type":161,"attrs":704,"content":707},{"id":705,"language":54,"highlighted":706},"code_un3m14jh","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F A proposta do TC39: signals na linguagem, sem framework\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Signal.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">State\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> double\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Signal.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> count.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">count.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">double.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F 2\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[708],{"text":709,"type":83},"\u002F\u002F A proposta do TC39: signals na linguagem, sem framework\nconst count = new Signal.State(0);\nconst double = new Signal.Computed(() => count.get() * 2);\n\ncount.set(1);\ndouble.get(); \u002F\u002F 2",{"type":135,"attrs":711,"content":714},{"id":712,"type":138,"title":713},"call_v8naptyq","Reactivity becomes a language feature",[715],{"type":77,"attrs":716,"content":718},{"id":717},"p_1zl3zo7x",[719,721,725],{"text":720,"type":83},"The runtime detects which values a computation reads, so the dependency array — the thing we just complained about — disappears for everyone, in every framework, at the same time. What ended the reactivity war was not one framework winning. It was the ",{"text":722,"type":83,"marks":723},"standard",[724],{"type":179},{"text":726,"type":83},".",{"type":110,"attrs":728,"content":730},{"id":729,"level":36},"h_v06v1hka",[731],{"text":732,"type":83},"The argument that won",{"type":77,"attrs":734,"content":736},{"id":735},"p_3lkmz8wc",[737],{"text":738,"type":83},"A decade ago, “not comparing the DOM” sounded like a maneuver — a clever trick for a niche library with passionate followers. Today it is the standard direction of the entire field, and it is being written into the language upon which every framework is built.",{"type":77,"attrs":740,"content":742},{"id":741},"p_uaazkbuh",[743],{"text":744,"type":83},"Solid did not just deliver a fast interface library. It argued, patiently and for ten years, that the Virtual DOM was a detour, and that the screen should update exactly what changed and nothing else. One person held that line long enough for the rest of the industry to arrive at the same place. The argument won.",{"type":77,"attrs":746,"content":748},{"id":747},"p_e290nrl1",[749],{"text":750,"type":83},"So, the next time a framework tells you it got faster, ask the better question — the one Carniato asked first. Faster at what? If the answer is “faster at re-checking the parts that never changed,” you already know there was another path.",{"type":108},{"type":77,"attrs":753,"content":755},{"id":754},"p_chkoj2cn",[756],{"text":757,"type":83,"marks":758},"Written in June 2026. The versions and proposals cited — SolidJS 2.0 Beta's first-class async, SolidStart, and the TC39 Signals proposal (Stage 1) — reflect the state of the front-end ecosystem at that date. Performance comparisons describe the architectural behavior of each model, not a specific benchmark.",[759],{"type":94},"The SolidJS Signals Revolution: The End of Virtual DOM","Understand how SolidJS Signals outperform the Virtual DOM, eliminating unnecessary re-renders and simplifying front-end reactivity.","2026-08-24T14:53:53.315534+00:00",[764,786,804,818],{"id":765,"slug":766,"title":767,"excerpt":768,"image":769,"featured":770,"groupId":771,"publishedAt":772,"readingTime":47,"views":48,"author":773,"category":774,"tags":775},"81f24e9a-fc6b-47d0-beb9-d00a6137ed99","framework-vs-sdk-who-calls-whom","Framework vs SDK: Who Calls Whom","Most developers memorize names, but few understand the mechanism. Here is the simple rule to tell a framework from an SDK and level up your debugging.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1787491947099-featured-ikba2e.jpg",true,"0ccb21eb-6459-40ed-8110-227836e9bb74","2026-08-23T13:15:25.439194+00:00",{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[776,777,780,783],{"slug":54,"name":55},{"slug":778,"name":779},"python","Python",{"slug":781,"name":782},"runtime","Runtime",{"slug":784,"name":785},"sdk","Sdk",{"id":787,"slug":788,"title":789,"excerpt":790,"image":791,"featured":44,"groupId":792,"publishedAt":793,"readingTime":794,"views":795,"author":796,"category":797,"tags":798},"c2d6b1ca-29bf-401f-8ab9-a1f828504d0b","microfrontends-with-angular-and-nx-what-nobody-tells-you","Microfrontends with Angular and Nx: what nobody tells you","Every tutorial teaches how to set up microfrontends in minutes, but few reveal the architectural chaos that emerges after months of production deploys.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785206853570-featured-zoyhgn.webp","3368e1b2-b6de-4e94-a3d4-294fae8ade13","2026-08-03T01:42:48.969355+00:00",15,5,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[799,802,803],{"slug":800,"name":801},"angular","Angular",{"slug":54,"name":55},{"slug":60,"name":61},{"id":805,"slug":806,"title":807,"excerpt":808,"image":809,"featured":44,"groupId":810,"publishedAt":811,"readingTime":812,"views":47,"author":813,"category":814,"tags":815},"36440333-311c-4081-92e6-030a04a38fed","astro-island-architecture-performance-and-where-the-framework-truly-fits","Astro: Island Architecture, Performance, and Where the Framework Truly Fits","Astro challenges the modern web status quo by prioritizing static HTML and isolating interactivity into independent, lightweight code islands.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785721161920-featured-a5vzkb.webp","cb62459e-7ace-43d3-a545-661c5695e925","2026-08-03T01:00:45.280114+00:00",38,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[816,817],{"slug":54,"name":55},{"slug":60,"name":61},{"id":819,"slug":820,"title":821,"excerpt":822,"image":823,"featured":44,"groupId":824,"publishedAt":825,"readingTime":826,"views":48,"author":827,"category":828,"tags":829},"633b6488-2a90-4632-86a5-9cff7ed52f08","javascript-event-loop-the-heart-of-non-blocking-concurrency-revisited-in-2025","JavaScript Event Loop: The Heart of Non-Blocking Concurrency — Revisited in 2025","The Event Loop is not just a simple loop, but a sophisticated coordination mechanism between Call Stack, queues, and runtime. Essential for JS concurrency, it enables thousands of asynchronous operations without blocking the UI. This guide explores its structure, differences between Node.js and browsers, common bugs, advanced techniques, and 2025 trends like Structured Concurrency and scheduler.yield().","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1772847201637-featured-oreiro.jpeg","df6ca967-8130-4b2d-bcac-3532a150131e","2026-07-26T18:54:25.359533+00:00",6,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[830,831],{"slug":54,"name":55},{"slug":832,"name":833},"nodejs","Node.js",{"en":40,"pt":835},"o-fim-do-virtual-dom-por-que-os-signals-do-solidjs-garantem-performance-o1-sem-re-renderizacoes"]