State management: local, server and global state — React (with Hooks, React 19 & Next.js basics)

14. State management: local, server and global state

Intermediate★ Must knowLesson 14 of 17

Kind	Tool
Local UI state	`useState`, `useReducer`
Shared across a subtree	Lift state up, Context
Server state (API data, caching, refetching)	TanStack Query, SWR, RTK Query, framework loaders
Global client state	Redux Toolkit, Zustand, Jotai, Context + reducer
URL state	Search params (`useSearchParams`)
Form state	React Hook Form

jsx

// TanStack Query
const { data: orders, isPending, error } = useQuery({ queryKey: ["orders", page], queryFn: () => api.orders(page) });
const mutation = useMutation({ mutationFn: api.createOrder, onSuccess: () => queryClient.invalidateQueries({ queryKey: ["orders"] }) });

// Redux Toolkit slice
const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] },
  reducers: {
    added(state, action) { state.items.push(action.payload); },   // Immer allows "mutating" syntax safely
    removed(state, action) { state.items = state.items.filter(i => i.id !== action.payload); },
  },
});

// Zustand
const useCart = create(set => ({ items: [], add: item => set(s => ({ items: [...s.items, item] })) }));