18:I[4173,["/_next/static/chunks/02xcz64.lqctn.js","/_next/static/chunks/0t_~upxyavvjv.js","/_next/static/chunks/0t2xr05rlu96l.js","/_next/static/chunks/0avu1.h7wvl.y.js","/_next/static/chunks/05u09b1zag_r7.js"],"QuestionList"] 19:T4bf,Apps deal with **multiple categories of state**, each with different needs: - **UI state** — modal open, form input focus, theme. Local, ephemeral. - **Component state** — internal to a component (toggle, hover). Use `useState` / `ref`. - **Shared client state** — cart contents, sidebar collapsed across pages. Lifted to parent or global store. - **Server state** — data fetched from API. Fetched, cached, refetched. Use TanStack Query / SWR. - **URL state** — search query, filters, current page. Use search params + router. - **Form state** — input values, validation, submission. Use react-hook-form / Formik / native. - **Session state** — auth tokens, user info. Cookies, secure storage. - **Local persistent state** — user preferences. localStorage / IndexedDB. **Common mistake:** treating server state like client state — manually syncing fetched data, leading to stale-data bugs and complexity. **Modern guidance:** - **Component state** for trivial. - **TanStack Query / SWR** for server state. - **URL** for shareable state. - **Zustand / Jotai / Redux** for *truly global* client state (small subset of app). - **Context** for theme / locale / current user (low-frequency updates).1a:T4d8,**Lifting state up** = moving shared state to the **nearest common ancestor** of components that need it. ```tsx // Before — siblings can't share function Search() { const [q, setQ] = useState(""); ... } function Results() { ??? where does query come from ??? } // After — lifted to parent function Page() { const [q, setQ] = useState(""); return <>; } ``` **Benefits:** - **Single source of truth** — no drift between components. - Predictable data flow (top-down). - Easy to reason about. **Costs:** - **Prop drilling** — passing through intermediate components that don't use the value. - Can cause unnecessary re-renders if not careful. **When to stop lifting:** - If state needs to be shared globally → use Context or store. - If many sibling components need it but you'd lift to root → consider a store. - Don't lift just for "future flexibility" — keep state as local as possible. **Rule of thumb:** - Component-local first. - Lift when 2+ siblings need it. - Promote to global store when 3+ levels deep or many distant consumers. **Lifting + URL:** for filters/sort/page, lift to URL search params — gives free shareable links + browser history.1b:T50f,**Context** lets you pass data through the component tree without prop drilling. ```tsx const ThemeContext = createContext<"light" | "dark">("light"); function App() { return ; } function Button() { const theme = useContext(ThemeContext); return ; } ``` **Good for:** - **Theme**, locale, current user — low-frequency, app-wide values. - Decoupling deeply nested components from the root. **NOT great for:** - **High-frequency updates** (mouse position, form fields) — every consumer re-renders. - **General state management at scale** — no built-in selectors. **Optimization tricks:** - **Split contexts** by update frequency (static config vs dynamic state). - **Memoize the Provider value**: ```tsx ({a, b}), [a, b])}> ``` - For selective subscriptions, reach for **`useSyncExternalStore`** or a real store (Zustand, Jotai). **Context vs Store:** - Context — **propagation** mechanism. Doesn't optimize re-renders. - Store (Zustand, Redux) — **subscription** mechanism. Components only re-render when their slice changes. **Pattern:** use Context to expose store/hook, but actual state lives in a store with selectors.1c:T4e7,**Immutability** = never mutate state in place; always produce a new value. ```ts //

State Management

What is application state?

Lifting state up

React Context

Immutability

Redux basics

Zustand

Jotai (atomic state)

MobX

Selectors

Async with thunks and RTK Query

Persisting state

Form state libraries

URL as state

Context vs Store

Global vs local state

useSyncExternalStore

Store architecture patterns

Tearing and concurrent React

Redux middleware

State management performance