Local vs Global vs Server State in React Apps
There are these three types:
1. Local (Component) State
Used for things like input values, toggle switches, whether a modal is open or not.
Stick with useState or useReducer for these.
Good: It’s simple and fast.
Bad: You can’t share it easily across unrelated components.
2. Global (App-Wide) State
Shared all over your app: user info, theme, feature flags, shopping carts, notifications.
Managed with Context, Redux, Zustand, Jotai, Recoil, and similar libraries.
Only make things global if lots of your app needs the data! Otherwise, keep it local.
3. Server (Remote) State
Data that lives on your backend: profiles, lists from the API, order history, and so on.
Managed best with React Query, SWR, Apollo, etc.
Don’t try to manage server data with Redux/Zustand—these libraries are better for app logic, not API data.