State Management Architecture — System Design Interview Guide

The Two Types of State

Server State

Data that originates on the server and your app displays. It's always potentially stale — another user might have changed it. It needs loading/error states, background refetching, caching, and pagination.

• User list from an API
• Product inventory
• Dashboard metrics

Best managed by: React Query, SWR, RTK Query

Client State

State that exists only in your frontend — the server doesn't know or care about it.

• Modal open/closed
• Currently selected tab
• Form input in progress
• Filter sidebar expanded

Best managed by: useState, useReducer, Zustand, or Context

React Query — Server State Done Right

React Query handles all the complexity of server state: caching, background refetching, deduplication, pagination, optimistic updates. You declare what you want; React Query handles when and how to fetch it.

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
    staleTime: 60_000,     // treat as fresh for 1 min
    refetchOnWindowFocus: true, // refetch when tab regains focus
  });

  // Mutations with optimistic updates
  const mutation = useMutation({
    mutationFn: updateUser,
    onMutate: async (newUser) => {
      await queryClient.cancelQueries(['user', userId]);
      const previous = queryClient.getQueryData(['user', userId]);
      queryClient.setQueryData(['user', userId], newUser); // optimistic
      return { previous };
    },
    onError: (err, newUser, context) => {
      queryClient.setQueryData(['user', userId], context.previous); // rollback
    },
  });
}

When Does Redux Actually Make Sense?

Redux is often added out of habit. Ask before reaching for it:

• Is this server state? → Use React Query/SWR instead
• Is this local to one component? → Use useState
• Is this shared across many components but client-only? → Use Zustand or Context

Redux genuinely shines for: complex client-side state with many actors and time-travel debugging needs (undo/redo, replaying actions), or large teams needing strict action-based patterns for auditability.

Zustand — Minimal Global State

When you need shared client state without Redux's boilerplate. A Zustand store is a hook.

import { create } from 'zustand';

const useUIStore = create((set) => ({
  sidebarOpen: false,
  theme: 'light',
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
  setTheme: (theme) => set({ theme }),
}));

// In any component — no Provider required
const { sidebarOpen, toggleSidebar } = useUIStore();

The Decision Framework

Is it from a server/API?
  Yes → React Query / SWR / RTK Query
  No →
    Is it needed by more than one component tree?
      No → useState / useReducer
      Yes →
        Is it simple? → Context (or Zustand)
        Is it complex with many mutations? → Zustand (or Redux if team prefers)