What is the difference between local state, global state, and server state?

Answer

Distinguishing state types helps choose the right tool. Local (UI) state: state that belongs to a single component and its direct children. Examples: modal open/closed, input value, tab selection, accordion expand/collapse. Use: useState, useReducer. Never needs to go into Redux. Global (shared) state: state that multiple unrelated components across the app need. Examples: current user, authentication status, shopping cart, theme preference, notification count. Use: Redux (complex), Zustand (moderate), Context (simple). Server state: data fetched from a remote server — async, potentially stale, shared with the server. Examples: user profile from API, list of products, order history. Use: TanStack Query, RTK Query, SWR. Server state has unique challenges: caching, background updates, error handling, stale data, pagination. Misclassification is the source of most state management complexity. Many apps using Redux for API data can simplify enormously by moving to React Query (server state) + Zustand (client state) — Redux becomes unnecessary for most use cases.