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.
Previous
How do you handle forms state in React?
Next
What are Redux middleware and how do you write a custom one?
More Redux / State Management Questions
View all →- Intermediate How do you handle async operations in Redux Toolkit with createAsyncThunk?
- Intermediate What is Zustand's middleware system?
- Intermediate What is Reselect and memoized selectors?
- Intermediate How does normalized state shape work in Redux?
- Intermediate What is the Flux architecture pattern?