[{"data":1,"prerenderedAt":252},["ShallowReactive",2],{"term-s\u002Fstate":3,"related-s\u002Fstate":235},{"id":4,"title":5,"acronym":6,"body":7,"category":216,"description":217,"difficulty":218,"extension":219,"letter":220,"meta":221,"navigation":88,"path":222,"related":223,"seo":229,"sitemap":230,"stem":233,"subcategory":6,"__hash__":234},"terms\u002Fterms\u002Fs\u002Fstate.md","State",null,{"type":8,"value":9,"toc":210},"minimark",[10,15,19,23,26,30,199,203,206],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state. When it changes, the screen updates automatically. Without state your app is just a static poster.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"State is mutable data managed by a component or store that, when changed, triggers a re-render. Local state lives inside a component (useState in React, ref\u002Freactive in Vue). Global state is shared across components via stores like Pinia, Redux, or Zustand.",[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\nimport { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  return \u003Cbutton onClick={() => setCount(count + 1)}>{count}\u003C\u002Fbutton>;\n}\n","jsx","",[38,39,40,49,83,90,107,146,193],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F React\n",[41,50,52,56,60,64,67,70,73,77,80],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","import",[41,57,59],{"class":58},"sMK4o"," {",[41,61,63],{"class":62},"sTEyZ"," useState",[41,65,66],{"class":58}," }",[41,68,69],{"class":54}," from",[41,71,72],{"class":58}," '",[41,74,76],{"class":75},"sfazB","react",[41,78,79],{"class":58},"'",[41,81,82],{"class":58},";\n",[41,84,86],{"class":43,"line":85},3,[41,87,89],{"emptyLinePlaceholder":88},true,"\n",[41,91,93,97,101,104],{"class":43,"line":92},4,[41,94,96],{"class":95},"spNyl","function",[41,98,100],{"class":99},"s2Zo4"," Counter",[41,102,103],{"class":58},"()",[41,105,106],{"class":58}," {\n",[41,108,110,113,116,119,122,125,128,131,133,137,141,144],{"class":43,"line":109},5,[41,111,112],{"class":95},"  const",[41,114,115],{"class":58}," [",[41,117,118],{"class":62},"count",[41,120,121],{"class":58},",",[41,123,124],{"class":62}," setCount",[41,126,127],{"class":58},"]",[41,129,130],{"class":58}," =",[41,132,63],{"class":99},[41,134,136],{"class":135},"swJcz","(",[41,138,140],{"class":139},"sbssI","0",[41,142,143],{"class":135},")",[41,145,82],{"class":58},[41,147,149,152,155,158,161,164,167,169,172,175,178,180,183,185,188,190],{"class":43,"line":148},6,[41,150,151],{"class":54},"  return",[41,153,154],{"class":58}," \u003C",[41,156,157],{"class":135},"button",[41,159,160],{"class":95}," onClick",[41,162,163],{"class":58},"={()",[41,165,166],{"class":95}," =>",[41,168,124],{"class":99},[41,170,171],{"class":62},"(count ",[41,173,174],{"class":58},"+",[41,176,177],{"class":139}," 1",[41,179,143],{"class":62},[41,181,182],{"class":58},"}>{",[41,184,118],{"class":62},[41,186,187],{"class":58},"}\u003C\u002F",[41,189,157],{"class":135},[41,191,192],{"class":58},">;\n",[41,194,196],{"class":43,"line":195},7,[41,197,198],{"class":58},"}\n",[11,200,202],{"id":201},"when-youll-hear-this","When You'll Hear This",[16,204,205],{},"\"The modal's open\u002Fclosed is local state — don't put it in the global store.\" \u002F \"When the state updates the component re-renders.\"",[207,208,209],"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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":211},[212,213,214,215],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":201,"depth":51,"text":202},"frontend","State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.","beginner","md","s",{},"\u002Fterms\u002Fs\u002Fstate",[224,225,226,227,228],"Props","Reactive","Hook","Composable","Component",{"title":5,"description":217},{"changefreq":231,"priority":232},"weekly",0.7,"terms\u002Fs\u002Fstate","Kua8fokJsGWheTToCMwRXwwW1ghXEkLqDLRacsKfKIE",[236,239,243,246,249],{"title":228,"path":237,"acronym":6,"category":216,"difficulty":218,"description":238},"\u002Fterms\u002Fc\u002Fcomponent","A component is a self-contained LEGO brick for your UI.",{"title":227,"path":240,"acronym":6,"category":216,"difficulty":241,"description":242},"\u002Fterms\u002Fc\u002Fcomposable","intermediate","Composables are Vue's version of React hooks — reusable functions that bundle reactive state and logic together.",{"title":226,"path":244,"acronym":6,"category":216,"difficulty":241,"description":245},"\u002Fterms\u002Fh\u002Fhook","Hooks are special functions in React that let function components use superpowers like state and lifecycle that used to be class-only.",{"title":224,"path":247,"acronym":6,"category":216,"difficulty":218,"description":248},"\u002Fterms\u002Fp\u002Fprops","Props are how you pass information INTO a component, like giving a coffee machine its settings.",{"title":225,"path":250,"acronym":6,"category":216,"difficulty":241,"description":251},"\u002Fterms\u002Fr\u002Freactive","Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic.",1776518315220]