State Management Patterns

// User data needed 4 levels deep
function App() {
  const [user, setUser] = useState({ name: "Alice", role: "admin" });

  return <Layout user={user} />;           // pass down
}

function Layout({ user }) {
  return <Sidebar user={user} />;           // pass down again
}

function Sidebar({ user }) {
  return <UserMenu user={user} />;          // pass down AGAIN
}

function UserMenu({ user }) {
  return <span>{user.name}</span>;          // finally used here
}

// Layout and Sidebar don't USE user — they just pass it through.
// This is "prop drilling": threading props through components
// that don't need them, just to reach a deeply nested child.
//
// Problems:
// ❌ Every intermediate component must know about "user" prop
// ❌ Adding a new field to user means updating 4 components
// ❌ Renaming the prop means editing every level
// ❌ Components become coupled to data they don't use

Component Tree:
                    App
                   /   \
              Header    Content
              /            \
         CartIcon       ProductList
            │                │
     "Show cart count"  "Add to cart"

  CartIcon needs to display the cart count.
  ProductList needs to add items to the cart.
  They're siblings — neither is a parent of the other.

  Where does cart state live?
  • In CartIcon? → ProductList can't update it
  • In ProductList? → CartIcon can't read it
  • In App? → Prop drilling through Header and Content
  • In Context? → Re-renders every consumer on any change
  • In Zustand/Redux? → External store, both read/write directly

By Scope:
┌──────────────────────────────────────────────────┐
│  LOCAL STATE                                     │
│  • Belongs to one component                      │
│  • Examples: form input, toggle, dropdown open   │
│  • Tool: useState                                │
├──────────────────────────────────────────────────┤
│  SHARED STATE                                    │
│  • Needed by 2-5 nearby components               │
│  • Examples: selected tab, filter criteria       │
│  • Tool: lift state up, or Context               │
├──────────────────────────────────────────────────┤
│  GLOBAL STATE                                    │
│  • Needed across the entire app                  │
│  • Examples: auth user, theme, locale            │
│  • Tool: Context, Zustand, Redux                 │
└──────────────────────────────────────────────────┘

By Origin:
┌──────────────────────────────────────────────────┐
│  CLIENT STATE                                    │
│  • Created and owned by the frontend             │
│  • Examples: UI state, form data, selections     │
│  • Tool: useState, useReducer, Zustand, Redux    │
├──────────────────────────────────────────────────┤
│  SERVER STATE                                    │
│  • Fetched from an API, cached on the client     │
│  • Examples: user profile, product list, orders  │
│  • Tool: React Query, SWR, RTK Query             │
│  • Has unique concerns: caching, revalidation,   │
│    loading states, optimistic updates            │
└──────────────────────────────────────────────────┘

// Simple: boolean toggle
function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Menu</button>
      {isOpen && <ul className="dropdown-menu">...</ul>}
    </div>
  );
}

// Medium: form with multiple fields
function ContactForm() {
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [errors, setErrors] = useState({});

  const handleChange = (field, value) => {
    setForm(prev => ({ ...prev, [field]: value }));
  };

  const handleSubmit = () => {
    const newErrors = validate(form);
    if (Object.keys(newErrors).length === 0) {
      submitForm(form);
    } else {
      setErrors(newErrors);
    }
  };

  return (/* form JSX */);
}

// Complex: useReducer for state machines
function TodoList() {
  const [state, dispatch] = useReducer(todoReducer, { todos: [], filter: "all" });

  return (
    <div>
      <button onClick={() => dispatch({ type: "ADD", text: "New todo" })}>Add</button>
      <button onClick={() => dispatch({ type: "SET_FILTER", filter: "done" })}>Done</button>
      {/* render filtered todos */}
    </div>
  );
}

// When to use local state:
// ✅ Only one component needs this data
// ✅ UI state: open/closed, active tab, hover, form inputs
// ✅ State doesn't need to survive component unmount
// ✅ No other component needs to read or write this state

// ❌ BEFORE: Duplicated state — siblings can't share
function SearchBar() {
  const [query, setQuery] = useState("");  // SearchBar owns query
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

function ResultsList() {
  const [query, setQuery] = useState("");  // ResultsList has its OWN query
  // These two "query" states are independent — they don't sync!
  return <ul>{/* filter by query */}</ul>;
}

// ✅ AFTER: Lifted state — parent owns, children share
function SearchPage() {
  const [query, setQuery] = useState("");  // Parent owns the state

  return (
    <div>
      <SearchBar query={query} onQueryChange={setQuery} />
      <ResultsList query={query} />
    </div>
  );
}

function SearchBar({ query, onQueryChange }) {
  return (
    <input
      value={query}
      onChange={e => onQueryChange(e.target.value)}
    />
  );
}

function ResultsList({ query }) {
  const filtered = allResults.filter(r =>
    r.title.toLowerCase().includes(query.toLowerCase())
  );
  return <ul>{filtered.map(r => <li key={r.id}>{r.title}</li>)}</ul>;
}

// Now SearchBar and ResultsList share the same query.
// SearchBar writes it (via callback), ResultsList reads it (via prop).
// Single source of truth — always in sync.

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

// 2. Create a provider component
function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = async (email, password) => {
    const res = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify({ email, password }),
    });
    const data = await res.json();
    setUser(data.user);
  };

  const logout = () => setUser(null);

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

// 3. Create a custom hook for clean access
function useAuth() {
  const context = useContext(AuthContext);
  if (!context) throw new Error("useAuth must be used within AuthProvider");
  return context;
}

// 4. Wrap the app
function App() {
  return (
    <AuthProvider>
      <Header />    {/* can access user */}
      <MainContent /> {/* can access user */}
      <Footer />    {/* can access user */}
    </AuthProvider>
  );
}

// 5. Use anywhere — no prop drilling
function UserMenu() {
  const { user, logout } = useAuth();

  if (!user) return <LoginButton />;
  return (
    <div>
      <span>{user.name}</span>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

// UserMenu accesses auth directly — no props passed through
// Header, Layout, Sidebar, etc.

import { create } from "zustand";

// Create a store — no Provider needed
const useCartStore = create((set) => ({
  items: [],

  addItem: (product) =>
    set((state) => ({
      items: [...state.items, { ...product, quantity: 1 }],
    })),

  removeItem: (id) =>
    set((state) => ({
      items: state.items.filter((item) => item.id !== id),
    })),

  clearCart: () => set({ items: [] }),

  // Derived state
  get totalItems() {
    return this.items.reduce((sum, item) => sum + item.quantity, 0);
  },
}));

// Use in any component — no Provider wrapper
function CartIcon() {
  const totalItems = useCartStore((state) => state.items.length);
  return <span className="badge">{totalItems}</span>;
}

function ProductCard({ product }) {
  const addItem = useCartStore((state) => state.addItem);
  return (
    <div>
      <h3>{product.name}</h3>
      <button onClick={() => addItem(product)}>Add to Cart</button>
    </div>
  );
}

// Key advantages over Context:
// ✅ No Provider wrapper needed
// ✅ Selector-based subscriptions — CartIcon only re-renders
//    when items.length changes, not on every state update
// ✅ Simple API — create() + use the hook
// ✅ Works outside React (in utility functions, middleware)

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

// Define a slice (feature-scoped state + reducers)
const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] },
  reducers: {
    addItem: (state, action) => {
      state.items.push({ ...action.payload, quantity: 1 });
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    },
    clearCart: (state) => {
      state.items = [];
    },
  },
});

// Create the store
const store = configureStore({
  reducer: { cart: cartSlice.reducer },
});

// Use in components with useSelector + useDispatch
function CartIcon() {
  const itemCount = useSelector(state => state.cart.items.length);
  return <span>{itemCount}</span>;
}

function ProductCard({ product }) {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(cartSlice.actions.addItem(product))}>
      Add to Cart
    </button>
  );
}

// Redux is best for:
// ✅ Large apps with complex state logic
// ✅ Teams that need strict patterns and predictability
// ✅ DevTools with time-travel debugging
// ✅ Middleware for side effects (thunks, sagas)

CLIENT STATE                        SERVER STATE
─────────────                       ────────────
• Created by the frontend           • Fetched from an API
• Synchronous — always available    • Asynchronous — loading/error states
• Always up-to-date (you own it)    • Can become stale (server may have changed)
• No caching needed                 • Caching is critical (avoid refetching)
• Examples:                         • Examples:
  - isMenuOpen                        - User profile from /api/me
  - selectedTab                       - Product list from /api/products
  - formInputValue                    - Order history from /api/orders
  - theme (dark/light)                - Notifications from /api/notifications

Tools:                              Tools:
  useState, useReducer,               React Query (TanStack Query),
  Zustand, Redux                      SWR, RTK Query

The mistake: putting server data in Redux/Zustand
  → You must manually handle loading, error, caching,
     revalidation, pagination, optimistic updates...
  → React Query handles ALL of this automatically.

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

// Fetching server state — React Query handles everything
function UserProfile() {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ["user", "me"],
    queryFn: () => fetch("/api/me").then(res => res.json()),
    staleTime: 5 * 60 * 1000,  // cache for 5 minutes
  });

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error.message} />;

  return <ProfileCard user={user} />;
}

// Mutating server state — with optimistic update
function TodoItem({ todo }) {
  const queryClient = useQueryClient();

  const toggleMutation = useMutation({
    mutationFn: (id) =>
      fetch(`/api/todos/${id}/toggle`, { method: "PATCH" }),

    // Optimistic update: update UI immediately
    onMutate: async (id) => {
      await queryClient.cancelQueries({ queryKey: ["todos"] });
      const previous = queryClient.getQueryData(["todos"]);
      queryClient.setQueryData(["todos"], (old) =>
        old.map(t => t.id === id ? { ...t, done: !t.done } : t)
      );
      return { previous };
    },

    // Rollback on error
    onError: (err, id, context) => {
      queryClient.setQueryData(["todos"], context.previous);
    },
  });

  return (
    <li onClick={() => toggleMutation.mutate(todo.id)}>
      {todo.text}
    </li>
  );
}

// What React Query gives you for free:
// ✅ Loading & error states
// ✅ Automatic caching & deduplication
// ✅ Background refetching (stale-while-revalidate)
// ✅ Optimistic updates with rollback
// ✅ Pagination & infinite scroll support
// ✅ Automatic garbage collection of unused data

Is this data from an API (server state)?
│
├─ YES → Use React Query / SWR / RTK Query
│        Handles caching, loading, revalidation automatically.
│        Don't put API data in Redux or Zustand.
│
└─ NO → It's client state. How many components need it?
        │
        ├─ ONE component → useState (or useReducer if complex)
        │   Keep it local. Don't over-engineer.
        │
        ├─ 2-3 NEARBY components → Lift state up
        │   Move state to nearest common parent.
        │   Pass via props. Simple and effective.
        │
        ├─ MANY components, CHANGES RARELY → Context API
        │   Theme, auth user, locale, feature flags.
        │   Wrap in Provider, access with useContext.
        │
        └─ MANY components, CHANGES OFTEN → Zustand / Redux
            Shopping cart, notifications, complex UI state.
            Selector-based subscriptions prevent re-render storms.

Quick rules:
  • Default to useState — move up only when needed
  • Server data → React Query (never Redux for API caching)
  • Global + low frequency → Context
  • Global + high frequency → Zustand or Redux
  • Complex transitions → useReducer (local) or Redux (global)

┌─────────────────────────────────────────────────┐
│                  App                            │
│                                                 │
│  Context: AuthProvider (user, login, logout)    │
│  Context: ThemeProvider (theme, toggleTheme)    │
│                                                 │
│  ┌──────────────────────────────────────────┐   │
│  │  Header                                  │   │
│  │  ├── UserMenu (useAuth → Context)        │   │
│  │  ├── CartIcon (useCartStore → Zustand)   │   │
│  │  └── ThemeToggle (useTheme → Context)    │   │
│  └──────────────────────────────────────────┘   │
│                                                 │
│  ┌───────────────────────────────────────────┐  │
│  │  Dashboard Page                           │  │
│  │  ├── StatsCards (useQuery → React Query)  │  │
│  │  ├── RevenueChart (useQuery → React Query)│  │
│  │  ├── RecentOrders (useQuery → React Query)│  │
│  │  └── FilterBar (useState → local)         │  │
│  └───────────────────────────────────────────┘  │
│                                                 │
│  ┌──────────────────────────────────────────┐   │
│  │  Product Page                            │   │
│  │  ├── ProductList (useQuery → React Query)│   │
│  │  ├── SearchBar (useState → local)        │   │
│  │  └── AddToCart (useCartStore → Zustand)  │   │
│  └──────────────────────────────────────────┘   │
└─────────────────────────────────────────────────┘

State breakdown:
  useState:      SearchBar query, FilterBar selections, form inputs
  Context:       Auth user (read everywhere, changes on login/logout)
                 Theme (read everywhere, changes on toggle)
  Zustand:       Cart items (read by CartIcon + CartPage, written by ProductPage)
  React Query:   Stats, revenue, orders, products (all from API)

// ── Context: Auth (changes rarely, needed everywhere) ──
const AuthContext = createContext(null);
function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  // login/logout logic...
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// ── Zustand: Cart (changes often, needed in header + product + cart pages) ──
const useCartStore = create((set) => ({
  items: [],
  addItem: (product) => set((s) => ({ items: [...s.items, product] })),
  removeItem: (id) => set((s) => ({ items: s.items.filter(i => i.id !== id) })),
  total: () => 0, // computed in selector
}));

// ── React Query: Products (server state, cached) ──
function useProducts(category) {
  return useQuery({
    queryKey: ["products", category],
    queryFn: () => fetch(`/api/products?cat=${category}`).then(r => r.json()),
    staleTime: 2 * 60 * 1000,
  });
}

// ── Component: ProductPage (composes all patterns) ──
function ProductPage() {
  const [search, setSearch] = useState("");           // local state
  const { user } = useAuth();                          // context
  const addItem = useCartStore((s) => s.addItem);      // zustand
  const { data: products, isLoading } = useProducts(); // react query

  const filtered = products?.filter(p =>
    p.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <SearchBar value={search} onChange={setSearch} />
      {isLoading ? <Spinner /> : (
        <ProductGrid
          products={filtered}
          onAddToCart={user ? addItem : () => alert("Please login")}
        />
      )}
    </div>
  );
}

Scenario: Cart has 10 items. User adds 1 more item.

── Context (no optimization) ──────────────────────
  CartContext value changes → ALL consumers re-render:
  ✗ CartIcon re-renders (needs item count)
  ✗ CartPage re-renders (needs item list)
  ✗ CheckoutButton re-renders (needs total price)
  ✗ Header re-renders (just reads cart for badge)
  ✗ ProductCard re-renders (reads addItem function)
  = 5 re-renders, even though most only need one field

── Zustand (with selectors) ───────────────────────
  Cart store updates → only subscribed slices trigger:
  ✓ CartIcon re-renders (subscribed to items.length)
  ✓ CartPage re-renders (subscribed to items array)
  ✗ CheckoutButton skipped (subscribed to total — unchanged)
  ✗ Header skipped (subscribed to items.length — same as CartIcon)
  ✗ ProductCard skipped (subscribed to addItem — stable reference)
  = 2 re-renders, only components whose slice actually changed