Chapter 15: Global State Management

1. The Fundamental Divide: Client State vs. Server State

One of the greatest architectural breakthroughs in modern frontend engineering is separating client state from server state:

2. React Context API & The Re-Render Caveat

React Context provides native dependency injection, allowing data to be broadcast to any child component without passing props manually.

import { createContext, useContext, useState } from 'react';

// 1. Create Context
const AuthContext = createContext(null);

// 2. Wrap Provider around tree
export function AuthProvider({ children }) {
  const [user, setUser] = useState({ name: "Elena", role: "admin" });

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

// 3. Custom Hook to consume Context
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) throw new Error("useAuth must be used within an AuthProvider");
  return context;
}

3. Redux Toolkit (RTK): Predictable Enterprise State

Redux Toolkit is the official, opinionated standard for modern Redux. It eliminates historical Redux boilerplate by using createSlice and Immer:

import { createSlice, configureStore } from '@reduxjs/toolkit';

// 1. Create a Slice
const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], total: 0 },
  reducers: {
    // Immer allows writing "mutating" syntax safely!
    addItem: (state, action) => {
      state.items.push(action.payload);
      state.total += action.payload.price;
    },
    clearCart: (state) => {
      state.items = [];
      state.total = 0;
    }
  }
});

export const { addItem, clearCart } = cartSlice.actions;

// 2. Configure Store
export const store = configureStore({
  reducer: { cart: cartSlice.reducer }
});

// 3. In Components: Use useSelector and useDispatch
// const total = useSelector(state => state.cart.total);
// const dispatch = useDispatch();
// dispatch(addItem({ id: 1, name: "Keyboard", price: 120 }));

4. Zustand: Lightweight & Selector-Driven

Zustand (German for "state") has skyrocketed in popularity because it requires zero Provider wrappers and supports granular selector subscriptions:

import { create } from 'zustand';

// Define store hook directly:
export const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

// In Any Component (No Provider Needed!):
function BearCounter() {
  // Only re-renders if 'bears' changes!
  const bears = useBearStore((state) => state.bears);
  const increase = useBearStore((state) => state.increasePopulation);

  return <button onClick={increase}>{bears} Bears</button>;
}

5. TanStack Query (React Query): Server State Mastery

Instead of writing manual useEffect fetches with tedious loading and error booleans,TanStack Query automates caching, refetching, and stale-while-revalidate data:

import { useQuery } from '@tanstack/react-query';

function ProductList() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['products'], // Cache key
    queryFn: async () => {
      const res = await fetch('/api/products');
      return res.json();
    },
    staleTime: 1000 * 60 * 5, // Data stays fresh in cache for 5 minutes!
  });

  if (isLoading) return <div>Loading cached data...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(p => <li key={p.id}>{p.name} - ${p.price}</li>)}
    </ul>
  );
}

Frequently Asked Questions (FAQ)