State management in front-end apps ensures that UI reflects data changes consistently. It can be handled in three main ways:
1. Local State (Component-Level)
Managed with React Hooks like useState, useReducer.
Best for UI states: toggles, form inputs, modals.
const [count, setCount] = useState(0);
2. Global State (App-Level)
Used when multiple components need shared access to the same data (e.g., cart, user auth).
Options:
React Context API – Simple global state.
Redux, Zustand, Recoil, MobX – For large, scalable apps.
3. Server State
Data from APIs that must be fetched/updated.
Managed with:
React Query / TanStack Query
Axios + useEffect (manual)
SWR, Apollo Client (for GraphQL)
4. URL State
State in the URL query params, used for filters, pagination, etc.
Managed with:
React Router (useLocation, useSearchParams)