How do you architect state management for large-scale React applications?

Large-scale React app state architecture follows the principle of co-location and minimal global state. Architecture layers: Component state (useState/useReducer): UI interactions, form state, local toggles. Never elevate to global unless needed. Server state (TanStack Query/RTK Query): all API data — caching, background sync, optimistic updates. This should be the largest category in most apps. Global client state (Zustand/Redux): truly shared UI state — current user, theme, auth status, shopping cart, notifications. This should be the smallest category. URL state: filters, pagination, current view — prefer storing in URL params (persistent across refreshes, shareable). Folder structure: feature-based (all state for a feature together): features/users/usersSlice.ts, features/users/usersSelectors.ts. Anti-patterns to avoid: everything in Redux (use React Query for API data), prop-drilling past 2-3 levels (elevate to context or global), duplicated state (derive from existing state), mutable global state (immutability is non-negotiable). The goal: each piece of state has exactly one canonical home.