[{"id":"4cf2670e-3570-4aee-8b94-df2a7bf219de","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use State Management Library","styles":{}}],"children":[]},{"id":"77ce409c-a066-4486-b45b-7bf32d95d514","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"State Management Library","styles":{"bold":true}},{"type":"text","text":" is a tool used to manage state outside normal component state when the app becomes too complex.","styles":{}}],"children":[]},{"id":"b4a24a5c-b102-4ce7-9442-aca8fe482ff1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"ea9b8956-1dd4-4e09-ac6b-f97b34683e18","type":"procode","props":{"code":"State Management Library = tool for managing shared app state\n","language":"txt","filename":"","files":"[{\"id\":\"7rn9mxcvo\",\"name\":\"code\",\"code\":\"State Management Library = tool for managing shared app state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6d7ca8ac-3497-4246-8a42-eab5387c407b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple meaning:","styles":{}}],"children":[]},{"id":"34023c7f-bde9-41a4-850c-25a0baea5513","type":"procode","props":{"code":"useState = local component state\nState management library = shared/global state system\n","language":"txt","filename":"","files":"[{\"id\":\"axfcqoj8o\",\"name\":\"code\",\"code\":\"useState = local component state\\nState management library = shared/global state system\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7523901-d396-4658-a45b-785c4cd71b0d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React already gives you ","styles":{}},{"type":"text","text":"useState","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"useReducer","styles":{"code":true}},{"type":"text","text":", props, and Context. You should not install a state management library too early. React docs recommend lifting state up to the closest common parent when multiple components need to coordinate the same state.","styles":{}}],"children":[]},{"id":"33490742-c89b-4f45-b619-a9dd41f861a2","type":"divider","props":{},"children":[]},{"id":"83dc947c-47aa-408a-afde-7cd8093ca9bb","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"9d9d755b-a7d7-4afa-abd6-2b406b74ffe0","type":"procode","props":{"code":"Use State Management Library When\n├── Many components need the same state\n├── Props drilling becomes painful\n├── Context becomes too messy\n├── State logic becomes complex\n├── State is used across many pages\n├── You need global UI state\n├── You need predictable updates\n├── You need better debugging\n├── You need persistent client state\n└── React local state is no longer enough\n","language":"txt","filename":"","files":"[{\"id\":\"txw14p6uk\",\"name\":\"code\",\"code\":\"Use State Management Library When\\n├── Many components need the same state\\n├── Props drilling becomes painful\\n├── Context becomes too messy\\n├── State logic becomes complex\\n├── State is used across many pages\\n├── You need global UI state\\n├── You need predictable updates\\n├── You need better debugging\\n├── You need persistent client state\\n└── React local state is no longer enough\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59a8d481-c87e-4f3b-ac44-70d660cd29c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7d1f839c-2d00-42ad-adb8-937e6ad73689","type":"procode","props":{"code":"Start simple.\nUse library only when state becomes hard to manage.\n","language":"txt","filename":"","files":"[{\"id\":\"kv3rc073k\",\"name\":\"code\",\"code\":\"Start simple.\\nUse library only when state becomes hard to manage.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8e36c86c-62da-44b3-a7ba-ba5337c67384","type":"divider","props":{},"children":[]},{"id":"4b8910a3-47ca-4985-9ff5-e45db1168d53","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What is State Management?","styles":{}}],"children":[]},{"id":"b3551270-d36b-4691-8f49-a9f8d273eb6a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"State management means deciding:","styles":{}}],"children":[]},{"id":"a93fd893-f2ee-475e-903d-994725e3e99a","type":"procode","props":{"code":"Where state lives\nWho can read it\nWho can update it\nHow state changes\nHow UI reacts to state changes\n","language":"txt","filename":"","files":"[{\"id\":\"pdmenobe5\",\"name\":\"code\",\"code\":\"Where state lives\\nWho can read it\\nWho can update it\\nHow state changes\\nHow UI reacts to state changes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"78f24334-ade3-444c-ae81-db30e260a0e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example state:","styles":{}}],"children":[]},{"id":"279be3a2-e559-4f47-bf98-c2e772c6e1a8","type":"procode","props":{"code":"Modal open or closed\nSidebar open or closed\nLogged-in user\nTheme\nCart items\nNotifications\nSelected workspace\nCurrent filters\nForm data\nAPI data\n","language":"txt","filename":"","files":"[{\"id\":\"bvgzad3ug\",\"name\":\"code\",\"code\":\"Modal open or closed\\nSidebar open or closed\\nLogged-in user\\nTheme\\nCart items\\nNotifications\\nSelected workspace\\nCurrent filters\\nForm data\\nAPI data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b6f9996f-6b8a-402e-9e93-a2cbf568fc22","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"fc49d502-7b5c-4eec-90ac-fae43d8fa539","type":"procode","props":{"code":"State management = organizing changing data in your app\n","language":"txt","filename":"","files":"[{\"id\":\"nb5jf19r0\",\"name\":\"code\",\"code\":\"State management = organizing changing data in your app\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b622e815-351c-4af7-87cb-97a2788e5315","type":"divider","props":{},"children":[]},{"id":"98aaec95-3624-4df2-a475-01387e4d4e04","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"You Do Not Always Need a Library","styles":{}}],"children":[]},{"id":"9303910e-a7d1-4e6a-9116-3d0a2c6b8fcb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For small apps, React built-in tools are enough.","styles":{}}],"children":[]},{"id":"e81a5503-35c5-4bcc-9e19-a5d6525527eb","type":"procode","props":{"code":"React built-in state tools\n├── useState\n├── useReducer\n├── Props\n├── Context\n└── Custom Hooks\n","language":"txt","filename":"","files":"[{\"id\":\"bfs2pkjq7\",\"name\":\"code\",\"code\":\"React built-in state tools\\n├── useState\\n├── useReducer\\n├── Props\\n├── Context\\n└── Custom Hooks\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2c47eec4-7785-475c-8635-e4064948d85a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use these first before adding a library.","styles":{}}],"children":[]},{"id":"f77563b1-a624-41d8-97db-86512f0a1f1a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"b265afc9-5e1f-4927-911b-09dd3240ce30","type":"procode","props":{"code":"Small app → useState + props\nMedium app → useReducer + Context\nLarge app → state library may help\n","language":"txt","filename":"","files":"[{\"id\":\"fhs92sxii\",\"name\":\"code\",\"code\":\"Small app → useState + props\\nMedium app → useReducer + Context\\nLarge app → state library may help\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5ed86095-e41b-4f1a-92f2-b48501f418fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs say each unique piece of state should have a specific owner, and shared state should be lifted to the closest common parent instead of duplicated.","styles":{}}],"children":[]},{"id":"e607fa3c-eebb-46b9-bda9-d41d068098e0","type":"divider","props":{},"children":[]},{"id":"2f6a1e96-f170-451b-83e1-1445ea1363a2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic Decision Tree","styles":{}}],"children":[]},{"id":"721d414e-3a1e-4163-b47e-46c3bd36b716","type":"procode","props":{"code":"Need state?\n├── Only one component needs it\n│ └── useState\n│\n├── Parent and child need it\n│ └── props\n│\n├── Sibling components need it\n│ └── lift state up\n│\n├── State logic is complex\n│ └── useReducer\n│\n├── Deep components need same state\n│ └── Context\n│\n├── Many pages need same client state\n│ └── Zustand / Redux\n│\n└── Data comes from API\n └── TanStack Query\n","language":"txt","filename":"","files":"[{\"id\":\"2524tu0dm\",\"name\":\"code\",\"code\":\"Need state?\\n├── Only one component needs it\\n│ └── useState\\n│\\n├── Parent and child need it\\n│ └── props\\n│\\n├── Sibling components need it\\n│ └── lift state up\\n│\\n├── State logic is complex\\n│ └── useReducer\\n│\\n├── Deep components need same state\\n│ └── Context\\n│\\n├── Many pages need same client state\\n│ └── Zustand / Redux\\n│\\n└── Data comes from API\\n └── TanStack Query\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"413f5a54-a48f-405a-88cd-1e7a4d74bc0f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f433f919-dddf-429c-a07f-7a40335b5256","type":"procode","props":{"code":"Choose the tool based on the type of state.\n","language":"txt","filename":"","files":"[{\"id\":\"phaeqrhaj\",\"name\":\"code\",\"code\":\"Choose the tool based on the type of state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d8228bd8-c78c-46f2-a96b-a04c92d8e3d6","type":"divider","props":{},"children":[]},{"id":"cda155d0-50f9-4ee4-b6d9-db5d7b938630","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Types of State","styles":{}}],"children":[]},{"id":"a6b69073-117b-4583-9bd7-c439a285aba6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Before choosing a library, understand the state type.","styles":{}}],"children":[]},{"id":"6e7ddef9-7174-4d89-b841-e135df2a5b2a","type":"procode","props":{"code":"Types of State\n├── Local state\n├── Shared component state\n├── Global client state\n├── Server state\n├── Form state\n├── URL state\n└── Persistent state\n","language":"txt","filename":"","files":"[{\"id\":\"jcoa6n1dw\",\"name\":\"code\",\"code\":\"Types of State\\n├── Local state\\n├── Shared component state\\n├── Global client state\\n├── Server state\\n├── Form state\\n├── URL state\\n└── Persistent state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e9cd374c-8947-405b-8608-c7f996f5670b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each type has a better tool.","styles":{}}],"children":[]},{"id":"421068d2-6527-40dd-a8aa-8890dc84bc21","type":"procode","props":{"code":"Local state → useState\nComplex local state → useReducer\nDeep shared state → Context\nGlobal client state → Zustand / Redux\nServer state → TanStack Query\nForm state → React Hook Form\nURL state → React Router search params\nPersistent state → localStorage + store\n","language":"txt","filename":"","files":"[{\"id\":\"15azpu1nl\",\"name\":\"code\",\"code\":\"Local state → useState\\nComplex local state → useReducer\\nDeep shared state → Context\\nGlobal client state → Zustand / Redux\\nServer state → TanStack Query\\nForm state → React Hook Form\\nURL state → React Router search params\\nPersistent state → localStorage + store\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"736faa18-7223-4901-91c0-6835fbd9ab23","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"114aa5f8-1868-4a95-8f7a-1e05aee5ddbf","type":"procode","props":{"code":"Not all state should go into one global store.\n","language":"txt","filename":"","files":"[{\"id\":\"po6wv0iqm\",\"name\":\"code\",\"code\":\"Not all state should go into one global store.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0868dfba-b1f9-42e4-a822-c332770627d0","type":"divider","props":{},"children":[]},{"id":"11ba339b-be1a-4d4a-bea7-d6220eeed053","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Local State","styles":{}}],"children":[]},{"id":"9fa9ca27-4c23-4d1d-9cff-f8b0f5caa62e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Local state belongs to one component.","styles":{}}],"children":[]},{"id":"cd5cd8a0-f175-4838-856a-0e000eef7e29","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"2f05eb30-0a76-4048-99b1-ea0af00b4991","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function ModalButton() {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n

\n \n\n {isOpen && (\n

Modal content

\n \n

\n )}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"jowvk7jk9\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function ModalButton() {\\n const [isOpen, setIsOpen] = useState(false)\\n\\n return (\\n

\\n \\n\\n {isOpen && (\\n

\\n

Modal content

\\n \\n

\\n )}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b8ef9188-e4e2-46a0-be59-04b96a388466","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use local state for:","styles":{}}],"children":[]},{"id":"e7b61409-18dc-4717-8a37-cce51018737d","type":"procode","props":{"code":"Input value\nDropdown open\nModal open\nActive tab\nHover state\nSmall toggle\nCurrent component state\n","language":"txt","filename":"","files":"[{\"id\":\"fbw44vgig\",\"name\":\"code\",\"code\":\"Input value\\nDropdown open\\nModal open\\nActive tab\\nHover state\\nSmall toggle\\nCurrent component state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"df278d90-03ba-44d8-8468-fd77fed23f5d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"de613877-8eec-4902-b8c1-6ad2ad3eb171","type":"procode","props":{"code":"If only one component needs it, keep it local.\n","language":"txt","filename":"","files":"[{\"id\":\"0gfoeh5ix\",\"name\":\"code\",\"code\":\"If only one component needs it, keep it local.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f0e120f-8785-4fcb-b226-e94a7970aa4b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not use Zustand or Redux for this.","styles":{}}],"children":[]},{"id":"d1837284-46d7-4088-ae4d-88dff5a8bb92","type":"divider","props":{},"children":[]},{"id":"65040cb2-8580-4f93-9f51-4d9492988e12","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Shared Component State","styles":{}}],"children":[]},{"id":"2c9b3bab-fcc5-4959-8699-d0a52c17b053","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shared component state is needed by sibling components.","styles":{}}],"children":[]},{"id":"6145fef2-0de5-4b52-9a59-eaf9d4af5f76","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"f9d1d1d3-ff6a-422c-949d-7091f644c836","type":"procode","props":{"code":"Parent\n├── SearchInput needs search\n└── ProductList needs search\n","language":"txt","filename":"","files":"[{\"id\":\"81ll70qrk\",\"name\":\"code\",\"code\":\"Parent\\n├── SearchInput needs search\\n└── ProductList needs search\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1e4706b9-fc57-4212-9c6e-ce188a6fcefd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use lifting state up:","styles":{}}],"children":[]},{"id":"692a156b-34eb-4cd5-bd20-8db59fe9247a","type":"procode","props":{"code":"import { useState } from \"react\"\n\nfunction SearchInput({\n search,\n onSearchChange,\n}: {\n search: string\n onSearchChange: (value: string) => void\n}) {\n return (\n onSearchChange(event.target.value)}\n />\n )\n}\n\nfunction ProductList({ search }: { search: string }) {\n return

Searching for: {search}

\n}\n\nexport default function ProductPage() {\n const [search, setSearch] = useState(\"\")\n\n return (\n <>\n \n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"8hxp79xym\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nfunction SearchInput({\\n search,\\n onSearchChange,\\n}: {\\n search: string\\n onSearchChange: (value: string) => void\\n}) {\\n return (\\n onSearchChange(event.target.value)}\\n />\\n )\\n}\\n\\nfunction ProductList({ search }: { search: string }) {\\n return

Searching for: {search}

\\n}\\n\\nexport default function ProductPage() {\\n const [search, setSearch] = useState(\\\"\\\")\\n\\n return (\\n <>\\n \\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6cf8de19-f7ed-4d82-8b3c-95ca1b7bc88b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"43252b21-2ca9-4c48-bb9c-1f2cb21b18d4","type":"procode","props":{"code":"Sibling components need same state\n└── move state to parent\n","language":"txt","filename":"","files":"[{\"id\":\"56onwqsn2\",\"name\":\"code\",\"code\":\"Sibling components need same state\\n└── move state to parent\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1dc75310-51c6-4011-af3f-e9cc90712d60","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs call this pattern “lifting state up”: move state to the closest common parent, then pass it down with props.","styles":{}}],"children":[]},{"id":"68ab0023-847b-4ae6-a952-e8a5aeb0ef5f","type":"divider","props":{},"children":[]},{"id":"6446af8a-c9e9-4dad-95cb-6b7d44ae20a3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Complex Local State","styles":{}}],"children":[]},{"id":"74f8ef9f-b4cc-4b88-9d7c-b3919786f38d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"useReducer","styles":{"code":true}},{"type":"text","text":" before reaching for a library when the state logic is complex but still belongs to one screen.","styles":{}}],"children":[]},{"id":"f0d402b5-7981-4f25-8c92-bf756b39c046","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"e5f13a0e-c075-4072-9ba9-0064789f85cb","type":"procode","props":{"code":"import { useReducer } from \"react\"\n\ntype State = {\n count: number\n}\n\ntype Action =\n | { type: \"increment\" }\n | { type: \"decrement\" }\n | { type: \"reset\" }\n\nfunction counterReducer(state: State, action: Action): State {\n switch (action.type) {\n case \"increment\":\n return {\n count: state.count + 1,\n }\n\n case \"decrement\":\n return {\n count: state.count - 1,\n }\n\n case \"reset\":\n return {\n count: 0,\n }\n\n default:\n return state\n }\n}\n\nexport default function Counter() {\n const [state, dispatch] = useReducer(counterReducer, {\n count: 0,\n })\n\n return (\n

{state.count}

\n\n \n\n \n\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"57ldf5zkg\",\"name\":\"code\",\"code\":\"import { useReducer } from \\\"react\\\"\\n\\ntype State = {\\n count: number\\n}\\n\\ntype Action =\\n | { type: \\\"increment\\\" }\\n | { type: \\\"decrement\\\" }\\n | { type: \\\"reset\\\" }\\n\\nfunction counterReducer(state: State, action: Action): State {\\n switch (action.type) {\\n case \\\"increment\\\":\\n return {\\n count: state.count + 1,\\n }\\n\\n case \\\"decrement\\\":\\n return {\\n count: state.count - 1,\\n }\\n\\n case \\\"reset\\\":\\n return {\\n count: 0,\\n }\\n\\n default:\\n return state\\n }\\n}\\n\\nexport default function Counter() {\\n const [state, dispatch] = useReducer(counterReducer, {\\n count: 0,\\n })\\n\\n return (\\n

\\n

{state.count}

\\n\\n \\n\\n \\n\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5d29b7e3-f207-4944-8d79-e2b64916a6e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4c66842a-da4d-401c-a83a-3382762fe105","type":"procode","props":{"code":"useState = simple state\nuseReducer = complex state logic\n","language":"txt","filename":"","files":"[{\"id\":\"yzizxzp4t\",\"name\":\"code\",\"code\":\"useState = simple state\\nuseReducer = complex state logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a696e0c7-8417-4eee-bb7a-c458159742c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs say reducers help consolidate component state update logic, and Context can be combined with reducers to manage state for a complex screen.","styles":{}}],"children":[]},{"id":"ffef7689-afaa-4726-b500-f93d77ebd20c","type":"divider","props":{},"children":[]},{"id":"e732bc6d-7e92-423e-b99f-f8a761dc8a74","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Deep Shared State","styles":{}}],"children":[]},{"id":"c3d2d14c-4038-4fee-b4fd-56bbec2ce4ad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use Context when deeply nested components need the same state.","styles":{}}],"children":[]},{"id":"95aa8dc9-3904-48c6-a669-f58b669c8d89","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"5d5178b2-6437-41d5-8654-619df03890ea","type":"procode","props":{"code":"App\n└── DashboardLayout\n └── Sidebar\n └── UserMenu needs user\n","language":"txt","filename":"","files":"[{\"id\":\"rrw85x546\",\"name\":\"code\",\"code\":\"App\\n└── DashboardLayout\\n └── Sidebar\\n └── UserMenu needs user\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9dd3f8a5-8e77-4bbf-8082-c7a4a7550489","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Instead of drilling props through every layer, use Context.","styles":{}}],"children":[]},{"id":"96758a55-825d-45b2-9801-4fcf630314da","type":"procode","props":{"code":"import {\n createContext,\n useContext,\n useState,\n} from \"react\"\n\ntype User = {\n name: string\n}\n\nconst UserContext = createContext(null)\n\nfunction UserMenu() {\n const user = useContext(UserContext)\n\n return

{user?.name}

\n}\n\nexport default function App() {\n const [user] = useState({\n name: \"Farid\",\n })\n\n return (\n \n \n \n )\n}\n\nfunction DashboardLayout() {\n return \n}\n","language":"tsx","filename":"","files":"[{\"id\":\"egc6hm7is\",\"name\":\"code\",\"code\":\"import {\\n createContext,\\n useContext,\\n useState,\\n} from \\\"react\\\"\\n\\ntype User = {\\n name: string\\n}\\n\\nconst UserContext = createContext(null)\\n\\nfunction UserMenu() {\\n const user = useContext(UserContext)\\n\\n return

{user?.name}

\\n}\\n\\nexport default function App() {\\n const [user] = useState({\\n name: \\\"Farid\\\",\\n })\\n\\n return (\\n \\n \\n \\n )\\n}\\n\\nfunction DashboardLayout() {\\n return \\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"25606b74-a876-44f4-9539-b5bdbe873e0a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e4c09a56-025d-4172-857f-669220d4cb03","type":"procode","props":{"code":"Context = avoid passing props through many layers\n","language":"txt","filename":"","files":"[{\"id\":\"bi7mdn497\",\"name\":\"code\",\"code\":\"Context = avoid passing props through many layers\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87c79e18-2287-4cff-b580-7b7222ae42d3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use Context for:","styles":{}}],"children":[]},{"id":"ef5a805f-0310-44ae-b0c1-1e5da0fded83","type":"procode","props":{"code":"Theme\nAuth user\nLanguage\nPermission\nCurrent workspace\nDashboard settings\n","language":"txt","filename":"","files":"[{\"id\":\"0qbrjggqp\",\"name\":\"code\",\"code\":\"Theme\\nAuth user\\nLanguage\\nPermission\\nCurrent workspace\\nDashboard settings\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"efe1de6c-ce3b-4205-ad92-d0273a65450e","type":"divider","props":{},"children":[]},{"id":"e740c9e4-f905-4a74-a6ee-94cd4438226e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Context is Enough","styles":{}}],"children":[]},{"id":"06a8bdb6-4aa7-4fc4-89d7-4c9a32c33cfb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Context is enough when:","styles":{}}],"children":[]},{"id":"639b9ca0-7b27-4000-b080-9ebf5664d643","type":"procode","props":{"code":"State is not too complex\nUpdates are not too frequent\nMany deep components need the value\nYou want to avoid props drilling\nThe state belongs to one app section\nYou do not need advanced debugging\n","language":"txt","filename":"","files":"[{\"id\":\"4mizizoku\",\"name\":\"code\",\"code\":\"State is not too complex\\nUpdates are not too frequent\\nMany deep components need the value\\nYou want to avoid props drilling\\nThe state belongs to one app section\\nYou do not need advanced debugging\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d365825e-fd52-40c4-b2c4-05a8229ac187","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"8a8370ca-3306-4e40-9e15-782ee099cde4","type":"procode","props":{"code":"ThemeContext\nAuthContext\nLanguageContext\nPermissionContext\n","language":"txt","filename":"","files":"[{\"id\":\"w86rtkya6\",\"name\":\"code\",\"code\":\"ThemeContext\\nAuthContext\\nLanguageContext\\nPermissionContext\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8369cc08-fe4a-487f-9a05-b0fdf8ebd53a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"edfacf85-31fe-4015-ae64-a72b2ba8ad5c","type":"procode","props":{"code":"Context is good for shared value.\nContext is not always good for complex state logic.\n","language":"txt","filename":"","files":"[{\"id\":\"m39immu2y\",\"name\":\"code\",\"code\":\"Context is good for shared value.\\nContext is not always good for complex state logic.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8c0cf347-308c-4311-9e32-ec1919249a60","type":"divider","props":{},"children":[]},{"id":"b563db4b-3236-4c01-853f-7a98a546e744","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Context Becomes Painful","styles":{}}],"children":[]},{"id":"1c3f53f7-856a-4395-9b80-a7c37dec57ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Context can become messy when:","styles":{}}],"children":[]},{"id":"d01f327f-744e-4d4a-bbeb-c144a529ce53","type":"procode","props":{"code":"Many different states are inside one context\nProvider becomes too large\nMany components re-render too often\nState update logic becomes hard to follow\nContext file becomes huge\nYou have many actions and conditions\nYou need better debugging tools\n","language":"txt","filename":"","files":"[{\"id\":\"5jhlv2vvf\",\"name\":\"code\",\"code\":\"Many different states are inside one context\\nProvider becomes too large\\nMany components re-render too often\\nState update logic becomes hard to follow\\nContext file becomes huge\\nYou have many actions and conditions\\nYou need better debugging tools\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a518430-13b3-445a-809e-f569ddb17c4e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad pattern:","styles":{}}],"children":[]},{"id":"bfcd692b-89b7-4fb4-b7c8-330689ab1f1f","type":"procode","props":{"code":"\n \n\n","language":"tsx","filename":"","files":"[{\"id\":\"ixlpq09m6\",\"name\":\"code\",\"code\":\"\\n \\n\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"529784d0-837a-4cc9-84b2-2fb1f6b4faa9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"0c51b919-01bc-4ca1-9658-4849e530ce97","type":"procode","props":{"code":"One huge context controls too many unrelated things.\n","language":"txt","filename":"","files":"[{\"id\":\"a7b955xxv\",\"name\":\"code\",\"code\":\"One huge context controls too many unrelated things.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd5a1a4c-4f84-4052-8dcd-23caf8adbd1a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"82cd4d10-a7b4-4b12-ab70-68616000f98b","type":"procode","props":{"code":"AuthContext\nThemeContext\nCartStore\nModalStore\nTanStack Query for products\n","language":"txt","filename":"","files":"[{\"id\":\"9s9umij08\",\"name\":\"code\",\"code\":\"AuthContext\\nThemeContext\\nCartStore\\nModalStore\\nTanStack Query for products\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0fbbb361-9189-43b0-bc47-a8020820b369","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"fcc75267-1bba-4908-ba3e-10b88e01f067","type":"procode","props":{"code":"Do not create one giant context for the whole app.\n","language":"txt","filename":"","files":"[{\"id\":\"ui8amwsaq\",\"name\":\"code\",\"code\":\"Do not create one giant context for the whole app.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a71c4d5c-7fa6-46e8-8073-a08ed8b0d498","type":"divider","props":{},"children":[]},{"id":"b964bf4d-6343-490f-842d-52e29dffade2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Global Client State","styles":{}}],"children":[]},{"id":"aac7e9c2-63c7-4cc6-9d5b-14fa0f2a9df9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Global client state is state needed across many parts of the app.","styles":{}}],"children":[]},{"id":"736695fd-f1a0-4ad8-8fcf-1f36d9a857c4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Examples:","styles":{}}],"children":[]},{"id":"19e875dd-0caf-4f57-8edf-fa5220f93afd","type":"procode","props":{"code":"Auth user\nTheme\nSidebar open\nGlobal modal\nCart\nNotifications\nCurrent workspace\nApp settings\nSelected organization\n","language":"txt","filename":"","files":"[{\"id\":\"grzb100y7\",\"name\":\"code\",\"code\":\"Auth user\\nTheme\\nSidebar open\\nGlobal modal\\nCart\\nNotifications\\nCurrent workspace\\nApp settings\\nSelected organization\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"be67643e-e042-4d69-865c-9502620a7276","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use a state management library when this state is shared widely and changes from many places.","styles":{}}],"children":[]},{"id":"0b55f0d1-b8db-4af5-bb39-a17c5380e28c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1cc50ce3-08d4-4ae5-8a70-4ca4e9c7b34b","type":"procode","props":{"code":"Many components need to read and update the same client state.\n","language":"txt","filename":"","files":"[{\"id\":\"xc8hcs1yp\",\"name\":\"code\",\"code\":\"Many components need to read and update the same client state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e61b0d37-9ea2-4184-8af3-b26d992f3a37","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is where tools like Zustand or Redux can help.","styles":{}}],"children":[]},{"id":"3386d144-7b06-4a23-948d-34f1341b8961","type":"divider","props":{},"children":[]},{"id":"0462a5ed-c034-4814-8dc0-d701f066fecf","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use Zustand","styles":{}}],"children":[]},{"id":"7dbe4b43-0203-43b3-9797-6b651ed4d64a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use Zustand when you want a simple global store with less setup.","styles":{}}],"children":[]},{"id":"348013f4-939e-4ee7-9e8a-2066ecc0789a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good for:","styles":{}}],"children":[]},{"id":"0cc5f7bf-79d1-41ff-b9ad-ad92a99e037c","type":"procode","props":{"code":"Theme state\nSidebar state\nModal state\nCart state\nAuth UI state\nSmall dashboard state\nSimple global client state\n","language":"txt","filename":"","files":"[{\"id\":\"enuqtfx38\",\"name\":\"code\",\"code\":\"Theme state\\nSidebar state\\nModal state\\nCart state\\nAuth UI state\\nSmall dashboard state\\nSimple global client state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"53937b4c-b111-4d9b-9ad7-1b6837f54827","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example idea:","styles":{}}],"children":[]},{"id":"5c7f9e02-e723-4b38-b09c-8f626781d8da","type":"procode","props":{"code":"import { create } from \"zustand\"\n\ntype SidebarStore = {\n isOpen: boolean\n open: () => void\n close: () => void\n}\n\nexport const useSidebarStore = create((set) => ({\n isOpen: false,\n open: () => set({ isOpen: true }),\n close: () => set({ isOpen: false }),\n}))\n","language":"tsx","filename":"","files":"[{\"id\":\"8ijrua39d\",\"name\":\"code\",\"code\":\"import { create } from \\\"zustand\\\"\\n\\ntype SidebarStore = {\\n isOpen: boolean\\n open: () => void\\n close: () => void\\n}\\n\\nexport const useSidebarStore = create((set) => ({\\n isOpen: false,\\n open: () => set({ isOpen: true }),\\n close: () => set({ isOpen: false }),\\n}))\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"39d96519-a1fb-48fb-985b-ba385f54d98d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"c17cb60a-3155-4dea-ac63-0eb7fb96a1e9","type":"procode","props":{"code":"function SidebarButton() {\n const open = useSidebarStore((state) => state.open)\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"6dw67t9sy\",\"name\":\"code\",\"code\":\"function SidebarButton() {\\n const open = useSidebarStore((state) => state.open)\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d82630fd-2b5f-48bc-8ca4-9961e8e567ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5fdc5d97-49b7-4532-827b-4e7f35f78888","type":"procode","props":{"code":"Zustand = simple global client state\n","language":"txt","filename":"","files":"[{\"id\":\"04zlpdtit\",\"name\":\"code\",\"code\":\"Zustand = simple global client state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"11a7edc8-254e-48ae-a88f-3517bc5ea41a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use Zustand when you want:","styles":{}}],"children":[]},{"id":"35148376-39a7-480a-a7d0-9066e50e2ce8","type":"procode","props":{"code":"Less boilerplate\nSimple store\nDirect hook usage\nSmall to medium global state\nEasy mental model\n","language":"txt","filename":"","files":"[{\"id\":\"6roprwe2a\",\"name\":\"code\",\"code\":\"Less boilerplate\\nSimple store\\nDirect hook usage\\nSmall to medium global state\\nEasy mental model\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a9de264-6a8a-496a-8b6c-c23b2553d08e","type":"divider","props":{},"children":[]},{"id":"6c2a78ec-796d-4290-80c3-416dd0a9e3ab","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use Redux Toolkit","styles":{}}],"children":[]},{"id":"b0e41b79-291a-4e7f-8409-2dcfd4259f6b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use Redux Toolkit when your app has large and structured global state.","styles":{}}],"children":[]},{"id":"177de883-11a7-41d4-ba90-d9b45038685a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good for:","styles":{}}],"children":[]},{"id":"c426511b-f417-4b2c-8d67-8a6e78b3c621","type":"procode","props":{"code":"Large app state\nMany actions\nComplex business logic\nStrict predictable updates\nLarge team project\nNeed Redux DevTools\nNeed middleware\nNeed strong conventions\n","language":"txt","filename":"","files":"[{\"id\":\"wi9ek67jt\",\"name\":\"code\",\"code\":\"Large app state\\nMany actions\\nComplex business logic\\nStrict predictable updates\\nLarge team project\\nNeed Redux DevTools\\nNeed middleware\\nNeed strong conventions\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"820089f9-45eb-4812-b76f-e0d38cb74277","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Redux docs say global state needed across the app should go in the Redux store, while state only needed in one place should stay in component state.","styles":{}}],"children":[]},{"id":"5145c7dc-7c20-47ba-9e73-1a46f7240ed2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"007a9d28-13dc-40b4-80a0-445a946016b0","type":"procode","props":{"code":"Redux Toolkit = structured global state for bigger apps\n","language":"txt","filename":"","files":"[{\"id\":\"548o64j7o\",\"name\":\"code\",\"code\":\"Redux Toolkit = structured global state for bigger apps\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5cba3a07-c6e7-459f-8577-e755fe480d36","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use Redux Toolkit when:","styles":{}}],"children":[]},{"id":"fce776c0-d155-4948-9640-6ce3c786a99d","type":"procode","props":{"code":"State logic needs strong structure\nMany components update same data\nDebugging history is important\nYou want predictable update flow\nTeam needs consistent state pattern\n","language":"txt","filename":"","files":"[{\"id\":\"wfhigrblv\",\"name\":\"code\",\"code\":\"State logic needs strong structure\\nMany components update same data\\nDebugging history is important\\nYou want predictable update flow\\nTeam needs consistent state pattern\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"89d5417d-9f81-4765-a01a-9dc9b7ac8715","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not use Redux Toolkit for simple local state.","styles":{}}],"children":[]},{"id":"5cd14856-1112-4e42-9a30-1acf4b727fb1","type":"divider","props":{},"children":[]},{"id":"05c22469-9fa4-45a4-bfa7-3beb29b2983a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use TanStack Query Instead","styles":{}}],"children":[]},{"id":"cec8bdf2-fba4-4aff-9d92-2ff28ee4bf64","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If the state comes from an API, use TanStack Query instead of a normal state management library.","styles":{}}],"children":[]},{"id":"8c4ed388-3079-4b4d-baf5-d5acf9f7847d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Server state examples:","styles":{}}],"children":[]},{"id":"d1917fd3-f20e-4ef3-8ef5-539e6a96dd2d","type":"procode","props":{"code":"Products from API\nUsers from API\nPosts from API\nOrders from API\nNotifications from API\nCategories from API\nDashboard analytics from API\n","language":"txt","filename":"","files":"[{\"id\":\"grd10bzdd\",\"name\":\"code\",\"code\":\"Products from API\\nUsers from API\\nPosts from API\\nOrders from API\\nNotifications from API\\nCategories from API\\nDashboard analytics from API\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"06b81c55-7e0b-431b-b70d-bc178c441172","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"TanStack Query docs describe it as a library for fetching, caching, synchronizing, and updating server state in web apps. The docs also explain that server state is different because it is remote, async, shared by others, and can become outdated.","styles":{}}],"children":[]},{"id":"b9095f79-a6a9-4386-976c-4b854e2d9b92","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"15d9e14c-1ff8-45fb-85cd-60a044ee1c15","type":"procode","props":{"code":"API data → TanStack Query\nUI state → Zustand / Redux / useState\n","language":"txt","filename":"","files":"[{\"id\":\"7640yjns3\",\"name\":\"code\",\"code\":\"API data → TanStack Query\\nUI state → Zustand / Redux / useState\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"acc21624-9620-4441-9500-46415478d6ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"a47aa199-f0d7-4449-b003-bc651acf5f88","type":"procode","props":{"code":"const [products, setProducts] = useGlobalStore()\n","language":"tsx","filename":"","files":"[{\"id\":\"s4240ikm3\",\"name\":\"code\",\"code\":\"const [products, setProducts] = useGlobalStore()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7a3c5445-4b65-4995-9d3a-765b9f15c405","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"1abb01df-556e-4557-883a-976c499d8a11","type":"procode","props":{"code":"const productsQuery = useQuery({\n queryKey: [\"products\"],\n queryFn: getProducts,\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"bqpmqnm48\",\"name\":\"code\",\"code\":\"const productsQuery = useQuery({\\n queryKey: [\\\"products\\\"],\\n queryFn: getProducts,\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7b1fc72-223a-4e33-a63d-f7de49eab0ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d3232710-1ec2-477e-9df8-f6220887fcb6","type":"procode","props":{"code":"Do not put server data in global client state\nif TanStack Query can manage it better.\n","language":"txt","filename":"","files":"[{\"id\":\"x8qmky5jc\",\"name\":\"code\",\"code\":\"Do not put server data in global client state\\nif TanStack Query can manage it better.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a4e00e2-31f2-476a-bb10-c65b483b8a03","type":"divider","props":{},"children":[]},{"id":"15143afe-14ba-4fe3-82f7-a352d2b23c7b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"State Management Library vs TanStack Query","styles":{}}],"children":[]},{"id":"5e5452fc-3b41-4439-876e-3c9f4ade764e","type":"procode","props":{"code":"State Management Library\n├── Client state\n├── UI state\n├── User interactions\n├── Modal\n├── Theme\n├── Cart draft\n├── Sidebar\n└── App settings\n\nTanStack Query\n├── Server state\n├── API data\n├── Cache\n├── Refetch\n├── Loading state\n├── Error state\n├── Mutation\n└── Stale data\n","language":"txt","filename":"","files":"[{\"id\":\"8dvvbab4m\",\"name\":\"code\",\"code\":\"State Management Library\\n├── Client state\\n├── UI state\\n├── User interactions\\n├── Modal\\n├── Theme\\n├── Cart draft\\n├── Sidebar\\n└── App settings\\n\\nTanStack Query\\n├── Server state\\n├── API data\\n├── Cache\\n├── Refetch\\n├── Loading state\\n├── Error state\\n├── Mutation\\n└── Stale data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a9ef8b51-6984-4c9b-bbe7-2135f0ed29b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3dd17e94-ee17-4ed0-9948-435f2d494af7","type":"procode","props":{"code":"Client state and server state are different problems.\n","language":"txt","filename":"","files":"[{\"id\":\"5pc1yso3k\",\"name\":\"code\",\"code\":\"Client state and server state are different problems.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cd0e9fd9-1661-41fc-b6c2-f964c8a6a4ed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Professional pattern:","styles":{}}],"children":[]},{"id":"9e391b3a-6f95-40c2-b664-3e46be048c0a","type":"procode","props":{"code":"useState → small local UI state\nContext → deep shared value\nZustand/Redux → global client state\nTanStack Query → server/API state\nReact Hook Form → form state\n","language":"txt","filename":"","files":"[{\"id\":\"iscf50fip\",\"name\":\"code\",\"code\":\"useState → small local UI state\\nContext → deep shared value\\nZustand/Redux → global client state\\nTanStack Query → server/API state\\nReact Hook Form → form state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9d59c865-8fb6-4281-941d-b4d83cd4cc7c","type":"divider","props":{},"children":[]},{"id":"5445539a-df4a-4db5-82a8-63d353ac1aa8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use React Hook Form Instead","styles":{}}],"children":[]},{"id":"2ff150db-ae18-40f5-8e1e-924164a927a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Form state is special.","styles":{}}],"children":[]},{"id":"d4c21a8a-3433-4a44-94bb-ac971f08dd17","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not put every form input into global state.","styles":{}}],"children":[]},{"id":"0d386485-36a3-4ea2-a045-daa8a341f80d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"4b3efd82-2021-4b2f-92ff-b528cbb148a7","type":"procode","props":{"code":"Redux store\n├── email input\n├── password input\n├── name input\n├── confirm password input\n└── every typing update\n","language":"txt","filename":"","files":"[{\"id\":\"x77kczs6z\",\"name\":\"code\",\"code\":\"Redux store\\n├── email input\\n├── password input\\n├── name input\\n├── confirm password input\\n└── every typing update\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"29dce9fc-76ad-4da9-8105-7b086098d451","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"0779376f-5984-43a5-909c-969b2bcfe94c","type":"procode","props":{"code":"Form state\n└── React Hook Form or local component state\n","language":"txt","filename":"","files":"[{\"id\":\"vq48d2ycb\",\"name\":\"code\",\"code\":\"Form state\\n└── React Hook Form or local component state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9929b949-273d-477e-a9a3-a0f3a905e016","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Redux docs say most form state probably should not be kept in Redux; it is usually better to keep form data in form components while editing, then dispatch an action when the user is done.","styles":{}}],"children":[]},{"id":"c71f8276-50ba-46de-954f-12d06dbc25ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b23a59e9-f460-4157-8f3a-bcd2814c42e0","type":"procode","props":{"code":"Form state while typing = local/form library\nSubmitted result = update server or global state\n","language":"txt","filename":"","files":"[{\"id\":\"enecyzs8h\",\"name\":\"code\",\"code\":\"Form state while typing = local/form library\\nSubmitted result = update server or global state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c5a40242-58a6-4cb3-bff9-d7735ba33374","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use React Hook Form for:","styles":{}}],"children":[]},{"id":"185f1358-798d-456c-aa40-fa9f310544e1","type":"procode","props":{"code":"Login form\nRegister form\nProfile form\nCreate product form\nCheckout form\nMulti-field forms\nValidation-heavy forms\n","language":"txt","filename":"","files":"[{\"id\":\"2a3lwvtoa\",\"name\":\"code\",\"code\":\"Login form\\nRegister form\\nProfile form\\nCreate product form\\nCheckout form\\nMulti-field forms\\nValidation-heavy forms\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c1e173a6-437e-41a3-b9bb-1042493a87e9","type":"divider","props":{},"children":[]},{"id":"b30416a8-312b-4bd1-814a-a5a5189d299b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use URL State Instead","styles":{}}],"children":[]},{"id":"cbea0bef-c79b-4737-8184-8756e56a8402","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Some state belongs in the URL.","styles":{}}],"children":[]},{"id":"5a8ea5cf-61b3-4b47-ad60-00979c9ae196","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Examples:","styles":{}}],"children":[]},{"id":"fa353f7f-f1a7-434e-94e2-87d93aa6c29a","type":"procode","props":{"code":"Search keyword\nPage number\nFilter value\nSort option\nSelected tab\nCategory slug\nProduct ID\n","language":"txt","filename":"","files":"[{\"id\":\"j2m29lysx\",\"name\":\"code\",\"code\":\"Search keyword\\nPage number\\nFilter value\\nSort option\\nSelected tab\\nCategory slug\\nProduct ID\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e1b027a9-b195-4448-9d9e-e86b31d5479b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example URL:","styles":{}}],"children":[]},{"id":"3d29781c-fa7b-4604-8cef-77e8496e527d","type":"procode","props":{"code":"/products?search=keyboard&page=2&sort=latest\n","language":"txt","filename":"","files":"[{\"id\":\"nuc9mdpqy\",\"name\":\"code\",\"code\":\"/products?search=keyboard&page=2&sort=latest\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2061c7c6-c68f-45af-aea0-948e64a1b50d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"81f12bf2-bcc0-4c86-91ae-def4f8d503df","type":"procode","props":{"code":"If state should be shareable or bookmarkable,\nput it in the URL.\n","language":"txt","filename":"","files":"[{\"id\":\"iy20gifo1\",\"name\":\"code\",\"code\":\"If state should be shareable or bookmarkable,\\nput it in the URL.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9b1c7cca-48cb-4823-8de0-1487273bb842","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use URL state when:","styles":{}}],"children":[]},{"id":"11f75af5-9f37-4bbd-9ff6-597976f05248","type":"procode","props":{"code":"User can refresh and keep same result\nUser can share link\nBrowser back/forward should work\nSEO or route meaning matters\nState describes page location\n","language":"txt","filename":"","files":"[{\"id\":\"qmh21x2p7\",\"name\":\"code\",\"code\":\"User can refresh and keep same result\\nUser can share link\\nBrowser back/forward should work\\nSEO or route meaning matters\\nState describes page location\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"076faaed-588f-4e8b-9b6f-fa73119fe92e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not put these only in global state if the URL should represent them.","styles":{}}],"children":[]},{"id":"74a02d69-192f-463d-8e6a-a7f84af39fae","type":"divider","props":{},"children":[]},{"id":"c707ce35-14b7-4b97-a802-14b6adddea9c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When You Should Not Use a State Library","styles":{}}],"children":[]},{"id":"154d01ec-ce90-430f-b6dd-2300183ae850","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not use a state management library when:","styles":{}}],"children":[]},{"id":"d8c76f2b-bce0-4811-ab4d-b69591b849f1","type":"procode","props":{"code":"State is only used in one component\nState is only used by parent and child\nState can be lifted to a nearby parent\nState is simple form input\nState is server data better handled by TanStack Query\nState is URL data better handled by router\nYou only want to avoid writing props once\nThe app is still very small\n","language":"txt","filename":"","files":"[{\"id\":\"limhx50l5\",\"name\":\"code\",\"code\":\"State is only used in one component\\nState is only used by parent and child\\nState can be lifted to a nearby parent\\nState is simple form input\\nState is server data better handled by TanStack Query\\nState is URL data better handled by router\\nYou only want to avoid writing props once\\nThe app is still very small\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01974f21-9ead-425e-b963-b1ce3cde0e88","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"aee8a2af-19fa-49db-b3fa-acf8bfa93ca9","type":"procode","props":{"code":"Do not install a state library just because the app uses state.\n","language":"txt","filename":"","files":"[{\"id\":\"8a09hdwiz\",\"name\":\"code\",\"code\":\"Do not install a state library just because the app uses state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1b94e3ed-ec01-4c80-98bc-70b155d910aa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"db139a98-9719-4f25-8e6f-28e9d15eccae","type":"procode","props":{"code":"const useButtonStore = create((set) => ({\n isHovered: false,\n setHovered: (value: boolean) => set({ isHovered: value }),\n}))\n","language":"tsx","filename":"","files":"[{\"id\":\"usuao42ve\",\"name\":\"code\",\"code\":\"const useButtonStore = create((set) => ({\\n isHovered: false,\\n setHovered: (value: boolean) => set({ isHovered: value }),\\n}))\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1fe8c8d0-be54-4246-b6e2-60cac5577dc5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"12f1a6d3-1c88-4197-9bc4-9b6106a5ddaf","type":"procode","props":{"code":"const [isHovered, setIsHovered] = useState(false)\n","language":"tsx","filename":"","files":"[{\"id\":\"skskrx9tt\",\"name\":\"code\",\"code\":\"const [isHovered, setIsHovered] = useState(false)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"51c052a3-2480-4cfe-af5f-9f51b7c0aadb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c6dec523-548b-41b9-834a-ca92b716d095","type":"procode","props":{"code":"Local UI state should stay local.\n","language":"txt","filename":"","files":"[{\"id\":\"e7imzork2\",\"name\":\"code\",\"code\":\"Local UI state should stay local.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8ad9246e-fb3f-444e-ab88-cc9a9d9fcf68","type":"divider","props":{},"children":[]},{"id":"5d263f5b-db27-4f3a-b869-954ef3236f94","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Good Reasons to Use a State Management Library","styles":{}}],"children":[]},{"id":"5d1b71e8-192f-4c18-b285-cc5ff49aa3da","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use a state management library when:","styles":{}}],"children":[]},{"id":"464a3820-9ae6-4bf6-b1fc-dc4d5f945f8a","type":"procode","props":{"code":"Many unrelated components need the same state\nThe state is used across many pages\nProps drilling becomes painful\nContext becomes too large\nState changes from many places\nState logic has many actions\nYou need persistence\nYou need devtools/debugging\nYou need clear global state architecture\nThe app is medium or large\n","language":"txt","filename":"","files":"[{\"id\":\"p5ys7i76s\",\"name\":\"code\",\"code\":\"Many unrelated components need the same state\\nThe state is used across many pages\\nProps drilling becomes painful\\nContext becomes too large\\nState changes from many places\\nState logic has many actions\\nYou need persistence\\nYou need devtools/debugging\\nYou need clear global state architecture\\nThe app is medium or large\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58500d76-7822-4567-8d83-636006bbb0e6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"0b5e8aba-585d-4dcb-a292-6d192aa59800","type":"procode","props":{"code":"Use a library when it reduces complexity,\nnot when it adds complexity.\n","language":"txt","filename":"","files":"[{\"id\":\"wquzaukqi\",\"name\":\"code\",\"code\":\"Use a library when it reduces complexity,\\nnot when it adds complexity.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a24555d3-1635-45ac-8376-99495764c36f","type":"divider","props":{},"children":[]},{"id":"07687160-c925-4214-abd9-81e8f16a20c2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Bad Reasons to Use a State Management Library","styles":{}}],"children":[]},{"id":"52730876-3fc9-4b8e-bd3f-05c65bfdd6a4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad reasons:","styles":{}}],"children":[]},{"id":"d0106699-ef08-4eab-a0cf-ac3b90be3332","type":"procode","props":{"code":"Because every React app needs one\nBecause useState looks too simple\nBecause Redux/Zustand is popular\nBecause you want to avoid learning props\nBecause one prop is passed two levels down\nBecause all state must be global\nBecause API data needs to be stored somewhere\n","language":"txt","filename":"","files":"[{\"id\":\"yke9f328b\",\"name\":\"code\",\"code\":\"Because every React app needs one\\nBecause useState looks too simple\\nBecause Redux/Zustand is popular\\nBecause you want to avoid learning props\\nBecause one prop is passed two levels down\\nBecause all state must be global\\nBecause API data needs to be stored somewhere\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7f2750e-8047-464c-8520-359d0461a57d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better mindset:","styles":{}}],"children":[]},{"id":"80ff10bf-b011-42bd-b2b2-daa3fc8eede2","type":"procode","props":{"code":"Use the smallest tool that solves the real problem.\n","language":"txt","filename":"","files":"[{\"id\":\"9747qylv7\",\"name\":\"code\",\"code\":\"Use the smallest tool that solves the real problem.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1df2b850-224a-4e95-9582-147003e3dd45","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"fd334fd5-01f0-4fbf-bb49-2faa95097348","type":"procode","props":{"code":"State library is not a default requirement.\nIt is a scaling tool.\n","language":"txt","filename":"","files":"[{\"id\":\"zmlq5mrgc\",\"name\":\"code\",\"code\":\"State library is not a default requirement.\\nIt is a scaling tool.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fba6be27-8bc7-4124-9237-29b4c464cc86","type":"divider","props":{},"children":[]},{"id":"5f6157fc-1d2e-4e35-8285-c1c33c634732","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Example: Modal State","styles":{}}],"children":[]},{"id":"d9c44f10-ffe6-45aa-af18-005b9b6c7312","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If modal is only used in one component:","styles":{}}],"children":[]},{"id":"021d6533-d28e-4f1f-bcd7-16c92ce6ea11","type":"procode","props":{"code":"const [isOpen, setIsOpen] = useState(false)\n","language":"tsx","filename":"","files":"[{\"id\":\"y1eqyxvn3\",\"name\":\"code\",\"code\":\"const [isOpen, setIsOpen] = useState(false)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a865856d-ae4d-4be9-a6c6-9456b93b6cc8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use local state.","styles":{}}],"children":[]},{"id":"5771e9b1-5117-44d9-84ef-eafd0223372f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If many pages can open the same global modal:","styles":{}}],"children":[]},{"id":"73659605-5b79-4d70-aa6b-f03febede114","type":"procode","props":{"code":"Navbar\nProductCard\nDashboard\nSettingsPage\n└── all can open same modal\n","language":"txt","filename":"","files":"[{\"id\":\"yjvlt6yjw\",\"name\":\"code\",\"code\":\"Navbar\\nProductCard\\nDashboard\\nSettingsPage\\n└── all can open same modal\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"78308e1d-8d01-40f7-a822-e515436b83ac","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use Zustand or global store.","styles":{}}],"children":[]},{"id":"17478222-f389-4325-add6-2e615d08fa13","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"14b3a5b6-8bab-4857-831c-df1cf882bafd","type":"procode","props":{"code":"One place opens modal → useState\nMany places open modal → global store\n","language":"txt","filename":"","files":"[{\"id\":\"obo1t89wl\",\"name\":\"code\",\"code\":\"One place opens modal → useState\\nMany places open modal → global store\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7fd43953-3fcd-4eb1-be72-f3784e881669","type":"divider","props":{},"children":[]},{"id":"ebb65828-87aa-4a42-bdde-da2b987d5308","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Example: Theme State","styles":{}}],"children":[]},{"id":"049eef01-c3a2-4f99-9d2f-417f24b9a243","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Theme is usually global.","styles":{}}],"children":[]},{"id":"37b22bb5-37b2-44da-8742-c2036afe7c1a","type":"procode","props":{"code":"Theme affects:\n├── Navbar\n├── Sidebar\n├── Page background\n├── Buttons\n├── Cards\n└── Forms\n","language":"txt","filename":"","files":"[{\"id\":\"qt0iz0gas\",\"name\":\"code\",\"code\":\"Theme affects:\\n├── Navbar\\n├── Sidebar\\n├── Page background\\n├── Buttons\\n├── Cards\\n└── Forms\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"841cbc38-b5c0-4701-b5fe-d7bc631663fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good tools:","styles":{}}],"children":[]},{"id":"e8efdc10-e9b0-448c-b88d-b37583c9aa13","type":"procode","props":{"code":"Context\nZustand\nRedux\nlocalStorage persistence\n","language":"txt","filename":"","files":"[{\"id\":\"7ktndnuxp\",\"name\":\"code\",\"code\":\"Context\\nZustand\\nRedux\\nlocalStorage persistence\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"908aa382-360f-44d5-8a80-9f56e8454a02","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5972bfeb-826f-4d38-9879-a0542c31200d","type":"procode","props":{"code":"Theme is shared across the app,\nso global state can make sense.\n","language":"txt","filename":"","files":"[{\"id\":\"welgpyud8\",\"name\":\"code\",\"code\":\"Theme is shared across the app,\\nso global state can make sense.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9285dfd0-f6c6-4ff0-911e-16cf2e9649ce","type":"divider","props":{},"children":[]},{"id":"83e678b7-2c33-4e34-bdb0-45ed355ff1af","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Example: Cart State","styles":{}}],"children":[]},{"id":"87aa4536-5878-479a-846d-4bf6b8f038c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Cart can be global client state.","styles":{}}],"children":[]},{"id":"6891a527-8836-41bf-8aea-5411b5e8e666","type":"procode","props":{"code":"Cart is used by:\n├── Product card\n├── Cart icon\n├── Cart page\n├── Checkout page\n└── Order summary\n","language":"txt","filename":"","files":"[{\"id\":\"pjlmswfkh\",\"name\":\"code\",\"code\":\"Cart is used by:\\n├── Product card\\n├── Cart icon\\n├── Cart page\\n├── Checkout page\\n└── Order summary\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"35959bf9-d581-4cb2-8346-b6d63ef1cac2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good tool:","styles":{}}],"children":[]},{"id":"7a7ffc7f-318f-45bc-9687-458c1b7dc675","type":"procode","props":{"code":"Zustand or Redux\n","language":"txt","filename":"","files":"[{\"id\":\"cl2ojr17h\",\"name\":\"code\",\"code\":\"Zustand or Redux\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"492c3c67-ec8d-40fa-b550-cfdbcd7c910e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"But if cart is saved on server:","styles":{}}],"children":[]},{"id":"7a1142ff-34b7-444e-a81e-3cc236c37cce","type":"procode","props":{"code":"Server cart data\n└── TanStack Query can help fetch and sync it\n","language":"txt","filename":"","files":"[{\"id\":\"6m3awszvq\",\"name\":\"code\",\"code\":\"Server cart data\\n└── TanStack Query can help fetch and sync it\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"35669520-17a3-4d65-a798-c77fa1ddd637","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"012a4b68-3f0c-40de-91fe-ead23b388c76","type":"procode","props":{"code":"Client-only cart → state library\nServer-synced cart → TanStack Query + mutation\n","language":"txt","filename":"","files":"[{\"id\":\"byl4i1qeu\",\"name\":\"code\",\"code\":\"Client-only cart → state library\\nServer-synced cart → TanStack Query + mutation\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f31a6215-a9cf-4ec5-844f-441d1130c027","type":"divider","props":{},"children":[]},{"id":"132575d3-a486-4009-946d-55e8b3f5b462","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Example: Auth User","styles":{}}],"children":[]},{"id":"0efcffc2-e8f8-48b4-8d6a-1aac8678cf62","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Auth state is usually shared.","styles":{}}],"children":[]},{"id":"6589854b-38fa-4a19-8b1b-42c01e1ee6af","type":"procode","props":{"code":"Auth user is used by:\n├── Navbar\n├── User menu\n├── Protected routes\n├── Dashboard\n├── Settings\n└── Permissions\n","language":"txt","filename":"","files":"[{\"id\":\"8zc53nvb1\",\"name\":\"code\",\"code\":\"Auth user is used by:\\n├── Navbar\\n├── User menu\\n├── Protected routes\\n├── Dashboard\\n├── Settings\\n└── Permissions\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1539f68-2f5f-4b5c-b743-5b9e3279323a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Possible tools:","styles":{}}],"children":[]},{"id":"0c1be61e-3c8d-4c82-906d-da36206d4270","type":"procode","props":{"code":"Context\nZustand\nRedux\nTanStack Query if fetched from API\nAuth provider SDK\n","language":"txt","filename":"","files":"[{\"id\":\"x6g8k8j8y\",\"name\":\"code\",\"code\":\"Context\\nZustand\\nRedux\\nTanStack Query if fetched from API\\nAuth provider SDK\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"89fe01b8-029b-41b2-a561-125135e0381f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"57069000-1ccc-4920-8a58-57c785f7beb9","type":"procode","props":{"code":"Auth often needs shared state,\nbut the exact tool depends on the auth system.\n","language":"txt","filename":"","files":"[{\"id\":\"c5s2llbxv\",\"name\":\"code\",\"code\":\"Auth often needs shared state,\\nbut the exact tool depends on the auth system.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6eb24645-3da1-4ee7-866e-155876c75dcd","type":"divider","props":{},"children":[]},{"id":"42639291-cc71-46ab-b374-31c487750a59","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Example: Product List","styles":{}}],"children":[]},{"id":"c50f057f-03d8-4cf5-a3da-c17514bc5a25","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Product list usually comes from API.","styles":{}}],"children":[]},{"id":"f54006b3-5108-490d-b3d4-8317cd9d5a5d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"476b4ccb-6cd3-4cd9-8107-5647d6889396","type":"procode","props":{"code":"Global store manually stores product API data\n","language":"txt","filename":"","files":"[{\"id\":\"eyk1mfmnx\",\"name\":\"code\",\"code\":\"Global store manually stores product API data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4bf4dc04-3e48-4453-8c97-8115fd3b1ee2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"2d2753f2-37e8-4be8-9c2c-9ac2310d1f8d","type":"procode","props":{"code":"TanStack Query manages:\n├── fetch\n├── cache\n├── loading\n├── error\n├── refetch\n└── stale data\n","language":"txt","filename":"","files":"[{\"id\":\"if8ccnkip\",\"name\":\"code\",\"code\":\"TanStack Query manages:\\n├── fetch\\n├── cache\\n├── loading\\n├── error\\n├── refetch\\n└── stale data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"615fb1cb-1872-4e59-b38e-9847fe681ce9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"17eff337-4ddf-4b75-b2a1-e857dd2524b5","type":"procode","props":{"code":"Product API data is server state,\nnot normal client state.\n","language":"txt","filename":"","files":"[{\"id\":\"dyi5npsnd\",\"name\":\"code\",\"code\":\"Product API data is server state,\\nnot normal client state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"72910517-4fbc-4148-99a9-8baa6cbe51ad","type":"divider","props":{},"children":[]},{"id":"821febc4-4431-4deb-9ff2-c7d80196076d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Example: Sidebar State","styles":{}}],"children":[]},{"id":"879021e7-cb43-4e5e-97af-80f785ff028d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sidebar open/close can be local or global.","styles":{}}],"children":[]},{"id":"b3d42004-50d4-48b5-9793-e5318d531bbc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Local:","styles":{}}],"children":[]},{"id":"8b90797d-cd13-491a-8019-d281c1686ffa","type":"procode","props":{"code":"Only DashboardLayout needs sidebar state\n└── useState inside DashboardLayout\n","language":"txt","filename":"","files":"[{\"id\":\"x4g8mfvwd\",\"name\":\"code\",\"code\":\"Only DashboardLayout needs sidebar state\\n└── useState inside DashboardLayout\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5aea2cfd-2cfd-44fa-a64b-1f5d0d9b565e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Global:","styles":{}}],"children":[]},{"id":"8a10f7a8-8b9f-4742-8ffb-aa766ccc246c","type":"procode","props":{"code":"Navbar button opens sidebar\nSettings button closes sidebar\nKeyboard shortcut toggles sidebar\nMany components need sidebar state\n└── Zustand/Redux/Context\n","language":"txt","filename":"","files":"[{\"id\":\"0pfh9tgky\",\"name\":\"code\",\"code\":\"Navbar button opens sidebar\\nSettings button closes sidebar\\nKeyboard shortcut toggles sidebar\\nMany components need sidebar state\\n└── Zustand/Redux/Context\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"038f2b57-5130-4f99-8abf-ff03a156f806","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"b87da1b9-6ef8-4367-a05e-5c04faf3333b","type":"procode","props":{"code":"Keep sidebar state local until many components need it.\n","language":"txt","filename":"","files":"[{\"id\":\"2shlxkzeg\",\"name\":\"code\",\"code\":\"Keep sidebar state local until many components need it.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aff80309-a779-4b32-afef-a46d9d67dfcf","type":"divider","props":{},"children":[]},{"id":"fe24fcf2-de12-4317-8eab-f931bc7624ea","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Choosing Between Zustand and Redux Toolkit","styles":{}}],"children":[]},{"id":"e91cbd61-3b41-4ebc-9997-741337c38bfd","type":"procode","props":{"code":"Choose Zustand when:\n├── You want simple global state\n├── You want less boilerplate\n├── App is small to medium\n├── State logic is not too strict\n├── You want quick setup\n└── You prefer hook-based store usage\n\nChoose Redux Toolkit when:\n├── App is large\n├── Team needs strong conventions\n├── State updates are complex\n├── Debugging history matters\n├── Middleware is needed\n├── You want predictable action flow\n└── You already use Redux ecosystem\n","language":"txt","filename":"","files":"[{\"id\":\"p4uyclt4o\",\"name\":\"code\",\"code\":\"Choose Zustand when:\\n├── You want simple global state\\n├── You want less boilerplate\\n├── App is small to medium\\n├── State logic is not too strict\\n├── You want quick setup\\n└── You prefer hook-based store usage\\n\\nChoose Redux Toolkit when:\\n├── App is large\\n├── Team needs strong conventions\\n├── State updates are complex\\n├── Debugging history matters\\n├── Middleware is needed\\n├── You want predictable action flow\\n└── You already use Redux ecosystem\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0320c40-2fe9-4f38-83f4-e7f6c9aed3ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"94e73849-91bd-4322-b9b6-ddcdfea3b769","type":"procode","props":{"code":"Zustand = simpler\nRedux Toolkit = more structured\n","language":"txt","filename":"","files":"[{\"id\":\"r876lvwja\",\"name\":\"code\",\"code\":\"Zustand = simpler\\nRedux Toolkit = more structured\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7b964dc1-d8b5-4ef5-a71c-c5831f9e57e7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Both can be good. The best choice depends on app size, team style, and state complexity.","styles":{}}],"children":[]},{"id":"a02776f6-b2b0-465f-8752-c24988a9ec29","type":"divider","props":{},"children":[]},{"id":"c994379b-4e89-4c73-a8ab-0399a4f42cff","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"State Library Comparison","styles":{}}],"children":[]},{"id":"fb835313-1a13-47b9-b6a7-503655a34c47","type":"procode","props":{"code":"useState\n├── Local state\n├── Simple\n└── Best first choice\n\nuseReducer\n├── Complex local state\n├── Many actions\n└── Good before external library\n\nContext\n├── Deep shared value\n├── Avoid props drilling\n└── Good for theme/auth/language\n\nZustand\n├── Simple global client state\n├── Low boilerplate\n└── Good for app-wide UI state\n\nRedux Toolkit\n├── Structured global client state\n├── Strong conventions\n└── Good for large apps\n\nTanStack Query\n├── Server/API state\n├── Cache/refetch/mutation\n└── Best for async server data\n\nReact Hook Form\n├── Form state\n├── Validation\n└── Best for complex forms\n","language":"txt","filename":"","files":"[{\"id\":\"6ae9b4mdv\",\"name\":\"code\",\"code\":\"useState\\n├── Local state\\n├── Simple\\n└── Best first choice\\n\\nuseReducer\\n├── Complex local state\\n├── Many actions\\n└── Good before external library\\n\\nContext\\n├── Deep shared value\\n├── Avoid props drilling\\n└── Good for theme/auth/language\\n\\nZustand\\n├── Simple global client state\\n├── Low boilerplate\\n└── Good for app-wide UI state\\n\\nRedux Toolkit\\n├── Structured global client state\\n├── Strong conventions\\n└── Good for large apps\\n\\nTanStack Query\\n├── Server/API state\\n├── Cache/refetch/mutation\\n└── Best for async server data\\n\\nReact Hook Form\\n├── Form state\\n├── Validation\\n└── Best for complex forms\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b240f388-0348-471a-a096-32336977db00","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"85231b47-ef53-42be-bd85-507ff44a6a97","type":"procode","props":{"code":"There is no one best state tool.\nThere is a best tool for each state type.\n","language":"txt","filename":"","files":"[{\"id\":\"iu94jizgd\",\"name\":\"code\",\"code\":\"There is no one best state tool.\\nThere is a best tool for each state type.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0029d628-a2c3-4b2d-b98b-184da6cc0de0","type":"divider","props":{},"children":[]},{"id":"287fdefa-c111-46f8-95f1-ab6eb6286358","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"038a1e67-cfc1-41bc-ba12-c8d8270a18a7","type":"procode","props":{"code":"Mistake 1: Putting all state in global store\nMistake 2: Using Redux/Zustand for local button state\nMistake 3: Using Context for everything\nMistake 4: Putting server API data into client store manually\nMistake 5: Putting every form field into global state\nMistake 6: Installing a library before the problem exists\nMistake 7: Keeping duplicated state in many places\nMistake 8: Not understanding client state vs server state\nMistake 9: Using global state to avoid simple props\nMistake 10: Creating one huge store for unrelated data\n","language":"txt","filename":"","files":"[{\"id\":\"cbozkjxwv\",\"name\":\"code\",\"code\":\"Mistake 1: Putting all state in global store\\nMistake 2: Using Redux/Zustand for local button state\\nMistake 3: Using Context for everything\\nMistake 4: Putting server API data into client store manually\\nMistake 5: Putting every form field into global state\\nMistake 6: Installing a library before the problem exists\\nMistake 7: Keeping duplicated state in many places\\nMistake 8: Not understanding client state vs server state\\nMistake 9: Using global state to avoid simple props\\nMistake 10: Creating one huge store for unrelated data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6395324f-74c2-4880-bf2c-9714b2ba7342","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"b02c6a99-9fe7-4176-bb1b-55e0fb2525c1","type":"procode","props":{"code":"Keep local state local.\nLift state when siblings need it.\nUse Context for deep shared state.\nUse Zustand/Redux for global client state.\nUse TanStack Query for server state.\nUse React Hook Form for complex form state.\n","language":"txt","filename":"","files":"[{\"id\":\"ysgweegjq\",\"name\":\"code\",\"code\":\"Keep local state local.\\nLift state when siblings need it.\\nUse Context for deep shared state.\\nUse Zustand/Redux for global client state.\\nUse TanStack Query for server state.\\nUse React Hook Form for complex form state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a479e965-75f6-4230-ad01-800ea7f5e91c","type":"divider","props":{},"children":[]},{"id":"f30375e1-e739-402d-b7ef-e34d2a60fdc7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Bad vs Good Pattern","styles":{}}],"children":[]},{"id":"bb68761d-2af7-447d-8d5b-17297e910727","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"be8cde23-2fc2-46d9-b61a-8732b5bfec08","type":"procode","props":{"code":"Global Store\n├── email input\n├── password input\n├── hover state\n├── product API data\n├── modal state\n├── theme\n├── search query\n├── page number\n└── all app state\n","language":"txt","filename":"","files":"[{\"id\":\"7j2xwxusb\",\"name\":\"code\",\"code\":\"Global Store\\n├── email input\\n├── password input\\n├── hover state\\n├── product API data\\n├── modal state\\n├── theme\\n├── search query\\n├── page number\\n└── all app state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1c5d59eb-cf48-4cc7-a172-ae2ccbb83228","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"757d7898-8a7d-486c-9b68-c9ec3acc1288","type":"procode","props":{"code":"Everything becomes global.\nState becomes harder to reason about.\n","language":"txt","filename":"","files":"[{\"id\":\"z8tj06w2g\",\"name\":\"code\",\"code\":\"Everything becomes global.\\nState becomes harder to reason about.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1bd25fd9-57f3-4379-8317-973512d38db0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"412854bf-2499-493d-9436-0974625e02db","type":"procode","props":{"code":"useState\n├── email input\n├── password input\n└── modal used in one component\n\nURL\n├── search query\n└── page number\n\nTanStack Query\n└── product API data\n\nZustand / Redux\n├── theme\n├── global modal\n└── cart\n","language":"txt","filename":"","files":"[{\"id\":\"3dit59c53\",\"name\":\"code\",\"code\":\"useState\\n├── email input\\n├── password input\\n└── modal used in one component\\n\\nURL\\n├── search query\\n└── page number\\n\\nTanStack Query\\n└── product API data\\n\\nZustand / Redux\\n├── theme\\n├── global modal\\n└── cart\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c082eb06-0cce-4a30-a7fd-32bbe2e50b16","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"821dcd94-6b9a-4d34-bcf0-cea670ee5c6d","type":"procode","props":{"code":"Put state where it naturally belongs.\n","language":"txt","filename":"","files":"[{\"id\":\"6io8jg6fy\",\"name\":\"code\",\"code\":\"Put state where it naturally belongs.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"12b765a8-7613-42a2-958b-6a3b0512f226","type":"divider","props":{},"children":[]},{"id":"4ffa2914-4cbf-4ea7-aeb8-883dccfd04ef","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Decision Guide","styles":{}}],"children":[]},{"id":"9ce2f14d-66aa-458b-8afc-f717d38970ec","type":"procode","props":{"code":"Question 1:\nIs it used by only one component?\n└── useState\n\nQuestion 2:\nDo sibling components need it?\n└── lift state up\n\nQuestion 3:\nIs update logic complex?\n└── useReducer\n\nQuestion 4:\nIs it needed deeply by many components?\n└── Context\n\nQuestion 5:\nIs it global client UI state?\n└── Zustand or Redux Toolkit\n\nQuestion 6:\nDoes it come from an API?\n└── TanStack Query\n\nQuestion 7:\nIs it form input state?\n└── local state or React Hook Form\n\nQuestion 8:\nShould it be shareable in URL?\n└── URL search params\n","language":"txt","filename":"","files":"[{\"id\":\"7krrw4dp0\",\"name\":\"code\",\"code\":\"Question 1:\\nIs it used by only one component?\\n└── useState\\n\\nQuestion 2:\\nDo sibling components need it?\\n└── lift state up\\n\\nQuestion 3:\\nIs update logic complex?\\n└── useReducer\\n\\nQuestion 4:\\nIs it needed deeply by many components?\\n└── Context\\n\\nQuestion 5:\\nIs it global client UI state?\\n└── Zustand or Redux Toolkit\\n\\nQuestion 6:\\nDoes it come from an API?\\n└── TanStack Query\\n\\nQuestion 7:\\nIs it form input state?\\n└── local state or React Hook Form\\n\\nQuestion 8:\\nShould it be shareable in URL?\\n└── URL search params\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d15f0fbd-c48e-48dc-8f13-1f0cd375f451","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"9d1a1f6b-2586-4bb6-9f0c-b130f125033f","type":"procode","props":{"code":"Start with the simplest state solution.\nUpgrade only when the app needs it.\n","language":"txt","filename":"","files":"[{\"id\":\"go49bilxu\",\"name\":\"code\",\"code\":\"Start with the simplest state solution.\\nUpgrade only when the app needs it.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"49852d7d-3a95-43e7-999b-03fa0e32cd30","type":"divider","props":{},"children":[]},{"id":"b9abb8a0-e459-40f4-8cbc-8334feb6f58a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"f23045eb-cc33-40b8-bebf-10f3012ff88e","type":"procode","props":{"code":"Professional State Management Pattern\n├── Keep state close to where it is used\n├── Use useState for local state\n├── Lift state up for sibling sharing\n├── Use useReducer for complex local logic\n├── Use Context for deep shared values\n├── Use Zustand for simple global client state\n├── Use Redux Toolkit for large structured global state\n├── Use TanStack Query for server state\n├── Use React Hook Form for complex forms\n├── Use URL params for shareable page state\n├── Avoid one global store for everything\n├── Avoid duplicating state\n├── Separate client state and server state\n└── Choose tools based on actual complexity\n","language":"txt","filename":"","files":"[{\"id\":\"qe3y3hgnn\",\"name\":\"code\",\"code\":\"Professional State Management Pattern\\n├── Keep state close to where it is used\\n├── Use useState for local state\\n├── Lift state up for sibling sharing\\n├── Use useReducer for complex local logic\\n├── Use Context for deep shared values\\n├── Use Zustand for simple global client state\\n├── Use Redux Toolkit for large structured global state\\n├── Use TanStack Query for server state\\n├── Use React Hook Form for complex forms\\n├── Use URL params for shareable page state\\n├── Avoid one global store for everything\\n├── Avoid duplicating state\\n├── Separate client state and server state\\n└── Choose tools based on actual complexity\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56028faf-4c54-48f5-a9da-84f3b4c51e98","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended project structure:","styles":{}}],"children":[]},{"id":"765a436c-98d7-4226-b201-58cc814309c2","type":"procode","props":{"code":"src/\n├── components/\n│ └── ui/\n│\n├── contexts/\n│ ├── auth-context.tsx\n│ └── theme-context.tsx\n│\n├── stores/\n│ ├── modal-store.ts\n│ ├── cart-store.ts\n│ └── sidebar-store.ts\n│\n├── hooks/\n│ └── use-products.ts\n│\n├── services/\n│ └── product-service.ts\n│\n├── features/\n│ └── products/\n│ ├── components/\n│ ├── hooks/\n│ └── services/\n│\n└── App.tsx\n","language":"txt","filename":"","files":"[{\"id\":\"agvsvx8vf\",\"name\":\"code\",\"code\":\"src/\\n├── components/\\n│ └── ui/\\n│\\n├── contexts/\\n│ ├── auth-context.tsx\\n│ └── theme-context.tsx\\n│\\n├── stores/\\n│ ├── modal-store.ts\\n│ ├── cart-store.ts\\n│ └── sidebar-store.ts\\n│\\n├── hooks/\\n│ └── use-products.ts\\n│\\n├── services/\\n│ └── product-service.ts\\n│\\n├── features/\\n│ └── products/\\n│ ├── components/\\n│ ├── hooks/\\n│ └── services/\\n│\\n└── App.tsx\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0443e9f9-8f6e-4b41-a803-2299cd8008a5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"cf7ea191-9076-45a5-86cd-e51fefc28e05","type":"procode","props":{"code":"contexts/ → shared React context\nstores/ → global client state\nhooks/ → reusable logic\nservices/ → API request logic\nfeatures/ → feature-specific state and UI\n","language":"txt","filename":"","files":"[{\"id\":\"nj8hwbs2i\",\"name\":\"code\",\"code\":\"contexts/ → shared React context\\nstores/ → global client state\\nhooks/ → reusable logic\\nservices/ → API request logic\\nfeatures/ → feature-specific state and UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"77059bf9-e7a3-4177-b50a-36f611122bac","type":"divider","props":{},"children":[]},{"id":"26dd379f-4576-4398-9ab7-96a1e415d791","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"8bc87797-f51e-4ab0-b121-014307fbf4c1","type":"procode","props":{"code":"State tool by distance:\n├── Same component → useState\n├── Nearby components → lift state up\n├── Same section but deep → Context\n├── Whole app client state → Zustand / Redux\n├── Server/API data → TanStack Query\n└── Form data → React Hook Form\n","language":"txt","filename":"","files":"[{\"id\":\"kg2szb1tb\",\"name\":\"code\",\"code\":\"State tool by distance:\\n├── Same component → useState\\n├── Nearby components → lift state up\\n├── Same section but deep → Context\\n├── Whole app client state → Zustand / Redux\\n├── Server/API data → TanStack Query\\n└── Form data → React Hook Form\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"932182d8-f5dd-4669-8018-2b961f0e7750","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another way:","styles":{}}],"children":[]},{"id":"47db8bb1-a024-4bbf-872f-8a30211ff87f","type":"procode","props":{"code":"Do not ask:\n\"Which state library should I use?\"\n\nAsk:\n\"What type of state is this?\"\n","language":"txt","filename":"","files":"[{\"id\":\"8lkdmnmil\",\"name\":\"code\",\"code\":\"Do not ask:\\n\\\"Which state library should I use?\\\"\\n\\nAsk:\\n\\\"What type of state is this?\\\"\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"077da7fa-b69d-4752-83ab-a04f34222ba7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then choose the tool.","styles":{}}],"children":[]},{"id":"57b5aac3-5f6f-4fb8-aedd-401e7e156b7b","type":"divider","props":{},"children":[]},{"id":"a6ba06fb-a210-48d3-8f39-15ad1d71be4b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"9bdc3307-cb14-4ff3-a295-ac533d9dfb6a","type":"procode","props":{"code":"Use State Management Library When\n├── State is shared across many components\n├── State is needed across many pages\n├── Props drilling becomes painful\n├── Context becomes too large\n├── State updates happen from many places\n├── State logic has many actions\n├── You need persistent global client state\n├── You need better debugging or structure\n├── The app is medium or large\n└── Built-in React state tools are no longer enough\n","language":"txt","filename":"","files":"[{\"id\":\"ui17hja6e\",\"name\":\"code\",\"code\":\"Use State Management Library When\\n├── State is shared across many components\\n├── State is needed across many pages\\n├── Props drilling becomes painful\\n├── Context becomes too large\\n├── State updates happen from many places\\n├── State logic has many actions\\n├── You need persistent global client state\\n├── You need better debugging or structure\\n├── The app is medium or large\\n└── Built-in React state tools are no longer enough\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cfdbf6f4-9e9f-44b1-a5ee-b3fe227d76c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do ","styles":{}},{"type":"text","text":"not","styles":{"bold":true}},{"type":"text","text":" use a state management library when:","styles":{}}],"children":[]},{"id":"8fd644eb-fbed-4d05-8eaa-a31438ba3e48","type":"procode","props":{"code":"State is local\nState is simple\nState belongs to one component\nState can be lifted easily\nState is form typing state\nState is server/API data\nState belongs in the URL\nYou only want to avoid passing one prop\n","language":"txt","filename":"","files":"[{\"id\":\"nemkvzczr\",\"name\":\"code\",\"code\":\"State is local\\nState is simple\\nState belongs to one component\\nState can be lifted easily\\nState is form typing state\\nState is server/API data\\nState belongs in the URL\\nYou only want to avoid passing one prop\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d88f4c3-3057-4b7a-a718-db645a4ee668","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The professional mindset is: ","styles":{}},{"type":"text","text":"start with React built-in state, keep state close to where it is used, and only use a state management library when shared client state becomes difficult to manage with props, Context, or useReducer.","styles":{"bold":true}}],"children":[]},{"id":"77b24f56-0023-4097-b8a0-6030cf1ba373","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]