[{"data":1,"prerenderedAt":262},["ShallowReactive",2],{"term-s\u002Fstate-management":3,"related-s\u002Fstate-management":245},{"id":4,"title":5,"acronym":6,"body":7,"category":227,"description":228,"difficulty":229,"extension":230,"letter":159,"meta":231,"navigation":78,"path":232,"related":233,"seo":239,"sitemap":240,"stem":243,"subcategory":6,"__hash__":244},"terms\u002Fterms\u002Fs\u002Fstate-management.md","State Management",null,{"type":8,"value":9,"toc":221},"minimark",[10,15,19,23,26,30,210,214,217],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"State management is the answer to where does the truth about what's currently happening in my app actually live, and how does every component find out about it without everything turning into spaghetti. A todo app with three checkboxes doesn't need a state management library; a dashboard with forty interconnected widgets absolutely does, or you end up passing data through eleven layers of components just to update one number.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"State management refers to the patterns and libraries used to store, update, and share application state, meaning data that changes over time and affects what's rendered, across components in a predictable way. Approaches range from local component state and passing props down the tree, to context-based solutions, to dedicated libraries like Redux, Zustand, or MobX that centralize state and provide predictable update patterns, typically becoming necessary as an application's component tree and cross-cutting state grow.",[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-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { create } from 'zustand'\n\nconst useCartStore = create((set) => ({\n  items: [],\n  addItem: (item) => set((s) => ({ items: [...s.items, item] })),\n}))\n","typescript","",[38,39,40,73,80,117,133,202],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,66,70],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","import",[41,50,52],{"class":51},"sMK4o"," {",[41,54,56],{"class":55},"sTEyZ"," create",[41,58,59],{"class":51}," }",[41,61,62],{"class":47}," from",[41,64,65],{"class":51}," '",[41,67,69],{"class":68},"sfazB","zustand",[41,71,72],{"class":51},"'\n",[41,74,76],{"class":43,"line":75},2,[41,77,79],{"emptyLinePlaceholder":78},true,"\n",[41,81,83,87,90,93,96,99,101,105,108,111,114],{"class":43,"line":82},3,[41,84,86],{"class":85},"spNyl","const",[41,88,89],{"class":55}," useCartStore ",[41,91,92],{"class":51},"=",[41,94,56],{"class":95},"s2Zo4",[41,97,98],{"class":55},"(",[41,100,98],{"class":51},[41,102,104],{"class":103},"sHdIc","set",[41,106,107],{"class":51},")",[41,109,110],{"class":85}," =>",[41,112,113],{"class":55}," (",[41,115,116],{"class":51},"{\n",[41,118,120,124,127,130],{"class":43,"line":119},4,[41,121,123],{"class":122},"swJcz","  items",[41,125,126],{"class":51},":",[41,128,129],{"class":55}," []",[41,131,132],{"class":51},",\n",[41,134,136,139,141,143,146,148,150,153,155,157,160,162,164,166,169,172,174,177,180,182,185,188,191,194,197,200],{"class":43,"line":135},5,[41,137,138],{"class":95},"  addItem",[41,140,126],{"class":51},[41,142,113],{"class":51},[41,144,145],{"class":103},"item",[41,147,107],{"class":51},[41,149,110],{"class":85},[41,151,152],{"class":95}," set",[41,154,98],{"class":55},[41,156,98],{"class":51},[41,158,159],{"class":103},"s",[41,161,107],{"class":51},[41,163,110],{"class":85},[41,165,113],{"class":55},[41,167,168],{"class":51},"{",[41,170,171],{"class":122}," items",[41,173,126],{"class":51},[41,175,176],{"class":55}," [",[41,178,179],{"class":51},"...",[41,181,159],{"class":55},[41,183,184],{"class":51},".",[41,186,187],{"class":55},"items",[41,189,190],{"class":51},",",[41,192,193],{"class":55}," item] ",[41,195,196],{"class":51},"}",[41,198,199],{"class":55},"))",[41,201,132],{"class":51},[41,203,205,207],{"class":43,"line":204},6,[41,206,196],{"class":51},[41,208,209],{"class":55},"))\n",[11,211,213],{"id":212},"when-youll-hear-this","When You'll Hear This",[16,215,216],{},"\"Passing props got out of hand, time to bring in real state management.\" \u002F \"Zustand replaced our Redux boilerplate with about a tenth of the code.\"",[218,219,220],"style",{},"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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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":75,"depth":75,"links":222},[223,224,225,226],{"id":13,"depth":75,"text":14},{"id":21,"depth":75,"text":22},{"id":28,"depth":75,"text":29},{"id":212,"depth":75,"text":213},"frontend","State management is the answer to where does the truth about what's currently happening in my app actually live, and how does every component find out abou...","intermediate","md",{},"\u002Fterms\u002Fs\u002Fstate-management",[234,235,236,237,238],"Redux","Zustand","MobX","React Context","Props",{"title":5,"description":228},{"changefreq":241,"priority":242},"weekly",0.7,"terms\u002Fs\u002Fstate-management","OrilKpuSvTXvQRqV-qHqIqVU1uEzN6GWiCUWF7YkzEs",[246,249,253,256,259],{"title":236,"path":247,"acronym":6,"category":227,"difficulty":229,"description":248},"\u002Fterms\u002Fm\u002Fmobx","MobX is state management for people who think Redux is too much work.",{"title":238,"path":250,"acronym":6,"category":227,"difficulty":251,"description":252},"\u002Fterms\u002Fp\u002Fprops","beginner","Props are how you pass information INTO a component, like giving a coffee machine its settings.",{"title":237,"path":254,"acronym":6,"category":227,"difficulty":251,"description":255},"\u002Fterms\u002Fr\u002Freact-context","React Context is like a family group chat for your components.",{"title":234,"path":257,"acronym":6,"category":227,"difficulty":229,"description":258},"\u002Fterms\u002Fr\u002Fredux","Redux is the granddaddy of React state management that makes you write three files to update one number. Actions, reducers, dispatchers, oh my!",{"title":235,"path":260,"acronym":6,"category":227,"difficulty":251,"description":261},"\u002Fterms\u002Fz\u002Fzustand","Zustand is German for 'state' and it's the state management library that makes Redux look like doing your taxes.",1792528126780]