React State Management Patterns — Complete Interview Guide

The Four Layers of React State

Before choosing a tool, identify which category the state belongs to:

1. Local state — owned by one component, no other component needs it
2. Shared state — two or more related components need the same value
3. Global ambient state — many disconnected components read it; changes are infrequent
4. Global dynamic state — many components read and write; changes are frequent

Layer 1: Local State — useState and useReducer

Use useState for simple values (a string, boolean, or number) and useReducer when the next state depends on the previous state or multiple values must change together:

// useState — simple toggle
const [isOpen, setIsOpen] = useState(false);

// useReducer — multiple related state transitions
const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });

dispatch({ type: 'ADD_ITEM', payload: product });
dispatch({ type: 'REMOVE_ITEM', payload: productId });

Rule: if state only matters to one component (a dropdown open/close, an active tab, a form field value), keep it local. Moving state out is premature complexity.

Layer 2: Shared State — Lifting Up

When two sibling components need to share state, lift it to their closest common ancestor. The ancestor owns the state and distributes it as props:

// Parent owns the state — both children are controlled
function SearchPage() {
  const [query, setQuery] = useState('');

  return (
    <>
      <SearchInput value={query} onChange={setQuery} />
      <SearchResults query={query} />
    </>
  );
}

This is the correct solution for most shared state situations — no library needed.

Layer 3: Global Ambient State — Context

Context is right for data that is:

• Read by many disconnected components across the tree
• Infrequently updated (changes don't happen on every user action)
• Essentially configuration: current user, theme, locale, feature flags

const ThemeContext = React.createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <AppContent />
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </ThemeContext.Provider>
  );
}

Context's weakness: all consumers re-render when the value changes — even if only one field in a large context object changed. For frequently-updated state, this is a performance bottleneck.

Layer 4: Global Dynamic State — Zustand / Redux

External stores solve Context's re-render problem with selective subscriptions — a component subscribes to only the slice of state it needs:

// Zustand store — simple to write, selective subscriptions built in
import { create } from 'zustand';

const useCartStore = create((set) => ({
  items: [],
  total: 0,
  addItem: (product) => set((state) => ({
    items: [...state.items, product],
    total: state.total + product.price,
  })),
}));

// Component subscribes only to 'total' — doesn't re-render when items change
function CartBadge() {
  const total = useCartStore(state => state.total); // selector
  return <span>{total}</span>;
}

// Different component subscribes only to 'items'
function CartList() {
  const items = useCartStore(state => state.items);
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
}

Zustand vs Redux: Zustand has minimal boilerplate (no actions/reducers/selectors setup), integrates seamlessly with TypeScript, and is easier to learn. Redux Toolkit is more structured, has excellent DevTools with time-travel debugging, and suits large teams where the extra convention helps. For most new projects, Zustand is the right default.

Server State — React Query / TanStack Query

A major insight: most of what developers store in global state is actually server data — data fetched from an API that lives on the server. Managing this in Redux or useState means manually handling loading, error, caching, invalidation, and re-fetching. React Query (TanStack Query) handles all of this:

// Without React Query — manual boilerplate
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
  fetch('/api/users').then(r => r.json()).then(setUsers).catch(setError).finally(() => setLoading(false));
}, []);

// With React Query — caching, deduplication, background refetch, built in
const { data: users, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then(r => r.json()),
});

The query key is a cache key. If multiple components call useQuery({ queryKey: ['users'] }), only one request fires. The result is cached and shared automatically.

URL State — Underused but Powerful

Some state belongs in the URL — filters, search queries, pagination, selected tabs. URL state persists across page refreshes, is shareable via link, and is accessible via the back button:

// Storing filter state in URL query params (React Router)
const [searchParams, setSearchParams] = useSearchParams();
const category = searchParams.get('category') ?? 'all';

function handleFilter(value) {
  setSearchParams({ category: value }); // survives page refresh, shareable link
}

Choosing the Right Layer — Quick Reference

• One component → useState / useReducer
• Sibling components → lift state up
• Many components, rarely changes → Context
• Many components, frequently changes → Zustand / Redux
• Data from an API → React Query
• Should survive refresh / be shareable → URL state