[{"id":"b47cfa86-9057-428b-b87f-73b293387dd1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Server State vs Client State","styles":{}}],"children":[]},{"id":"0183332e-5d2b-4b22-b109-24e44117006f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Server State vs Client State","styles":{"bold":true}},{"type":"text","text":" means understanding where your data comes from and who owns it.","styles":{}}],"children":[]},{"id":"d9ba99f0-1013-4401-9534-725c18d6bd51","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"47eedc76-9f61-4a71-9668-b0c3d69dda8f","type":"procode","props":{"code":"Client State = data owned by the browser UI\nServer State = data owned by backend/API/database\n","language":"txt","filename":"","files":"[{\"id\":\"e2olj0ub8\",\"name\":\"code\",\"code\":\"Client State = data owned by the browser UI\\nServer State = data owned by backend/API/database\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"713431f8-cbd0-4811-82a5-bd347a77fce3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"9acab50f-7466-448f-91c8-d7a90938e6b8","type":"procode","props":{"code":"Client State\n├── modal open or closed\n├── input text\n├── selected tab\n└── dropdown open or closed\n\nServer State\n├── products from database\n├── user profile from API\n├── orders from backend\n└── comments from server\n","language":"txt","filename":"","files":"[{\"id\":\"6np28a11t\",\"name\":\"code\",\"code\":\"Client State\\n├── modal open or closed\\n├── input text\\n├── selected tab\\n└── dropdown open or closed\\n\\nServer State\\n├── products from database\\n├── user profile from API\\n├── orders from backend\\n└── comments from server\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fdbd1ac8-9e49-44ec-b188-72c009aee407","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React state is a component’s memory for values that should change the UI, while server-state tools like TanStack Query focus on fetching, caching, synchronizing, and updating remote server state.","styles":{}}],"children":[]},{"id":"ded9a64c-0103-48c9-911b-05ba0b4e3ffc","type":"divider","props":{},"children":[]},{"id":"3a1436f7-966f-45d0-9422-1379d5281fb5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"a4f641db-ef65-4259-aac7-8869b0211e3e","type":"procode","props":{"code":"Server State vs Client State\n├── Client State\n│ ├── Lives in React/browser\n│ ├── Controlled by user interaction\n│ ├── Uses useState/useReducer/Context/Zustand\n│ └── Example: modal open\n│\n└── Server State\n ├── Lives in backend/database/API\n ├── Fetched by frontend\n ├── Needs loading/error/cache/refetch\n └── Example: product list from API\n","language":"txt","filename":"","files":"[{\"id\":\"abjvt62m8\",\"name\":\"code\",\"code\":\"Server State vs Client State\\n├── Client State\\n│ ├── Lives in React/browser\\n│ ├── Controlled by user interaction\\n│ ├── Uses useState/useReducer/Context/Zustand\\n│ └── Example: modal open\\n│\\n└── Server State\\n ├── Lives in backend/database/API\\n ├── Fetched by frontend\\n ├── Needs loading/error/cache/refetch\\n └── Example: product list from API\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"69a4efc7-5892-4639-96c0-a8874ff511b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"79e390a9-a9c1-45b7-b27c-c0508ef28c39","type":"procode","props":{"code":"Client state controls UI.\nServer state comes from backend.\n","language":"txt","filename":"","files":"[{\"id\":\"8tizklr8x\",\"name\":\"code\",\"code\":\"Client state controls UI.\\nServer state comes from backend.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d8f7a7e6-4c0c-4899-a2ba-5c76624ccd7e","type":"divider","props":{},"children":[]},{"id":"c9a481c3-e071-4772-a078-d7792fa30e1a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Client State","styles":{}}],"children":[]},{"id":"2bb3bd9c-216b-4b94-8fe5-5718580109dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Client State","styles":{"bold":true}},{"type":"text","text":" is data that belongs to the frontend UI.","styles":{}}],"children":[]},{"id":"e60e3a7d-5675-4e2e-933c-6633e8f6aabf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"ee843595-afa4-49d0-961f-ffe330411fde","type":"procode","props":{"code":"Client State\n├── Form input value\n├── Search text\n├── Modal open/close\n├── Dropdown open/close\n├── Active tab\n├── Sidebar open/close\n├── Theme\n├── Selected item\n├── Stepper current step\n└── Temporary UI value\n","language":"txt","filename":"","files":"[{\"id\":\"0sop4ayva\",\"name\":\"code\",\"code\":\"Client State\\n├── Form input value\\n├── Search text\\n├── Modal open/close\\n├── Dropdown open/close\\n├── Active tab\\n├── Sidebar open/close\\n├── Theme\\n├── Selected item\\n├── Stepper current step\\n└── Temporary UI value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5ddd0704-d754-4c7f-9ba6-c0184bab125f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"90672ad2-7796-4579-b2e2-b9e98fcba844","type":"procode","props":{"code":"Client state is created and controlled in the browser.\n","language":"txt","filename":"","files":"[{\"id\":\"11d0d0inu\",\"name\":\"code\",\"code\":\"Client state is created and controlled in the browser.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ddd2f9e2-90fd-420a-a3b5-5a3e29ff0a82","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"bec71edf-16b5-426c-940f-149c3316e05e","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function ModalExample() {\n const [open, setOpen] = useState(false)\n\n return (\n

\n \n\n {open && (\n

This is a modal.

\n\n \n

\n )}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"1i25tr9ye\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function ModalExample() {\\n const [open, setOpen] = useState(false)\\n\\n return (\\n

\\n \\n\\n {open && (\\n

\\n

This is a modal.

\\n\\n \\n

\\n )}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"54309fbc-4787-4c68-8341-7ff346d49a60","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Here, ","styles":{}},{"type":"text","text":"open","styles":{"code":true}},{"type":"text","text":" is client state because it only controls UI behavior.","styles":{}}],"children":[]},{"id":"328116a8-1fcb-4fd4-a30d-f6c7c30b6bc4","type":"divider","props":{},"children":[]},{"id":"031086cc-777b-42ee-a589-9c1b3acd99db","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Server State","styles":{}}],"children":[]},{"id":"1d3e06bf-6c0b-48f2-8049-cf0964efe9d8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Server State","styles":{"bold":true}},{"type":"text","text":" is data that belongs to the backend, API, or database.","styles":{}}],"children":[]},{"id":"c9414f90-ae32-4e17-859f-210840365b89","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"a9e30141-4465-4fd0-a0b0-a51546da0e16","type":"procode","props":{"code":"Server State\n├── Product data\n├── User profile data\n├── Blog posts\n├── Comments\n├── Orders\n├── Notifications from backend\n├── Payment history\n├── Course list\n├── Dashboard analytics\n└── Database records\n","language":"txt","filename":"","files":"[{\"id\":\"j4b07xb8s\",\"name\":\"code\",\"code\":\"Server State\\n├── Product data\\n├── User profile data\\n├── Blog posts\\n├── Comments\\n├── Orders\\n├── Notifications from backend\\n├── Payment history\\n├── Course list\\n├── Dashboard analytics\\n└── Database records\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"66a7a9a7-9b1f-4e99-8abc-8288077154ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"abff74f8-7f78-4e0e-ba17-d057bc692867","type":"procode","props":{"code":"Server state is not owned by React.\nReact only displays a copy of it.\n","language":"txt","filename":"","files":"[{\"id\":\"t2t2onmqv\",\"name\":\"code\",\"code\":\"Server state is not owned by React.\\nReact only displays a copy of it.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"46bc2770-9899-4a2c-bd23-d7f61b4ad890","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"4bc73ec5-cd17-471a-9edf-96bdb80a3b44","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\ntype Product = {\n id: number\n title: string\n}\n\nexport default function ProductList() {\n const [products, setProducts] = useState([])\n const [loading, setLoading] = useState(true)\n const [error, setError] = useState(\"\")\n\n useEffect(() => {\n async function fetchProducts() {\n try {\n setLoading(true)\n setError(\"\")\n\n const response = await fetch(\"https://dummyjson.com/products\")\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch products\")\n }\n\n const data = await response.json()\n\n setProducts(data.products)\n } catch (error) {\n setError(\n error instanceof Error\n ? error.message\n : \"Something went wrong\"\n )\n } finally {\n setLoading(false)\n }\n }\n\n fetchProducts()\n }, [])\n\n if (loading) {\n return

\n }\n\n if (error) {\n return

{error}

\n }\n\n return (\n

{product.title}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"syf9fpz9a\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\ntype Product = {\\n id: number\\n title: string\\n}\\n\\nexport default function ProductList() {\\n const [products, setProducts] = useState([])\\n const [loading, setLoading] = useState(true)\\n const [error, setError] = useState(\\\"\\\")\\n\\n useEffect(() => {\\n async function fetchProducts() {\\n try {\\n setLoading(true)\\n setError(\\\"\\\")\\n\\n const response = await fetch(\\\"https://dummyjson.com/products\\\")\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch products\\\")\\n }\\n\\n const data = await response.json()\\n\\n setProducts(data.products)\\n } catch (error) {\\n setError(\\n error instanceof Error\\n ? error.message\\n : \\\"Something went wrong\\\"\\n )\\n } finally {\\n setLoading(false)\\n }\\n }\\n\\n fetchProducts()\\n }, [])\\n\\n if (loading) {\\n return

\\n }\\n\\n if (error) {\\n return

{error}

\\n }\\n\\n return (\\n

{product.title}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fe1c7ae0-1781-4f98-b9e3-1a92ec986f93","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Here, ","styles":{}},{"type":"text","text":"products","styles":{"code":true}},{"type":"text","text":" are server state because the real source is the API/database.","styles":{}}],"children":[]},{"id":"c9f5b1c3-bd9a-4da0-a6b4-8f1cd509bd33","type":"divider","props":{},"children":[]},{"id":"59a7b458-8716-4141-af8c-83b312baaf95","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Main Difference","styles":{}}],"children":[]},{"id":"99226e52-283e-40cf-951f-f7a032939fe2","type":"procode","props":{"code":"Client State\n├── owned by frontend\n├── changed by user interaction\n├── usually temporary\n├── usually synchronous\n└── stored with React state tools\n\nServer State\n├── owned by backend\n├── fetched from API/database\n├── can become stale\n├── usually asynchronous\n└── managed with fetch, custom hook, SWR, or TanStack Query\n","language":"txt","filename":"","files":"[{\"id\":\"jpqjk6ea7\",\"name\":\"code\",\"code\":\"Client State\\n├── owned by frontend\\n├── changed by user interaction\\n├── usually temporary\\n├── usually synchronous\\n└── stored with React state tools\\n\\nServer State\\n├── owned by backend\\n├── fetched from API/database\\n├── can become stale\\n├── usually asynchronous\\n└── managed with fetch, custom hook, SWR, or TanStack Query\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc8247cb-2a10-42ae-be12-607db770d5ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"6ba5140c-a078-4182-a7f8-7428cf522ea8","type":"procode","props":{"code":"If frontend owns it → client state\nIf backend owns it → server state\n","language":"txt","filename":"","files":"[{\"id\":\"p09kl1dws\",\"name\":\"code\",\"code\":\"If frontend owns it → client state\\nIf backend owns it → server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"72186678-57b7-4d14-bbd9-60b59d35a2ce","type":"divider","props":{},"children":[]},{"id":"e90a39ec-0a22-479f-94c4-7c386dbbf87a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Easy Examples","styles":{}}],"children":[]},{"id":"396205e8-ade3-49b3-b492-5f06c8c220af","type":"procode","props":{"code":"Search input text\n└── Client State\n\nSearch result from API\n└── Server State\n\nModal open/close\n└── Client State\n\nProduct list from database\n└── Server State\n\nSelected tab\n└── Client State\n\nLogged-in user profile from backend\n└── Server State\n\nTheme dark/light\n└── Client State\n\nOrders from API\n└── Server State\n","language":"txt","filename":"","files":"[{\"id\":\"zlzzzm5uq\",\"name\":\"code\",\"code\":\"Search input text\\n└── Client State\\n\\nSearch result from API\\n└── Server State\\n\\nModal open/close\\n└── Client State\\n\\nProduct list from database\\n└── Server State\\n\\nSelected tab\\n└── Client State\\n\\nLogged-in user profile from backend\\n└── Server State\\n\\nTheme dark/light\\n└── Client State\\n\\nOrders from API\\n└── Server State\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07ea56a9-4497-4757-a81b-f17369f2000d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a9235529-9e1b-451c-ad84-be6561287d2f","type":"procode","props":{"code":"UI behavior = client state\nRemote data = server state\n","language":"txt","filename":"","files":"[{\"id\":\"bcbeuk01a\",\"name\":\"code\",\"code\":\"UI behavior = client state\\nRemote data = server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e958d3b5-4158-4b82-906c-4c9bfbc0505d","type":"divider","props":{},"children":[]},{"id":"52674272-8f49-4a15-a120-23ff617068c9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Client State Example: Search Text","styles":{}}],"children":[]},{"id":"91dacf54-69d1-4e37-b595-e0f6c7e7cea9","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function SearchBox() {\n const [search, setSearch] = useState(\"\")\n\n return (\n

\n setSearch(event.target.value)}\n placeholder=\"Search...\"\n />\n\n

Search keyword: {search}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ztaj27w38\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function SearchBox() {\\n const [search, setSearch] = useState(\\\"\\\")\\n\\n return (\\n

\\n setSearch(event.target.value)}\\n placeholder=\\\"Search...\\\"\\n />\\n\\n

Search keyword: {search}

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9f8a386e-1e30-490e-8eec-44032022ae42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why client state?","styles":{}}],"children":[]},{"id":"6e0da1ea-cd6a-46fd-a39e-0d982827b566","type":"procode","props":{"code":"search text is created by user typing.\nIt only controls the UI.\nIt is not saved in database yet.\n","language":"txt","filename":"","files":"[{\"id\":\"8ds27s512\",\"name\":\"code\",\"code\":\"search text is created by user typing.\\nIt only controls the UI.\\nIt is not saved in database yet.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"31f6af3b-b1f0-4765-8bf5-044fd2e72402","type":"divider","props":{},"children":[]},{"id":"dafa0ceb-fc88-414c-b40f-1a91bb6bc8ef","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Server State Example: Product List","styles":{}}],"children":[]},{"id":"b51555db-21b3-4496-951f-60c9346e2166","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\ntype Product = {\n id: number\n title: string\n}\n\nexport default function ProductsPage() {\n const [products, setProducts] = useState([])\n\n useEffect(() => {\n async function getProducts() {\n const response = await fetch(\"https://dummyjson.com/products\")\n const data = await response.json()\n\n setProducts(data.products)\n }\n\n getProducts()\n }, [])\n\n return (\n

{product.title}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"vay69px3a\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\ntype Product = {\\n id: number\\n title: string\\n}\\n\\nexport default function ProductsPage() {\\n const [products, setProducts] = useState([])\\n\\n useEffect(() => {\\n async function getProducts() {\\n const response = await fetch(\\\"https://dummyjson.com/products\\\")\\n const data = await response.json()\\n\\n setProducts(data.products)\\n }\\n\\n getProducts()\\n }, [])\\n\\n return (\\n

{product.title}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca5f8950-fea5-4fd0-8b7f-ab12aa65f10c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why server state?","styles":{}}],"children":[]},{"id":"607db00d-c74d-4951-a6fd-26daaa36fefb","type":"procode","props":{"code":"products come from API.\nAPI/database is the real source.\nReact only stores a temporary copy.\n","language":"txt","filename":"","files":"[{\"id\":\"6yl3llu58\",\"name\":\"code\",\"code\":\"products come from API.\\nAPI/database is the real source.\\nReact only stores a temporary copy.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4e50a7f3-5967-4b02-bf1d-95a64fbd5f39","type":"divider","props":{},"children":[]},{"id":"4151ef6a-00eb-41c5-8901-e88f816fbb9b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Client State Tools","styles":{}}],"children":[]},{"id":"ae4629e0-9dd0-4b71-94f2-1e056b95578d","type":"procode","props":{"code":"Client State Tools\n├── useState\n├── useReducer\n├── Context\n├── Zustand\n├── Redux\n└── Jotai\n","language":"txt","filename":"","files":"[{\"id\":\"n6l8nos0r\",\"name\":\"code\",\"code\":\"Client State Tools\\n├── useState\\n├── useReducer\\n├── Context\\n├── Zustand\\n├── Redux\\n└── Jotai\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ccb1f52c-9b80-42af-8da8-9384f7195c83","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use these for:","styles":{}}],"children":[]},{"id":"7c3ef6bd-240b-46a0-9b77-615647e7b1be","type":"procode","props":{"code":"UI state\nForm draft\nTheme\nModal\nDropdown\nAuth UI state\nSelected item\nSmall app state\n","language":"txt","filename":"","files":"[{\"id\":\"y2r3ofi5q\",\"name\":\"code\",\"code\":\"UI state\\nForm draft\\nTheme\\nModal\\nDropdown\\nAuth UI state\\nSelected item\\nSmall app state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f4817b8-5572-4b15-953f-2f0490ef2d4e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3904ed15-7482-4c59-b80f-959b14602004","type":"procode","props":{"code":"Client state tools manage frontend-owned state.\n","language":"txt","filename":"","files":"[{\"id\":\"dqih0cz5n\",\"name\":\"code\",\"code\":\"Client state tools manage frontend-owned state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e8ab588-7cff-4911-85a3-8149a1120d5b","type":"divider","props":{},"children":[]},{"id":"716d6145-6d69-4fbd-9078-3c23f99d9dab","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Server State Tools","styles":{}}],"children":[]},{"id":"108ef764-87cc-4791-8337-ed462b0a5a4a","type":"procode","props":{"code":"Server State Tools\n├── fetch + useEffect\n├── Custom fetch hook\n├── TanStack Query\n├── SWR\n├── Apollo Client\n└── RTK Query\n","language":"txt","filename":"","files":"[{\"id\":\"nvwqlo9f9\",\"name\":\"code\",\"code\":\"Server State Tools\\n├── fetch + useEffect\\n├── Custom fetch hook\\n├── TanStack Query\\n├── SWR\\n├── Apollo Client\\n└── RTK Query\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"115b1ac4-ec67-4aa6-ae1a-7ca612f910b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use these for:","styles":{}}],"children":[]},{"id":"d2bdc5e9-cffb-437f-88a4-1c17b2761d07","type":"procode","props":{"code":"API data\nDatabase records\nCached server responses\nPagination data\nSearch results from backend\nMutation results\nRefetching remote data\n","language":"txt","filename":"","files":"[{\"id\":\"of9t1su25\",\"name\":\"code\",\"code\":\"API data\\nDatabase records\\nCached server responses\\nPagination data\\nSearch results from backend\\nMutation results\\nRefetching remote data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"471073d7-246c-40ec-8c9c-76cfb3d9caa5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d7862632-1107-41f8-b4f1-4ae9579c345e","type":"procode","props":{"code":"Server state tools manage remote data problems.\n","language":"txt","filename":"","files":"[{\"id\":\"3e5y09enf\",\"name\":\"code\",\"code\":\"Server state tools manage remote data problems.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bafd405e-8de3-4d56-bfac-aa1968f4ba12","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"TanStack Query is designed for server-state problems like caching, synchronizing, and updating remote data in web applications.","styles":{}}],"children":[]},{"id":"8b868200-b455-4bee-a7e8-c34a9b63dc1e","type":"divider","props":{},"children":[]},{"id":"74bfa7b5-ac3b-4318-8930-51d8c1e67806","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Why Server State is Harder","styles":{}}],"children":[]},{"id":"e28f3201-7b6b-4d44-bcbe-d3f73dd823e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Server state has extra problems.","styles":{}}],"children":[]},{"id":"53d9551c-f96d-4c70-82a7-e19dc81be96b","type":"procode","props":{"code":"Server State Problems\n├── Loading state\n├── Error state\n├── Empty state\n├── Stale data\n├── Refetching\n├── Caching\n├── Pagination\n├── Background updates\n├── Duplicate requests\n├── Race conditions\n└── Mutations\n","language":"txt","filename":"","files":"[{\"id\":\"0kte5ozrd\",\"name\":\"code\",\"code\":\"Server State Problems\\n├── Loading state\\n├── Error state\\n├── Empty state\\n├── Stale data\\n├── Refetching\\n├── Caching\\n├── Pagination\\n├── Background updates\\n├── Duplicate requests\\n├── Race conditions\\n└── Mutations\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"90b69966-00fd-474e-b910-e619b5c917a1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Client state is usually simpler:","styles":{}}],"children":[]},{"id":"7fdbb584-3f8e-43e0-9961-6fc2a0e5ffdd","type":"procode","props":{"code":"Client State Problems\n├── Where should state live?\n├── Should state be lifted?\n├── Is state duplicated?\n└── Is state derived?\n","language":"txt","filename":"","files":"[{\"id\":\"krgmx263r\",\"name\":\"code\",\"code\":\"Client State Problems\\n├── Where should state live?\\n├── Should state be lifted?\\n├── Is state duplicated?\\n└── Is state derived?\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4ffc953c-9767-4323-a86b-167a873d1684","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React recommends avoiding redundant, duplicated, contradictory, and deeply nested state because a good state structure makes components easier to update and debug.","styles":{}}],"children":[]},{"id":"e45ad83f-da60-41d5-a4f6-884293f2641f","type":"divider","props":{},"children":[]},{"id":"64a28b1a-9ab6-485a-a441-a1dc1ccee21d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Client State with useState","styles":{}}],"children":[]},{"id":"e4fa9b58-d08d-462e-b80b-81ed2768f4d4","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function Tabs() {\n const [activeTab, setActiveTab] = useState(\"overview\")\n\n return (\n

\n \n\n \n\n {activeTab === \"overview\" &&

Overview content

}\n {activeTab === \"details\" &&

Details content

}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"5b0ixcbgk\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function Tabs() {\\n const [activeTab, setActiveTab] = useState(\\\"overview\\\")\\n\\n return (\\n

\\n \\n\\n \\n\\n {activeTab === \\\"overview\\\" &&

Overview content

}\\n {activeTab === \\\"details\\\" &&

Details content

}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"66b2ac54-bded-43be-9544-a489d4e06a62","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b86a653d-35d4-4f0a-8959-b619b741aaf7","type":"procode","props":{"code":"activeTab belongs to the UI.\nSo it is client state.\n","language":"txt","filename":"","files":"[{\"id\":\"jgsn60c3r\",\"name\":\"code\",\"code\":\"activeTab belongs to the UI.\\nSo it is client state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9766ff92-e325-42d8-b935-ffdb0ce1a83c","type":"divider","props":{},"children":[]},{"id":"af9b1467-c50b-4a71-b89d-4a3c289ffd10","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Server State with Custom Fetch Hook","styles":{}}],"children":[]},{"id":"e589e8a5-54d2-4d75-abc1-9759839d5be6","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\ntype UseFetchResult = {\n data: T | null\n loading: boolean\n error: string | null\n}\n\nexport function useFetch(url: string): UseFetchResult {\n const [data, setData] = useState(null)\n const [loading, setLoading] = useState(true)\n const [error, setError] = useState(null)\n\n useEffect(() => {\n let ignore = false\n\n async function fetchData() {\n try {\n setLoading(true)\n setError(null)\n\n const response = await fetch(url)\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch data\")\n }\n\n const result = (await response.json()) as T\n\n if (!ignore) {\n setData(result)\n }\n } catch (error) {\n if (!ignore) {\n setError(\n error instanceof Error\n ? error.message\n : \"Something went wrong\"\n )\n }\n } finally {\n if (!ignore) {\n setLoading(false)\n }\n }\n }\n\n fetchData()\n\n return () => {\n ignore = true\n }\n }, [url])\n\n return {\n data,\n loading,\n error,\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"7jixk8czj\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\ntype UseFetchResult = {\\n data: T | null\\n loading: boolean\\n error: string | null\\n}\\n\\nexport function useFetch(url: string): UseFetchResult {\\n const [data, setData] = useState(null)\\n const [loading, setLoading] = useState(true)\\n const [error, setError] = useState(null)\\n\\n useEffect(() => {\\n let ignore = false\\n\\n async function fetchData() {\\n try {\\n setLoading(true)\\n setError(null)\\n\\n const response = await fetch(url)\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch data\\\")\\n }\\n\\n const result = (await response.json()) as T\\n\\n if (!ignore) {\\n setData(result)\\n }\\n } catch (error) {\\n if (!ignore) {\\n setError(\\n error instanceof Error\\n ? error.message\\n : \\\"Something went wrong\\\"\\n )\\n }\\n } finally {\\n if (!ignore) {\\n setLoading(false)\\n }\\n }\\n }\\n\\n fetchData()\\n\\n return () => {\\n ignore = true\\n }\\n }, [url])\\n\\n return {\\n data,\\n loading,\\n error,\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"760085da-e43e-4797-9f76-b00dc3acd133","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"d768bdb1-eb58-4e56-a10a-67edde7dcd74","type":"procode","props":{"code":"type User = {\n id: number\n name: string\n}\n\nexport default function UsersPage() {\n const {\n data: users,\n loading,\n error,\n } = useFetch(\"https://jsonplaceholder.typicode.com/users\")\n\n if (loading) {\n return

Loading users...

\n }\n\n if (error) {\n return

{error}

\n }\n\n return (\n

{user.name}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"nw2b6g5g0\",\"name\":\"code\",\"code\":\"type User = {\\n id: number\\n name: string\\n}\\n\\nexport default function UsersPage() {\\n const {\\n data: users,\\n loading,\\n error,\\n } = useFetch(\\\"https://jsonplaceholder.typicode.com/users\\\")\\n\\n if (loading) {\\n return

Loading users...

\\n }\\n\\n if (error) {\\n return

{error}

\\n }\\n\\n return (\\n

{user.name}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"621d541a-5d96-49c2-96c9-c3a3ad86bcdc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"0c0af488-2cf9-4858-93ec-966f9c4def3c","type":"procode","props":{"code":"useFetch manages server state manually.\n","language":"txt","filename":"","files":"[{\"id\":\"0d6gqsqq9\",\"name\":\"code\",\"code\":\"useFetch manages server state manually.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f355c43-4cf2-408d-88b2-cb43791b3c47","type":"divider","props":{},"children":[]},{"id":"6c4f543f-e7c4-40f4-b715-1753aec73b16","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Server State with TanStack Query","styles":{}}],"children":[]},{"id":"81950c2a-163a-4cc0-a5ec-92798c374c39","type":"procode","props":{"code":"import { useQuery } from \"@tanstack/react-query\"\n\ntype Product = {\n id: number\n title: string\n}\n\nasync function getProducts(): Promise {\n const response = await fetch(\"https://dummyjson.com/products\")\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch products\")\n }\n\n const data = await response.json()\n\n return data.products\n}\n\nexport function ProductsPage() {\n const {\n data: products,\n isLoading,\n error,\n } = useQuery({\n queryKey: [\"products\"],\n queryFn: getProducts,\n })\n\n if (isLoading) {\n return

Loading products...

\n }\n\n if (error) {\n return

Failed to load products.

\n }\n\n return (\n

{product.title}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"z9y6lipcy\",\"name\":\"code\",\"code\":\"import { useQuery } from \\\"@tanstack/react-query\\\"\\n\\ntype Product = {\\n id: number\\n title: string\\n}\\n\\nasync function getProducts(): Promise {\\n const response = await fetch(\\\"https://dummyjson.com/products\\\")\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch products\\\")\\n }\\n\\n const data = await response.json()\\n\\n return data.products\\n}\\n\\nexport function ProductsPage() {\\n const {\\n data: products,\\n isLoading,\\n error,\\n } = useQuery({\\n queryKey: [\\\"products\\\"],\\n queryFn: getProducts,\\n })\\n\\n if (isLoading) {\\n return

Loading products...

\\n }\\n\\n if (error) {\\n return

Failed to load products.

\\n }\\n\\n return (\\n

{product.title}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b867d2e0-a4f9-4d36-84d2-b58036be284c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5af66b61-581c-4b12-b8b9-44c6cd6142cf","type":"procode","props":{"code":"TanStack Query manages server state automatically.\n","language":"txt","filename":"","files":"[{\"id\":\"j4u66jb4q\",\"name\":\"code\",\"code\":\"TanStack Query manages server state automatically.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"964538ee-186a-4cd8-9111-ffd91e9b79c6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"TanStack Query uses query keys to manage cached query data, and its React docs present ","styles":{}},{"type":"text","text":"useQuery","styles":{"code":true}},{"type":"text","text":" as the main API for fetching and reading server state.","styles":{}}],"children":[]},{"id":"be114a97-f68e-4011-b5e7-33a132fa76a6","type":"divider","props":{},"children":[]},{"id":"41d433a6-1db3-4f81-88d0-e56a6e44e4d1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mixed Example: Client State + Server State","styles":{}}],"children":[]},{"id":"a96305fd-0b48-468d-a055-f3df1cd7c6df","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Real React pages often use both.","styles":{}}],"children":[]},{"id":"e4a28d08-1fd6-4f37-ad03-1e9475da4ccd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"f4785a44-885d-4592-8053-59b4f5f92b93","type":"procode","props":{"code":"ProductsPage\n├── Server State\n│ └── products from API\n│\n└── Client State\n └── search input typed by user\n","language":"txt","filename":"","files":"[{\"id\":\"txgall4w4\",\"name\":\"code\",\"code\":\"ProductsPage\\n├── Server State\\n│ └── products from API\\n│\\n└── Client State\\n └── search input typed by user\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f4df3483-b836-4670-bab1-d37134583f0c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Code:","styles":{}}],"children":[]},{"id":"109f2e36-d5f7-4de1-9d30-3e72633f8d54","type":"procode","props":{"code":"import { useState } from \"react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\ntype Product = {\n id: number\n title: string\n}\n\nasync function getProducts(): Promise {\n const response = await fetch(\"https://dummyjson.com/products\")\n const data = await response.json()\n\n return data.products\n}\n\nexport default function ProductsPage() {\n const [search, setSearch] = useState(\"\")\n\n const {\n data: products = [],\n isLoading,\n error,\n } = useQuery({\n queryKey: [\"products\"],\n queryFn: getProducts,\n })\n\n const filteredProducts = products.filter((product) =>\n product.title.toLowerCase().includes(search.toLowerCase())\n )\n\n if (isLoading) {\n return

\n }\n\n if (error) {\n return

Failed to load products.

\n }\n\n return (\n

\n setSearch(event.target.value)}\n placeholder=\"Search products...\"\n />\n\n

{product.title}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"u43np10dw\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\nimport { useQuery } from \\\"@tanstack/react-query\\\"\\n\\ntype Product = {\\n id: number\\n title: string\\n}\\n\\nasync function getProducts(): Promise {\\n const response = await fetch(\\\"https://dummyjson.com/products\\\")\\n const data = await response.json()\\n\\n return data.products\\n}\\n\\nexport default function ProductsPage() {\\n const [search, setSearch] = useState(\\\"\\\")\\n\\n const {\\n data: products = [],\\n isLoading,\\n error,\\n } = useQuery({\\n queryKey: [\\\"products\\\"],\\n queryFn: getProducts,\\n })\\n\\n const filteredProducts = products.filter((product) =>\\n product.title.toLowerCase().includes(search.toLowerCase())\\n )\\n\\n if (isLoading) {\\n return

\\n }\\n\\n if (error) {\\n return

Failed to load products.

\\n }\\n\\n return (\\n

\\n setSearch(event.target.value)}\\n placeholder=\\\"Search products...\\\"\\n />\\n\\n

{product.title}

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7fa311f0-4e79-41de-82fb-b2c68c2281bd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"9ae08854-6ee5-4d12-9a31-7ed919686c37","type":"procode","props":{"code":"products = server state\nsearch = client state\nfilteredProducts = derived value\n","language":"txt","filename":"","files":"[{\"id\":\"fz3dqs1m9\",\"name\":\"code\",\"code\":\"products = server state\\nsearch = client state\\nfilteredProducts = derived value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c3e4c62e-4d74-4294-b1a4-129c433611f4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d1834941-d8ce-440c-8d4c-5b0cc72712b5","type":"procode","props":{"code":"Do not put everything into one state category.\nA page can use both.\n","language":"txt","filename":"","files":"[{\"id\":\"ru7syl15f\",\"name\":\"code\",\"code\":\"Do not put everything into one state category.\\nA page can use both.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c1bfcb0a-33a6-42bd-aefb-1fcd7058d37c","type":"divider","props":{},"children":[]},{"id":"86016f0b-02c5-4e8e-b471-3bb15bbb49ec","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Derived State is Not Server or Client State","styles":{}}],"children":[]},{"id":"af3257fd-0428-4e5e-a162-c6262f35a633","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sometimes data is just calculated.","styles":{}}],"children":[]},{"id":"079c1e4e-2900-40ec-9024-77dad6923c5d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"48d33298-1d39-4f7f-b56d-8419d930059a","type":"procode","props":{"code":"const filteredProducts = products.filter((product) =>\n product.title.toLowerCase().includes(search.toLowerCase())\n)\n","language":"tsx","filename":"","files":"[{\"id\":\"1vjhh12e5\",\"name\":\"code\",\"code\":\"const filteredProducts = products.filter((product) =>\\n product.title.toLowerCase().includes(search.toLowerCase())\\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"36b974f8-d42e-45da-b922-02e496d4a18c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is not separate state.","styles":{}}],"children":[]},{"id":"5a012593-9f91-4f6d-accd-610ba72fd37d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It is derived value.","styles":{}}],"children":[]},{"id":"6ab55fcc-4785-43a4-b063-4ba97781db6d","type":"procode","props":{"code":"products → server state\nsearch → client state\nfilteredProducts → derived value\n","language":"txt","filename":"","files":"[{\"id\":\"8tackg08a\",\"name\":\"code\",\"code\":\"products → server state\\nsearch → client state\\nfilteredProducts → derived value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a820a0a6-56ae-45a0-96a9-ca9d09bacdf2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"80334517-f55f-43fe-b4b3-b49b5ce103be","type":"procode","props":{"code":"If data can be calculated, calculate it.\nDo not store it again.\n","language":"txt","filename":"","files":"[{\"id\":\"j0g9ifalp\",\"name\":\"code\",\"code\":\"If data can be calculated, calculate it.\\nDo not store it again.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf8a066b-99f8-498f-943f-aec71a98023f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React recommends avoiding redundant state when a value can be calculated from props or existing state during rendering.","styles":{}}],"children":[]},{"id":"9e077704-0735-4f1b-96d3-3c063d4f2fa4","type":"divider","props":{},"children":[]},{"id":"6e3cefe8-f494-4cd2-8956-08c3a2e45218","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Form State vs Submitted Data","styles":{}}],"children":[]},{"id":"2608674d-d103-4100-ad6a-e8e9c8f80f05","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Form draft is client state.","styles":{}}],"children":[]},{"id":"7d37afb7-8bb4-4d46-8ea6-4c44f84199c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Saved result is server state.","styles":{}}],"children":[]},{"id":"e3434a68-468a-4a80-b3bc-3e58196e3c0b","type":"procode","props":{"code":"Form input value\n└── Client State\n\nSaved profile in database\n└── Server State\n","language":"txt","filename":"","files":"[{\"id\":\"aj3gqjg7h\",\"name\":\"code\",\"code\":\"Form input value\\n└── Client State\\n\\nSaved profile in database\\n└── Server State\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7617310a-eb1c-497a-89ac-af4c072d36e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"2bdc11ab-df05-4698-ae68-246d7a017dc6","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function ProfileForm() {\n const [name, setName] = useState(\"\")\n\n async function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n await fetch(\"/api/profile\", {\n method: \"POST\",\n body: JSON.stringify({\n name,\n }),\n })\n }\n\n return (\n

\n setName(event.target.value)}\n placeholder=\"Name\"\n />\n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"mmnatlgls\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function ProfileForm() {\\n const [name, setName] = useState(\\\"\\\")\\n\\n async function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n await fetch(\\\"/api/profile\\\", {\\n method: \\\"POST\\\",\\n body: JSON.stringify({\\n name,\\n }),\\n })\\n }\\n\\n return (\\n

\\n setName(event.target.value)}\\n placeholder=\\\"Name\\\"\\n />\\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"40be9a92-c976-415d-92f5-6a7da348044a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"03a1dde8-286e-4a7e-b512-67ea463ec60f","type":"procode","props":{"code":"Before submit → client state\nAfter saved to backend → server state\n","language":"txt","filename":"","files":"[{\"id\":\"7pjgv5doi\",\"name\":\"code\",\"code\":\"Before submit → client state\\nAfter saved to backend → server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bdaa4a80-b964-4c40-9d2e-0ecb9e2f420a","type":"divider","props":{},"children":[]},{"id":"b599c6ce-1d64-4e7f-84e1-baaa26ba4005","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Auth State: Client or Server?","styles":{}}],"children":[]},{"id":"f6acc8e9-7ae4-4508-8a86-be47446f50a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Auth can be both.","styles":{}}],"children":[]},{"id":"7e58b7f4-3d6d-4277-bf59-6d3b39fe3139","type":"procode","props":{"code":"Auth UI State\n├── login form input\n├── loading button\n└── login modal open\n\nAuth Server State\n├── current user session\n├── user profile from backend\n├── role from database\n└── token/session validation\n","language":"txt","filename":"","files":"[{\"id\":\"cei17q1pi\",\"name\":\"code\",\"code\":\"Auth UI State\\n├── login form input\\n├── loading button\\n└── login modal open\\n\\nAuth Server State\\n├── current user session\\n├── user profile from backend\\n├── role from database\\n└── token/session validation\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f6f523f7-eced-4b28-9600-a9fd147dd62d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"0ed1896c-ac1c-4aaa-aa0a-3f2e6cffcad6","type":"procode","props":{"code":"Login form = client state\nAuthenticated user/session = server-backed state\n","language":"txt","filename":"","files":"[{\"id\":\"9onjg3ewx\",\"name\":\"code\",\"code\":\"Login form = client state\\nAuthenticated user/session = server-backed state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a79a0d4b-b373-4e38-9c50-4ebbdc74d22d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"6fbc68db-12a9-4312-8cd6-b0bdbc8d35d2","type":"procode","props":{"code":"email input → client state\npassword input → client state\ncurrent user from Supabase/API → server state\nuser role from profiles table → server state\n","language":"txt","filename":"","files":"[{\"id\":\"o6mzsbtq6\",\"name\":\"code\",\"code\":\"email input → client state\\npassword input → client state\\ncurrent user from Supabase/API → server state\\nuser role from profiles table → server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"310c87b6-c9f9-45b3-8d15-fbaeacbccc95","type":"divider","props":{},"children":[]},{"id":"5916811f-c7fd-4b93-a4b1-7bceb7e3fd10","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Cart State: Client or Server?","styles":{}}],"children":[]},{"id":"914a5dc7-a88c-4c1b-b809-95a895454e2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Cart can also be both.","styles":{}}],"children":[]},{"id":"289c5825-1a7e-41e7-935b-183326cdc254","type":"procode","props":{"code":"Local Cart\n├── stored in browser\n├── temporary\n├── good for guest cart\n└── client state\n\nServer Cart\n├── stored in database\n├── connected to account\n├── available across devices\n└── server state\n","language":"txt","filename":"","files":"[{\"id\":\"xfa9sfs12\",\"name\":\"code\",\"code\":\"Local Cart\\n├── stored in browser\\n├── temporary\\n├── good for guest cart\\n└── client state\\n\\nServer Cart\\n├── stored in database\\n├── connected to account\\n├── available across devices\\n└── server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50329192-bbd4-4127-8d68-77a71b10b8b3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"207ef3b9-e8e2-43be-80b3-752015b43bc0","type":"procode","props":{"code":"Who owns the cart decides the state type.\n","language":"txt","filename":"","files":"[{\"id\":\"8hhs56lqi\",\"name\":\"code\",\"code\":\"Who owns the cart decides the state type.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f40fbefe-fac2-4c08-beaf-86a1de69dd72","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If cart must sync across devices, it should be server state.","styles":{}}],"children":[]},{"id":"016767a6-aa03-4b7f-8f0f-8423486ea0de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If cart only exists in one browser, it can be client state.","styles":{}}],"children":[]},{"id":"3ec2416f-5cf1-4f70-9211-1d84d757232d","type":"divider","props":{},"children":[]},{"id":"b0abe449-c6b5-4b6d-944b-bc6cc682666e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Theme State: Client or Server?","styles":{}}],"children":[]},{"id":"2a6790c5-3ab4-4ead-972c-a96839558ab9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usually client state.","styles":{}}],"children":[]},{"id":"8db58cf7-3394-4fa4-a3d3-bf2f2c0fa9e2","type":"procode","props":{"code":"Theme\n├── light mode\n├── dark mode\n├── accent color\n└── user UI preference\n","language":"txt","filename":"","files":"[{\"id\":\"9allwayfx\",\"name\":\"code\",\"code\":\"Theme\\n├── light mode\\n├── dark mode\\n├── accent color\\n└── user UI preference\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"04495b4f-67b4-4dd2-85a5-f0c7ce9229ea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If stored only in browser:","styles":{}}],"children":[]},{"id":"6d0062f9-b35a-4f11-a982-aeabfba075ef","type":"procode","props":{"code":"theme = client state\n","language":"txt","filename":"","files":"[{\"id\":\"bhvnm35g8\",\"name\":\"code\",\"code\":\"theme = client state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1c9d2a58-e2a0-422b-960c-0c599804fdc9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If saved to user profile in database:","styles":{}}],"children":[]},{"id":"d12aa3b2-429b-46a0-a79c-0b6bc933735b","type":"procode","props":{"code":"theme preference from API = server state\n","language":"txt","filename":"","files":"[{\"id\":\"7o05ax3pr\",\"name\":\"code\",\"code\":\"theme preference from API = server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d99aa9cf-9fcb-4fee-8ec9-ad7fb3c93c8c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1243e643-7b55-4445-a9a3-4eec2fb6bd2f","type":"procode","props":{"code":"Local preference = client state\nSaved account preference = server state\n","language":"txt","filename":"","files":"[{\"id\":\"fd13wumy5\",\"name\":\"code\",\"code\":\"Local preference = client state\\nSaved account preference = server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5e52e603-9808-40e0-8afa-b37e9dddd65f","type":"divider","props":{},"children":[]},{"id":"0709f64a-7bb8-4e36-8f9f-dba7831902a8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Do Not Put Server State Everywhere in Context","styles":{}}],"children":[]},{"id":"017fdf7d-220f-4fe4-a1b1-2ac88e39db4e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"aa238aaf-8f89-4b06-bdaa-74c894cf77e7","type":"procode","props":{"code":"Context\n├── products\n├── users\n├── orders\n├── comments\n├── loading\n├── errors\n├── refetch logic\n└── cache logic\n","language":"txt","filename":"","files":"[{\"id\":\"1xpe5oohg\",\"name\":\"code\",\"code\":\"Context\\n├── products\\n├── users\\n├── orders\\n├── comments\\n├── loading\\n├── errors\\n├── refetch logic\\n└── cache logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fa3173cf-f989-4971-b176-372bd0914cfd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"12edbd88-0d9d-415b-a9ca-0a759c8c7b3b","type":"procode","props":{"code":"You rebuild server-state management manually.\nCaching and refetching become hard.\nContext can become too large.\n","language":"txt","filename":"","files":"[{\"id\":\"pz11pq9n5\",\"name\":\"code\",\"code\":\"You rebuild server-state management manually.\\nCaching and refetching become hard.\\nContext can become too large.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b4189ad3-0453-4971-9878-6ae92fccfd34","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"adce6d0c-0b0d-4e2f-bfa6-35ab8799f0b4","type":"procode","props":{"code":"TanStack Query\n├── products query\n├── users query\n├── orders query\n└── comments query\n","language":"txt","filename":"","files":"[{\"id\":\"c7oo2l8tk\",\"name\":\"code\",\"code\":\"TanStack Query\\n├── products query\\n├── users query\\n├── orders query\\n└── comments query\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"975dcd7c-560f-47df-8eea-fd03e8a3cdb7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d94bd3b5-d3af-402b-a7f2-6356513f4547","type":"procode","props":{"code":"Context is okay for app-wide client state.\nTanStack Query is better for complex server state.\n","language":"txt","filename":"","files":"[{\"id\":\"nilhpkvdq\",\"name\":\"code\",\"code\":\"Context is okay for app-wide client state.\\nTanStack Query is better for complex server state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bbbf168a-184b-4e02-8b49-a6337cfc1f71","type":"divider","props":{},"children":[]},{"id":"8d043c9a-a354-4060-a5d4-8b9177645793","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Do Not Copy Server State into Local State Without Reason","styles":{}}],"children":[]},{"id":"81e45c85-dd6f-4da5-994b-244ab841d829","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"f4034a20-10e5-42dd-b6aa-2db953de8ad4","type":"procode","props":{"code":"const { data: user } = useQuery({\n queryKey: [\"user\"],\n queryFn: getUser,\n})\n\nconst [localUser, setLocalUser] = useState(user)\n","language":"tsx","filename":"","files":"[{\"id\":\"b81de61rm\",\"name\":\"code\",\"code\":\"const { data: user } = useQuery({\\n queryKey: [\\\"user\\\"],\\n queryFn: getUser,\\n})\\n\\nconst [localUser, setLocalUser] = useState(user)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9dca1178-84ff-4235-b6bc-315db4df9c31","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"21f77043-1687-477f-bb93-611abc5e7a97","type":"procode","props":{"code":"Data is duplicated.\nlocalUser may become out of sync.\nMore bugs are possible.\n","language":"txt","filename":"","files":"[{\"id\":\"46uadem4o\",\"name\":\"code\",\"code\":\"Data is duplicated.\\nlocalUser may become out of sync.\\nMore bugs are possible.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"834c587e-b2b5-43ec-abd2-f5fcf058c89d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"81117574-fd29-4aa0-a9cd-4aa1b525ddc7","type":"procode","props":{"code":"const { data: user } = useQuery({\n queryKey: [\"user\"],\n queryFn: getUser,\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"6jefkejp8\",\"name\":\"code\",\"code\":\"const { data: user } = useQuery({\\n queryKey: [\\\"user\\\"],\\n queryFn: getUser,\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f02737ba-4292-4abf-9593-9eb292f94f2e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3b71e277-c5cb-41f8-a0de-110ec1a95bad","type":"procode","props":{"code":"Use server state directly unless you need a separate editable draft.\n","language":"txt","filename":"","files":"[{\"id\":\"rzvuy0zon\",\"name\":\"code\",\"code\":\"Use server state directly unless you need a separate editable draft.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b3117f74-80b0-4048-8a64-da42dc7c1a72","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good reason to copy:","styles":{}}],"children":[]},{"id":"38fc2a38-736b-45ea-b4b1-837d79bf9a96","type":"procode","props":{"code":"User opens edit form\n├── server state provides initial profile\n└── local form state becomes editable draft\n","language":"txt","filename":"","files":"[{\"id\":\"klposhua4\",\"name\":\"code\",\"code\":\"User opens edit form\\n├── server state provides initial profile\\n└── local form state becomes editable draft\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c581d5aa-8a6d-48be-bc75-57974a150404","type":"divider","props":{},"children":[]},{"id":"ed27de41-a3cd-4663-b8d9-07e5d514b237","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Editable Draft Pattern","styles":{}}],"children":[]},{"id":"692dd6c2-65c9-4480-b97f-1bb116d9980e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"66ec231d-de6a-487b-b39f-ba002f6171c3","type":"procode","props":{"code":"Server State\n└── original profile from API\n\nClient State\n└── editable form draft\n","language":"txt","filename":"","files":"[{\"id\":\"v8aj6afiq\",\"name\":\"code\",\"code\":\"Server State\\n└── original profile from API\\n\\nClient State\\n└── editable form draft\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d8a8fdc4-bbd4-4dc3-a7a9-1b70997a84e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Code:","styles":{}}],"children":[]},{"id":"2568f01c-4198-40fa-a5b2-15aa06b4ecab","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\nimport { useQuery } from \"@tanstack/react-query\"\n\ntype Profile = {\n name: string\n bio: string\n}\n\nasync function getProfile(): Promise {\n const response = await fetch(\"/api/profile\")\n return response.json()\n}\n\nexport default function EditProfilePage() {\n const { data: profile, isLoading } = useQuery({\n queryKey: [\"profile\"],\n queryFn: getProfile,\n })\n\n const [form, setForm] = useState({\n name: \"\",\n bio: \"\",\n })\n\n useEffect(() => {\n if (profile) {\n setForm({\n name: profile.name,\n bio: profile.bio,\n })\n }\n }, [profile])\n\n if (isLoading) {\n return

\n }\n\n return (\n

\n \n setForm((currentForm) => ({\n ...currentForm,\n name: event.target.value,\n }))\n }\n />\n\n \n setForm((currentForm) => ({\n ...currentForm,\n bio: event.target.value,\n }))\n }\n />\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"rjhxgg5t3\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\nimport { useQuery } from \\\"@tanstack/react-query\\\"\\n\\ntype Profile = {\\n name: string\\n bio: string\\n}\\n\\nasync function getProfile(): Promise {\\n const response = await fetch(\\\"/api/profile\\\")\\n return response.json()\\n}\\n\\nexport default function EditProfilePage() {\\n const { data: profile, isLoading } = useQuery({\\n queryKey: [\\\"profile\\\"],\\n queryFn: getProfile,\\n })\\n\\n const [form, setForm] = useState({\\n name: \\\"\\\",\\n bio: \\\"\\\",\\n })\\n\\n useEffect(() => {\\n if (profile) {\\n setForm({\\n name: profile.name,\\n bio: profile.bio,\\n })\\n }\\n }, [profile])\\n\\n if (isLoading) {\\n return

\\n }\\n\\n return (\\n

\\n \\n setForm((currentForm) => ({\\n ...currentForm,\\n name: event.target.value,\\n }))\\n }\\n />\\n\\n \\n setForm((currentForm) => ({\\n ...currentForm,\\n bio: event.target.value,\\n }))\\n }\\n />\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0e49f36f-c6b0-4aad-a451-bfaa0f6c538b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"8a36e496-0260-4982-9c17-380e6b2b3eff","type":"procode","props":{"code":"Server state = saved data\nClient state = unsaved edits\n","language":"txt","filename":"","files":"[{\"id\":\"pzyo9bvul\",\"name\":\"code\",\"code\":\"Server state = saved data\\nClient state = unsaved edits\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6120d34d-93fb-4827-982e-651770125478","type":"divider","props":{},"children":[]},{"id":"2f0454a8-ce82-4d6e-ae63-7ce7e4d93e06","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mutation: Changing Server State","styles":{}}],"children":[]},{"id":"d67f1742-22b6-44bc-87e8-a1b8ca3be81f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When you create, update, or delete data, you are changing server state.","styles":{}}],"children":[]},{"id":"fa686367-ed53-4c74-bba2-174d0f1b7a42","type":"procode","props":{"code":"Mutation\n├── create product\n├── update profile\n├── delete todo\n├── submit order\n└── add comment\n","language":"txt","filename":"","files":"[{\"id\":\"jh3gmq4s6\",\"name\":\"code\",\"code\":\"Mutation\\n├── create product\\n├── update profile\\n├── delete todo\\n├── submit order\\n└── add comment\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e071aa4c-1bcb-4fae-bad3-d606c78ec308","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"7c67f293-e9ba-4b89-98f6-070887bc81fd","type":"procode","props":{"code":"async function createProduct(name: string) {\n const response = await fetch(\"/api/products\", {\n method: \"POST\",\n body: JSON.stringify({\n name,\n }),\n })\n\n if (!response.ok) {\n throw new Error(\"Failed to create product\")\n }\n\n return response.json()\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"2gc92vap8\",\"name\":\"code\",\"code\":\"async function createProduct(name: string) {\\n const response = await fetch(\\\"/api/products\\\", {\\n method: \\\"POST\\\",\\n body: JSON.stringify({\\n name,\\n }),\\n })\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to create product\\\")\\n }\\n\\n return response.json()\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f1435b46-ccf8-4cc3-885f-ea2618b6c509","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5169bcc3-860a-4578-ab7b-42ebfe1b9466","type":"procode","props":{"code":"GET data = read server state\nPOST/PUT/PATCH/DELETE = change server state\n","language":"txt","filename":"","files":"[{\"id\":\"4hjygeoc2\",\"name\":\"code\",\"code\":\"GET data = read server state\\nPOST/PUT/PATCH/DELETE = change server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"765c335e-3657-40eb-ac2b-9c13199451a1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After mutation, server-state cache may need to be refetched or invalidated.","styles":{}}],"children":[]},{"id":"05d72a2d-541a-4456-95c4-7c62f8264a30","type":"divider","props":{},"children":[]},{"id":"80346f3c-3556-4545-8107-b82ccd86eb78","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Client State vs Server State Table","styles":{}}],"children":[]},{"id":"64deeed0-bca5-4dbc-8b09-b3e0841736fb","type":"procode","props":{"code":"Question\n├── Who owns the data?\n│ ├── Browser/UI → Client State\n│ └── Backend/API/Database → Server State\n│\n├── Can it become stale?\n│ ├── Usually no → Client State\n│ └── Yes → Server State\n│\n├── Does it need loading/error?\n│ ├── Usually no → Client State\n│ └── Usually yes → Server State\n│\n├── Does it need cache/refetch?\n│ ├── Usually no → Client State\n│ └── Usually yes → Server State\n│\n└── Does it control UI only?\n ├── Yes → Client State\n └── No, it is remote data → Server State\n","language":"txt","filename":"","files":"[{\"id\":\"p8bk1fgfq\",\"name\":\"code\",\"code\":\"Question\\n├── Who owns the data?\\n│ ├── Browser/UI → Client State\\n│ └── Backend/API/Database → Server State\\n│\\n├── Can it become stale?\\n│ ├── Usually no → Client State\\n│ └── Yes → Server State\\n│\\n├── Does it need loading/error?\\n│ ├── Usually no → Client State\\n│ └── Usually yes → Server State\\n│\\n├── Does it need cache/refetch?\\n│ ├── Usually no → Client State\\n│ └── Usually yes → Server State\\n│\\n└── Does it control UI only?\\n ├── Yes → Client State\\n └── No, it is remote data → Server State\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1f47eda5-bfbe-4255-a8aa-d13df558acb8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"0603d622-7142-48a5-94e3-9d471742bcf8","type":"procode","props":{"code":"Ask who owns the data.\nThat usually gives the answer.\n","language":"txt","filename":"","files":"[{\"id\":\"aqwv3rakn\",\"name\":\"code\",\"code\":\"Ask who owns the data.\\nThat usually gives the answer.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73cf5b0f-cfcd-4141-a19a-1fe50820bbd7","type":"divider","props":{},"children":[]},{"id":"239f4d71-31ce-426c-a663-1e04c12b3ca5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use Client State","styles":{}}],"children":[]},{"id":"fffbf7f5-1c0b-4a11-9ffd-3dcd36b34c34","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use client state for:","styles":{}}],"children":[]},{"id":"c4d74e08-d4f0-44e5-b0b3-7ff445895313","type":"procode","props":{"code":"Client State Use Cases\n├── Input value\n├── Textarea value\n├── Checkbox checked\n├── Modal open/close\n├── Dropdown open/close\n├── Active tab\n├── Search keyword\n├── Filter selection\n├── Sidebar open/close\n├── Theme\n├── Form draft\n├── Temporary selected item\n└── UI-only loading button\n","language":"txt","filename":"","files":"[{\"id\":\"8me7h87ac\",\"name\":\"code\",\"code\":\"Client State Use Cases\\n├── Input value\\n├── Textarea value\\n├── Checkbox checked\\n├── Modal open/close\\n├── Dropdown open/close\\n├── Active tab\\n├── Search keyword\\n├── Filter selection\\n├── Sidebar open/close\\n├── Theme\\n├── Form draft\\n├── Temporary selected item\\n└── UI-only loading button\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d75893ad-164e-4745-b7be-4809b5dcbf7b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tools:","styles":{}}],"children":[]},{"id":"73106d68-7434-4ced-a346-b3c88a57abdb","type":"procode","props":{"code":"useState\nuseReducer\nContext\nZustand\nRedux\n","language":"txt","filename":"","files":"[{\"id\":\"o1v67v9yc\",\"name\":\"code\",\"code\":\"useState\\nuseReducer\\nContext\\nZustand\\nRedux\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86e26b63-69b1-4b4b-815f-0b61a7878764","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d046ddc4-3e4d-4c13-b694-1439c6a45aff","type":"procode","props":{"code":"Use client state when the browser owns the state.\n","language":"txt","filename":"","files":"[{\"id\":\"ie70kl1b3\",\"name\":\"code\",\"code\":\"Use client state when the browser owns the state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f85b1761-6a3a-4bc8-96c7-45b177bed613","type":"divider","props":{},"children":[]},{"id":"5331b789-7930-4502-8556-31bacd12a651","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Use Server State","styles":{}}],"children":[]},{"id":"95f16514-b2b4-4320-8e4d-eb439fdf4a14","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use server state for:","styles":{}}],"children":[]},{"id":"d9c00ff4-584a-42a7-9df6-9a2fa513ced6","type":"procode","props":{"code":"Server State Use Cases\n├── Product list\n├── Product detail\n├── User profile\n├── Auth session\n├── Orders\n├── Cart saved in database\n├── Blog posts\n├── Comments\n├── Notifications from backend\n├── Dashboard analytics\n├── Payment history\n└── Any API/database data\n","language":"txt","filename":"","files":"[{\"id\":\"f0mzr6uqs\",\"name\":\"code\",\"code\":\"Server State Use Cases\\n├── Product list\\n├── Product detail\\n├── User profile\\n├── Auth session\\n├── Orders\\n├── Cart saved in database\\n├── Blog posts\\n├── Comments\\n├── Notifications from backend\\n├── Dashboard analytics\\n├── Payment history\\n└── Any API/database data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1172b0d-b691-4688-87bc-a2d04b83427d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tools:","styles":{}}],"children":[]},{"id":"fb38f261-4e16-4e7c-a8b8-3057848c70b4","type":"procode","props":{"code":"fetch + useEffect\nCustom fetch hook\nTanStack Query\nSWR\nApollo Client\nRTK Query\n","language":"txt","filename":"","files":"[{\"id\":\"nx3kcecj7\",\"name\":\"code\",\"code\":\"fetch + useEffect\\nCustom fetch hook\\nTanStack Query\\nSWR\\nApollo Client\\nRTK Query\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1bd46ee6-841e-4a3a-a6cb-2bf8da458dce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"417347ed-c201-45e3-aa56-9bf773e2fe77","type":"procode","props":{"code":"Use server state tools when backend owns the data.\n","language":"txt","filename":"","files":"[{\"id\":\"z4slqbfmi\",\"name\":\"code\",\"code\":\"Use server state tools when backend owns the data.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a6591d7a-7122-4bfe-85fc-cef7a72169d7","type":"divider","props":{},"children":[]},{"id":"4fa622ab-edb0-4b13-bab2-250cfd8df11b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Loading, Error, Empty, Success","styles":{}}],"children":[]},{"id":"e09a02ac-dc3e-4d7c-bc70-1de2450712f5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Server state needs UI states.","styles":{}}],"children":[]},{"id":"a7d674c3-348a-40d5-be8b-085d7de2f722","type":"procode","props":{"code":"Server State UI\n├── Loading\n├── Error\n├── Empty\n└── Success\n","language":"txt","filename":"","files":"[{\"id\":\"h0ykjc9l3\",\"name\":\"code\",\"code\":\"Server State UI\\n├── Loading\\n├── Error\\n├── Empty\\n└── Success\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f3ea069c-84b4-4f6c-97b0-56215cbeb252","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"21cb96c1-10dd-49f5-af3e-8bb0b07a4a88","type":"procode","props":{"code":"if (isLoading) {\n return

\n}\n\nif (error) {\n return

Something went wrong.

\n}\n\nif (!products || products.length === 0) {\n return

No products found.

\n}\n\nreturn \n","language":"tsx","filename":"","files":"[{\"id\":\"ftm619jn7\",\"name\":\"code\",\"code\":\"if (isLoading) {\\n return

\\n}\\n\\nif (error) {\\n return

Something went wrong.

\\n}\\n\\nif (!products || products.length === 0) {\\n return

No products found.

\\n}\\n\\nreturn \\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1a380532-4531-4a72-acb4-d31e51d3bf89","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"bc84a93d-816f-4bf7-b570-3ccb5e8c5520","type":"procode","props":{"code":"Server state is asynchronous.\nAlways handle all states.\n","language":"txt","filename":"","files":"[{\"id\":\"bme2i656o\",\"name\":\"code\",\"code\":\"Server state is asynchronous.\\nAlways handle all states.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7aa7a08c-bf8e-4275-b175-38d85e421089","type":"divider","props":{},"children":[]},{"id":"d043b9de-4549-4c9b-9818-b07400cec93f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Client State Does Not Usually Need Loading","styles":{}}],"children":[]},{"id":"04ccd140-79bb-4385-bf4b-251b306c9c31","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"3062ec41-3c24-4975-b557-dde3e5b66e00","type":"procode","props":{"code":"const [open, setOpen] = useState(false)\n","language":"tsx","filename":"","files":"[{\"id\":\"b2mms10u6\",\"name\":\"code\",\"code\":\"const [open, setOpen] = useState(false)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9297ea86-f7d8-496f-a602-580f105f742c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"No need for:","styles":{}}],"children":[]},{"id":"94476707-5284-442a-a57e-eff9f353f032","type":"procode","props":{"code":"loading\nerror\nrefetch\ncache\nstaleTime\n","language":"txt","filename":"","files":"[{\"id\":\"qowb0t0nv\",\"name\":\"code\",\"code\":\"loading\\nerror\\nrefetch\\ncache\\nstaleTime\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2634cf9-0cd0-4eea-a5c0-925e713454bb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why?","styles":{}}],"children":[]},{"id":"91526960-deba-4470-a0c6-50cf8052cd77","type":"procode","props":{"code":"Modal open/close is immediate.\nNo API needed.\n","language":"txt","filename":"","files":"[{\"id\":\"ky0mfosgy\",\"name\":\"code\",\"code\":\"Modal open/close is immediate.\\nNo API needed.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"163515df-89ec-418b-9b46-0777f0b3a502","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"32dcc47d-b46c-470d-a5cd-342a5046db15","type":"procode","props":{"code":"Client UI state is usually synchronous.\n","language":"txt","filename":"","files":"[{\"id\":\"hpvyg6bh4\",\"name\":\"code\",\"code\":\"Client UI state is usually synchronous.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b4fd090b-13c3-4fb4-a31f-f2932f787571","type":"divider","props":{},"children":[]},{"id":"52b68106-685a-4184-82c1-04b79972e95b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Good Pattern: Keep Them Separate","styles":{}}],"children":[]},{"id":"048c1572-86c0-4507-b5f1-56b5fe050317","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"3a5b9c4a-b3f5-4510-9e4d-a382c0b531af","type":"procode","props":{"code":"const [search, setSearch] = useState(\"\")\n\nconst { data: products = [] } = useQuery({\n queryKey: [\"products\"],\n queryFn: getProducts,\n})\n\nconst filteredProducts = products.filter((product) =>\n product.name.toLowerCase().includes(search.toLowerCase())\n)\n","language":"tsx","filename":"","files":"[{\"id\":\"q7xb029ah\",\"name\":\"code\",\"code\":\"const [search, setSearch] = useState(\\\"\\\")\\n\\nconst { data: products = [] } = useQuery({\\n queryKey: [\\\"products\\\"],\\n queryFn: getProducts,\\n})\\n\\nconst filteredProducts = products.filter((product) =>\\n product.name.toLowerCase().includes(search.toLowerCase())\\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5561912d-3a86-4cac-a456-c8c0e7a6c43c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"832bacc6-52d9-42b2-a3b9-98730a057ca4","type":"procode","props":{"code":"search = client state\nproducts = server state\nfilteredProducts = derived value\n","language":"txt","filename":"","files":"[{\"id\":\"hckwm9b4q\",\"name\":\"code\",\"code\":\"search = client state\\nproducts = server state\\nfilteredProducts = derived value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de238181-c4e1-4130-9a67-02c5d5e8a067","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why good?","styles":{}}],"children":[]},{"id":"27aeb442-298a-46f8-90a9-683bb1721e5d","type":"procode","props":{"code":"Clear ownership.\nLess duplicated state.\nEasier to debug.\n","language":"txt","filename":"","files":"[{\"id\":\"ueuse9xl0\",\"name\":\"code\",\"code\":\"Clear ownership.\\nLess duplicated state.\\nEasier to debug.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ff34b4b1-21bd-40ab-a892-37393dbfcd09","type":"divider","props":{},"children":[]},{"id":"91ae3750-1698-497e-84c4-a10e9018bd66","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Bad Pattern: Everything in One Store","styles":{}}],"children":[]},{"id":"a453f53d-070f-4d0c-9293-a9792e27b29a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"d45bf889-f77a-4fa6-9060-40f9ca5f3ee4","type":"procode","props":{"code":"Zustand Store\n├── modalOpen\n├── activeTab\n├── products\n├── productsLoading\n├── productsError\n├── users\n├── usersLoading\n├── orders\n├── ordersLoading\n└── refetchEverything\n","language":"txt","filename":"","files":"[{\"id\":\"818qykvdc\",\"name\":\"code\",\"code\":\"Zustand Store\\n├── modalOpen\\n├── activeTab\\n├── products\\n├── productsLoading\\n├── productsError\\n├── users\\n├── usersLoading\\n├── orders\\n├── ordersLoading\\n└── refetchEverything\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1eb53978-b200-4e5d-9b62-98a0b27361fa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"60ba07d7-8859-4305-b525-25043a73ccb4","type":"procode","props":{"code":"Client UI state and server cache are mixed.\nStore becomes too large.\nServer state features are manually rebuilt.\n","language":"txt","filename":"","files":"[{\"id\":\"92hblo2gh\",\"name\":\"code\",\"code\":\"Client UI state and server cache are mixed.\\nStore becomes too large.\\nServer state features are manually rebuilt.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"425e3625-18bc-42d7-a4f5-a7ab73b16b36","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"f10f9fb3-091a-4cd0-a99a-83c2d7760873","type":"procode","props":{"code":"Zustand/Context\n└── client state\n\nTanStack Query/custom fetch hook\n└── server state\n","language":"txt","filename":"","files":"[{\"id\":\"ndl11m5y1\",\"name\":\"code\",\"code\":\"Zustand/Context\\n└── client state\\n\\nTanStack Query/custom fetch hook\\n└── server state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a13715dc-6d75-4ee0-a7aa-2beeeb92362a","type":"divider","props":{},"children":[]},{"id":"ee75d106-a6e4-4596-9ed6-5b0a51d4691b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Bad Pattern: Derived Data in State","styles":{}}],"children":[]},{"id":"bc2b23fc-70ab-486c-b81a-8890ce1a3600","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"f46df022-2c59-460b-be52-25571a33ce4c","type":"procode","props":{"code":"const [products, setProducts] = useState([])\nconst [search, setSearch] = useState(\"\")\nconst [filteredProducts, setFilteredProducts] = useState([])\n","language":"tsx","filename":"","files":"[{\"id\":\"xnvjqoubh\",\"name\":\"code\",\"code\":\"const [products, setProducts] = useState([])\\nconst [search, setSearch] = useState(\\\"\\\")\\nconst [filteredProducts, setFilteredProducts] = useState([])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"63a2d9be-4035-40df-bb83-0f3d39e79487","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"8a7f6867-43a7-467c-981f-262630ec1f4c","type":"procode","props":{"code":"filteredProducts can be calculated.\nStoring it creates redundant state.\n","language":"txt","filename":"","files":"[{\"id\":\"8i932efw2\",\"name\":\"code\",\"code\":\"filteredProducts can be calculated.\\nStoring it creates redundant state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c8e4a561-dd2b-4a67-bf42-97363c149864","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"6f3bdf78-f655-4cf9-9e5e-3741bb301455","type":"procode","props":{"code":"const filteredProducts = products.filter((product) =>\n product.name.toLowerCase().includes(search.toLowerCase())\n)\n","language":"tsx","filename":"","files":"[{\"id\":\"u15vv0kff\",\"name\":\"code\",\"code\":\"const filteredProducts = products.filter((product) =>\\n product.name.toLowerCase().includes(search.toLowerCase())\\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87803b95-a06f-4abc-862f-acba3bca1a02","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"07069e62-f6fc-473f-bf44-c899ec59e53b","type":"procode","props":{"code":"Do not store what you can calculate.\n","language":"txt","filename":"","files":"[{\"id\":\"9v1s5bew1\",\"name\":\"code\",\"code\":\"Do not store what you can calculate.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5b4a5312-97c8-4d52-89ac-2384e24fea0a","type":"divider","props":{},"children":[]},{"id":"c13f365a-cf29-4b51-a07d-036c035aab8a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Bad Pattern: Server Data as Permanent Local State","styles":{}}],"children":[]},{"id":"f62e8888-addd-478a-86b8-3e0bed9218e5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"91809f5e-5580-48c8-bea1-4af260e6e3a9","type":"procode","props":{"code":"const [products, setProducts] = useState([])\n","language":"tsx","filename":"","files":"[{\"id\":\"6by5y666h\",\"name\":\"code\",\"code\":\"const [products, setProducts] = useState([])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2c5086f1-99ae-4129-9498-06e4e21c7e92","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is okay for learning, but for larger apps it becomes limited.","styles":{}}],"children":[]},{"id":"5ba943e2-18f9-441e-a3a4-ab76a8dd6842","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problems:","styles":{}}],"children":[]},{"id":"01f79722-6923-4e81-80bf-45ce6d077ae1","type":"procode","props":{"code":"No cache\nNo background refetch\nNo stale handling\nNo easy invalidation\nNo request deduplication\nManual loading/error everywhere\n","language":"txt","filename":"","files":"[{\"id\":\"zfrbdf7q2\",\"name\":\"code\",\"code\":\"No cache\\nNo background refetch\\nNo stale handling\\nNo easy invalidation\\nNo request deduplication\\nManual loading/error everywhere\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50386822-795b-43d0-8757-d2338d47e958","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better for larger apps:","styles":{}}],"children":[]},{"id":"47380a97-632e-4b03-995d-0699e5ea0e74","type":"procode","props":{"code":"const { data: products } = useQuery({\n queryKey: [\"products\"],\n queryFn: getProducts,\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"lxeuirs8j\",\"name\":\"code\",\"code\":\"const { data: products } = useQuery({\\n queryKey: [\\\"products\\\"],\\n queryFn: getProducts,\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6903a802-834c-4e9c-baf2-45e8a984d372","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c4fac995-326d-4988-87dd-3726f409b17b","type":"procode","props":{"code":"For serious server state, use server-state tools.\n","language":"txt","filename":"","files":"[{\"id\":\"e820cextz\",\"name\":\"code\",\"code\":\"For serious server state, use server-state tools.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf8a040e-a3e2-4c0b-80c7-61ab7f74ab7b","type":"divider","props":{},"children":[]},{"id":"2b504694-bcb1-45a0-bebf-dfc866daf802","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"474920dd-4be1-4b5c-a4e5-20e7e796dd03","type":"procode","props":{"code":"Mistake 1: Treating API data like simple local state\nMistake 2: Putting all server data into Context\nMistake 3: Putting all UI state into TanStack Query\nMistake 4: Duplicating server state into local state without reason\nMistake 5: Storing derived filtered data in state\nMistake 6: Forgetting loading/error/empty states for server state\nMistake 7: Using global state when local state is enough\nMistake 8: Not knowing who owns the data\nMistake 9: Mixing unsaved form draft with saved server data\nMistake 10: Forgetting to refetch or invalidate after mutation\n","language":"txt","filename":"","files":"[{\"id\":\"di2wurpbo\",\"name\":\"code\",\"code\":\"Mistake 1: Treating API data like simple local state\\nMistake 2: Putting all server data into Context\\nMistake 3: Putting all UI state into TanStack Query\\nMistake 4: Duplicating server state into local state without reason\\nMistake 5: Storing derived filtered data in state\\nMistake 6: Forgetting loading/error/empty states for server state\\nMistake 7: Using global state when local state is enough\\nMistake 8: Not knowing who owns the data\\nMistake 9: Mixing unsaved form draft with saved server data\\nMistake 10: Forgetting to refetch or invalidate after mutation\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"230a271c-433e-4ede-8ba3-5f67db3fee36","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"e9147ff6-c6b5-471c-af06-4926a1c4a4be","type":"procode","props":{"code":"Identify who owns the data.\nUse client state for UI behavior.\nUse server state tools for API/database data.\nKeep derived values calculated.\nKeep form draft separate from saved data.\n","language":"txt","filename":"","files":"[{\"id\":\"ctarrok86\",\"name\":\"code\",\"code\":\"Identify who owns the data.\\nUse client state for UI behavior.\\nUse server state tools for API/database data.\\nKeep derived values calculated.\\nKeep form draft separate from saved data.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7483335-484b-49ba-a2ad-c9f11586b502","type":"divider","props":{},"children":[]},{"id":"09877ac5-2db2-458b-b247-318fdf0489a6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"7a1312c9-d2c5-4217-a48e-b1f006fbefa3","type":"procode","props":{"code":"Professional Server State vs Client State Pattern\n├── Start by asking who owns the data\n├── Use useState for small UI state\n├── Use useReducer for complex local UI state\n├── Use Context/Zustand for app-wide client state\n├── Use TanStack Query/SWR for server state\n├── Keep API data out of global client store when possible\n├── Do not duplicate server state into local state\n├── Use local state for form drafts\n├── Use server state for saved database data\n├── Use derived values instead of redundant state\n├── Handle loading/error/empty/success for server data\n├── Refetch or invalidate after mutations\n├── Keep UI state and server cache separate\n└── Choose the simplest tool that matches ownership\n","language":"txt","filename":"","files":"[{\"id\":\"855358nec\",\"name\":\"code\",\"code\":\"Professional Server State vs Client State Pattern\\n├── Start by asking who owns the data\\n├── Use useState for small UI state\\n├── Use useReducer for complex local UI state\\n├── Use Context/Zustand for app-wide client state\\n├── Use TanStack Query/SWR for server state\\n├── Keep API data out of global client store when possible\\n├── Do not duplicate server state into local state\\n├── Use local state for form drafts\\n├── Use server state for saved database data\\n├── Use derived values instead of redundant state\\n├── Handle loading/error/empty/success for server data\\n├── Refetch or invalidate after mutations\\n├── Keep UI state and server cache separate\\n└── Choose the simplest tool that matches ownership\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d79b1af-db99-4fc8-aa78-366e6552fd1d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended structure:","styles":{}}],"children":[]},{"id":"898c168c-d0d3-40b1-81a5-a769ff40a54e","type":"procode","props":{"code":"src/\n├── components/\n│ └── ui/\n│\n├── features/\n│ └── products/\n│ ├── api/\n│ │ └── products-api.ts\n│ ├── hooks/\n│ │ └── use-products.ts\n│ └── components/\n│ └── ProductList.tsx\n│\n├── stores/\n│ └── ui-store.ts\n│\n└── pages/\n └── ProductsPage.tsx\n","language":"txt","filename":"","files":"[{\"id\":\"kk63oyrbv\",\"name\":\"code\",\"code\":\"src/\\n├── components/\\n│ └── ui/\\n│\\n├── features/\\n│ └── products/\\n│ ├── api/\\n│ │ └── products-api.ts\\n│ ├── hooks/\\n│ │ └── use-products.ts\\n│ └── components/\\n│ └── ProductList.tsx\\n│\\n├── stores/\\n│ └── ui-store.ts\\n│\\n└── pages/\\n └── ProductsPage.tsx\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d9c74482-4dc5-48ac-a3f2-67a894ba1860","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"39f40a43-e061-4f62-a653-5478aad09436","type":"procode","props":{"code":"features/products/api\n└── server request functions\n\nfeatures/products/hooks\n└── server-state hooks\n\nstores/ui-store\n└── app-wide client UI state\n","language":"txt","filename":"","files":"[{\"id\":\"pbtrbshxa\",\"name\":\"code\",\"code\":\"features/products/api\\n└── server request functions\\n\\nfeatures/products/hooks\\n└── server-state hooks\\n\\nstores/ui-store\\n└── app-wide client UI state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"25655d26-b957-409c-b34e-4a8de3de9952","type":"divider","props":{},"children":[]},{"id":"854728e3-5dc2-428d-8a59-1b29ce9167de","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Complete Professional Example","styles":{}}],"children":[]},{"id":"0338d9c8-caba-4c73-8ba1-12d412874a39","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"products-api.ts","styles":{"code":true}}],"children":[]},{"id":"42a56961-c09e-47f9-a9f2-dd8eb7056a52","type":"procode","props":{"code":"export type Product = {\n id: number\n name: string\n category: string\n}\n\nexport async function getProducts(): Promise {\n const response = await fetch(\"/api/products\")\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch products\")\n }\n\n return response.json()\n}\n","language":"ts","filename":"","files":"[{\"id\":\"pjh0dv641\",\"name\":\"code\",\"code\":\"export type Product = {\\n id: number\\n name: string\\n category: string\\n}\\n\\nexport async function getProducts(): Promise {\\n const response = await fetch(\\\"/api/products\\\")\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch products\\\")\\n }\\n\\n return response.json()\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44da3903-b860-4c5a-8968-8f28eb98c825","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"use-products.ts","styles":{"code":true}}],"children":[]},{"id":"89f54174-85ee-497c-8fdc-9d005e415a2c","type":"procode","props":{"code":"import { useQuery } from \"@tanstack/react-query\"\nimport { getProducts } from \"../api/products-api\"\n\nexport function useProducts() {\n return useQuery({\n queryKey: [\"products\"],\n queryFn: getProducts,\n })\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ogktjddgg\",\"name\":\"code\",\"code\":\"import { useQuery } from \\\"@tanstack/react-query\\\"\\nimport { getProducts } from \\\"../api/products-api\\\"\\n\\nexport function useProducts() {\\n return useQuery({\\n queryKey: [\\\"products\\\"],\\n queryFn: getProducts,\\n })\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86a9ce92-1bef-4f6d-8c52-4b927d4c2658","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"ProductsPage.tsx","styles":{"code":true}}],"children":[]},{"id":"96a20412-c35e-4da2-b4a8-5af86660ec01","type":"procode","props":{"code":"import { useState } from \"react\"\nimport { useProducts } from \"../features/products/hooks/use-products\"\n\nexport default function ProductsPage() {\n const [search, setSearch] = useState(\"\")\n const [category, setCategory] = useState(\"all\")\n\n const {\n data: products = [],\n isLoading,\n error,\n } = useProducts()\n\n const filteredProducts = products.filter((product) => {\n const matchesSearch = product.name\n .toLowerCase()\n .includes(search.toLowerCase())\n\n const matchesCategory =\n category === \"all\" || product.category === category\n\n return matchesSearch && matchesCategory\n })\n\n if (isLoading) {\n return

Loading products...

\n }\n\n if (error) {\n return

Failed to load products.

\n }\n\n return (\n

\n setSearch(event.target.value)}\n placeholder=\"Search products...\"\n />\n\n setCategory(event.target.value)}\n >\n \n \n \n \n\n

\n {product.name}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"3izpgbbpm\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\nimport { useProducts } from \\\"../features/products/hooks/use-products\\\"\\n\\nexport default function ProductsPage() {\\n const [search, setSearch] = useState(\\\"\\\")\\n const [category, setCategory] = useState(\\\"all\\\")\\n\\n const {\\n data: products = [],\\n isLoading,\\n error,\\n } = useProducts()\\n\\n const filteredProducts = products.filter((product) => {\\n const matchesSearch = product.name\\n .toLowerCase()\\n .includes(search.toLowerCase())\\n\\n const matchesCategory =\\n category === \\\"all\\\" || product.category === category\\n\\n return matchesSearch && matchesCategory\\n })\\n\\n if (isLoading) {\\n return

Loading products...

\\n }\\n\\n if (error) {\\n return

Failed to load products.

\\n }\\n\\n return (\\n

\\n setSearch(event.target.value)}\\n placeholder=\\\"Search products...\\\"\\n />\\n\\n setCategory(event.target.value)}\\n >\\n \\n \\n \\n \\n\\n

\\n {product.name}\\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e6d188cd-34e5-4988-8167-1f0492f9cbe7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"9a64ab43-1fe1-41b6-a82a-183f659e40b0","type":"procode","props":{"code":"products = server state\nisLoading = server state status\nerror = server state status\nsearch = client state\ncategory = client state\nfilteredProducts = derived value\n","language":"txt","filename":"","files":"[{\"id\":\"0ah1dmuf2\",\"name\":\"code\",\"code\":\"products = server state\\nisLoading = server state status\\nerror = server state status\\nsearch = client state\\ncategory = client state\\nfilteredProducts = derived value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bf5f83ce-12c2-47be-951f-715aeae00df9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why good?","styles":{}}],"children":[]},{"id":"b0803344-056e-4f59-b568-dea13d419698","type":"procode","props":{"code":"Server data is managed by useProducts.\nUI filters are managed by local state.\nFiltered list is calculated during render.\n","language":"txt","filename":"","files":"[{\"id\":\"k0nh2opw1\",\"name\":\"code\",\"code\":\"Server data is managed by useProducts.\\nUI filters are managed by local state.\\nFiltered list is calculated during render.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c1600b45-e2b8-4cfe-a3cf-9306bbfc4138","type":"divider","props":{},"children":[]},{"id":"a1c59f86-b0f4-432a-a39c-4797828acf1a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"9f071e23-2029-46e9-a17b-85f0bd5627b5","type":"procode","props":{"code":"Client State\n└── What is happening in the UI?\n\nServer State\n└── What data came from backend?\n","language":"txt","filename":"","files":"[{\"id\":\"0vsozad03\",\"name\":\"code\",\"code\":\"Client State\\n└── What is happening in the UI?\\n\\nServer State\\n└── What data came from backend?\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bdfe3fff-9b67-408f-a19d-d6d2e5498a35","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another version:","styles":{}}],"children":[]},{"id":"d48e0339-1c98-4503-ac1b-4f8c04759390","type":"procode","props":{"code":"Client State\n├── modal\n├── input\n├── tab\n└── dropdown\n\nServer State\n├── users\n├── products\n├── orders\n└── profile\n","language":"txt","filename":"","files":"[{\"id\":\"9r09n0vz8\",\"name\":\"code\",\"code\":\"Client State\\n├── modal\\n├── input\\n├── tab\\n└── dropdown\\n\\nServer State\\n├── users\\n├── products\\n├── orders\\n└── profile\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8d4c98ed-93c1-4e85-84c5-af3a21b107d6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Decision flow:","styles":{}}],"children":[]},{"id":"176587df-bfae-409c-933a-0ecef75c4898","type":"procode","props":{"code":"Data needed in UI\n├── Is it from API/database?\n│ ├── yes → server state\n│ └── no\n│\n├── Is it only UI behavior?\n│ ├── yes → client state\n│ └── maybe derived value\n","language":"txt","filename":"","files":"[{\"id\":\"igjyy1h3z\",\"name\":\"code\",\"code\":\"Data needed in UI\\n├── Is it from API/database?\\n│ ├── yes → server state\\n│ └── no\\n│\\n├── Is it only UI behavior?\\n│ ├── yes → client state\\n│ └── maybe derived value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ba36773b-7a9d-4d5a-bb20-762673928965","type":"divider","props":{},"children":[]},{"id":"5714ad1d-f812-439b-995e-fe6078b5cc20","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"ba5b4f72-c149-4519-9033-d5a15c020081","type":"procode","props":{"code":"Server State vs Client State\n├── Client state is owned by the browser/UI\n├── Server state is owned by backend/API/database\n├── Client state controls UI behavior\n├── Server state represents remote data\n├── Client state usually uses useState/useReducer/Context/Zustand\n├── Server state usually uses fetch/custom hook/TanStack Query/SWR\n├── Client state is usually synchronous\n├── Server state is usually asynchronous\n├── Server state needs loading/error/empty/success handling\n├── Server state can become stale\n├── Server state often needs cache/refetch/invalidation\n├── Do not duplicate server state into local state without reason\n├── Do not store derived values unnecessarily\n├── Use local state for form drafts\n└── Use server state for saved backend data\n","language":"txt","filename":"","files":"[{\"id\":\"h5dd6buza\",\"name\":\"code\",\"code\":\"Server State vs Client State\\n├── Client state is owned by the browser/UI\\n├── Server state is owned by backend/API/database\\n├── Client state controls UI behavior\\n├── Server state represents remote data\\n├── Client state usually uses useState/useReducer/Context/Zustand\\n├── Server state usually uses fetch/custom hook/TanStack Query/SWR\\n├── Client state is usually synchronous\\n├── Server state is usually asynchronous\\n├── Server state needs loading/error/empty/success handling\\n├── Server state can become stale\\n├── Server state often needs cache/refetch/invalidation\\n├── Do not duplicate server state into local state without reason\\n├── Do not store derived values unnecessarily\\n├── Use local state for form drafts\\n└── Use server state for saved backend data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"edf293e8-0485-4c40-a427-5ef236365b6b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Server State vs Client State is important because choosing the wrong state type makes React apps harder to maintain. The professional mindset is simple: ","styles":{}},{"type":"text","text":"UI behavior belongs to client state, backend data belongs to server state, and calculated data should usually stay derived.","styles":{"bold":true}}],"children":[]},{"id":"e88b6857-3e81-43ea-9848-a20748002919","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]