State Management: Local vs Global

After this lesson, you will be able to: Compare local state, lifted state, Context, Zustand, Redux Toolkit, Jotai/Recoil; decide when to use which.

State management is the most-debated React topic. The honest answer: most apps need less than they think.

Prerequisites:Custom Hooks

The state hierarchy

Local component state (useState): for UI state only this component cares about. Lifted state: when 2-3 sibling components share state, lift to common parent. Context: when state is consumed deep in the tree (theme, user). Cheap to use but re-renders all consumers on change. Zustand / Jotai / Recoil: when context's re-render overhead bites. Selectors limit re-renders. Redux Toolkit: legacy + big apps. Predictable; verbose; usually unnecessary for new projects. Server state (React Query / SWR): when state is fetched data, usually misunderstood as 'global state'.

Zustand (the lightweight default)

Minimal API; great DX.

python

import { create } from "zustand";

type Store = {
  count: number;
  inc: () => void;
  user: User | null;
  setUser: (u: User) => void;
};

const useStore = create<Store>((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
  user: null,
  setUser: (user) => set({ user }),
}));

// In a component (selector limits re-renders)
const count = useStore((s) => s.count);
const inc = useStore((s) => s.inc);

React Query (server state)

Probably the most important library in React 2026.

python

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

// Fetch with cache + retry + refetch on focus + dedupe
const { data, isLoading, error } = useQuery({
  queryKey: ["users", filter],
  queryFn: () => fetchUsers(filter),
});

// Mutate + invalidate
const qc = useQueryClient();
const createUser = useMutation({
  mutationFn: (data) => api.createUser(data),
  onSuccess: () => qc.invalidateQueries({ queryKey: ["users"] }),
});

Common mistakes only experienced React devs avoid

Reaching for Redux on day one. Local + context handle 80%. Storing fetched data in Redux/Zustand. Use React Query, it solves caching, invalidation, retries, etc. Context with frequent updates. Every consumer re-renders. Excessive 'global' state. Most state is local or per-route.

Quick Check

Where should fetched user data live?

Pick the modern answer.

ReduxZustandComponent state with useEffect + fetchReact Query / TanStack Query

←Custom Hooks

Back to React (Standalone Deep Dive)

Performance Optimization→