What is the difference between local, global, and server state?

Local state lives in one component (toggle, form input). Global state is shared across the app (auth, theme, cart). Server state is fetched from an API (posts, users) — cache it with React Query or SWR, not Redux.

When should you use Redux vs Zustand?

Redux Toolkit for large complex apps needing predictable action flows, middleware, and DevTools. Zustand for simple to medium global state with minimal boilerplate. Many apps use both: Zustand for UI prefs, React Query for server data.

Why does Context API cause performance issues?

When context value changes, every consumer re-renders — even if they only use a slice of the data. Split contexts by concern, memoize values, or use Zustand/Redux selectors for fine-grained subscriptions.

What is React Query used for?

Server state management — API caching, request deduping, background refetch, pagination, and optimistic updates. It is not a replacement for local UI state. Use useQuery for reads and useMutation for writes.

State Management

Local, global, and server state — Redux, Zustand, React Query, and when to use each.

Module 9 · State Management

Local, global, and server state: Redux Toolkit, Zustand, Context API, React Query, MobX, Jotai — patterns, trade-offs, and when to use each.

Local, global, and server state in React: useState, useReducer, Redux Toolkit, Zustand, Context API, React Query, MobX, and Jotai — library comparison, architecture patterns, and clear rules for when to use each.

About this module

State management is the backbone of every frontend app — SDE-2 interviews expect you to distinguish local vs global vs server state and pick the right tool without over-engineering.

This module covers useState and useReducer, Redux Toolkit, Zustand, Context API, React Query, MobX, and Jotai — plus single source of truth, immutable updates, selectors, middleware, and architecture patterns.

The goal is to pick the smallest tool that fits: local state for UI, React Query for server data, Zustand or Redux only when multiple distant components genuinely need shared mutable state.

Compare Redux Toolkit, Zustand, Context API, React Query, MobX, and Jotai with bundle size, boilerplate, DevTools, and re-render behavior — plus patterns like selectors, middleware, and optimistic updates.

Why this matters

State management questions appear in nearly every SDE-2 frontend interview. You must explain local vs global vs server state, why Context re-renders all consumers, when Redux beats Zustand, and why React Query belongs with API data — not in Redux. Over-engineering state is a common red flag interviewers watch for.

Key topics covered

Local State
Global State
Server State
Redux Toolkit
Zustand
Context API
React Query
MobX
Jotai
Immutable Updates
Selectors
Middleware
Architecture Patterns

Where you'll use it

Choosing Zustand vs Redux for a medium-sized dashboard
Caching API posts with React Query instead of useEffect + useState
Avoiding Context performance traps for frequently updated state
Implementing optimistic updates with useMutation
Deciding when local useState is enough vs global store

What Is State Management?

Controlling, sharing, and updating data across your application.

State Management is the process of controlling, sharing, and updating data across different parts of an application. It ensures apps are responsive, consistent, and scalable.

What is state?

•What the app knows at any given moment
•User inputs — form data, search text
•User status — logged in, guest, role
•UI state — toggle, modal open, active tab
•API data — posts, users, products

•Backbone holding the app together
•Consistent and predictable user experience
•Easier to track state across components
•Synchronize state across the entire app

Types of State Management

Local, global, and server state — three buckets, three strategies.

A. Local State

State managed within a single component or small group. Use for UI toggles, form inputs, component-specific data.

function Toggle() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <button type="button" onClick={() => setIsOpen(!isOpen)}>
      {isOpen ? "Open" : "Closed"}
    </button>
  );
}

Libraries: useState, useReducer (complex local state)

B. Global State

State shared across multiple components or the entire app — auth, theme, cart items.

•Context API — built-in, simple
•Redux Toolkit — centralized, complex apps
•Zustand — minimal, no boilerplate
•MobX — observable-based
•Jotai — atomic state

C. Server State

Data fetched from an external API — not managed locally. Needs caching, deduping, background updates, offline support, pagination.

•React Query (TanStack Query) — recommended
•SWR — alternative
•Apollo Client — GraphQL

Golden rule

Keep state as close as possible to where it is used. Default to local state. Promote to global only when multiple unrelated components need it. Use React Query for API data — not Redux.

State Management Libraries

Deep dive into each tool — pros, cons, and code examples.

Redux Toolkit

Centralized state (Redux pattern)

Pros

✓ Predictable — single source of truth
✓ Redux DevTools
✓ Middleware (thunk, saga)
✓ Large ecosystem, mature

Cons

✗ Boilerplate
✗ Complex setup
✗ Heavier bundle

Best for: Large, complex enterprise applications

const store = configureStore({
  reducer: { user: userReducer, posts: postsReducer },
});

const user = useSelector((state) => state.user);
dispatch(loginAction(userData));

Zustand

Centralized but minimal

Pros

✓ Minimal API — no actions/reducers
✓ No boilerplate
✓ Small bundle (~1KB)
✓ Works with React Hooks

Cons

✗ Less structured
✗ Smaller ecosystem
✗ Less mature

Best for: Simple to medium apps, quick development

const useStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

const { user, setUser } = useStore();

Context API

Built-in React

Pros

✓ No external library
✓ Simple setup
✓ Good for small apps

Cons

✗ Re-renders all consumers
✗ No built-in optimization
✗ Not ideal for frequent updates

Best for: Small apps — theme, simple auth

const UserContext = createContext<User | null>(null);

<UserContext.Provider value={user}>
  {children}
</UserContext.Provider>

const user = useContext(UserContext);

React Query (TanStack Query)

Server state management

Pros

✓ Automatic caching
✓ Request deduping
✓ Background updates
✓ Offline support, pagination
✓ Optimistic updates

Cons

✗ External library
✗ Only for server state

Best for: API data fetching — posts, users, products

const { data, isLoading } = useQuery({
  queryKey: ["posts"],
  queryFn: fetchPosts,
  staleTime: 5 * 60 * 1000,
  gcTime: 30 * 60 * 1000,
});

MobX

Observable-based (reactive)

Pros

✓ Reactive auto-updates
✓ Minimal boilerplate
✓ Clean syntax

Cons

✗ Less predictable
✗ Smaller ecosystem
✗ Less popular

Best for: Apps needing reactive updates

class Store {
  user: User | null = null;

  setUser(user: User) {
    this.user = user;
  }
}

makeAutoObservable(this);

Jotai

Atomic state management

Pros

✓ Minimal API
✓ No boilerplate
✓ Fine-grained updates

Cons

✗ Less known
✗ Smaller ecosystem

Best for: Simple global state with atomic granularity

const userAtom = atom<User | null>(null);

function User() {
  const [user, setUser] = useAtom(userAtom);
  return <div>{user?.name}</div>;
}

Library Comparison Table

Side-by-side trade-offs at a glance.

Library	Type	Pros	Cons	Best For
Redux Toolkit	Centralized	Predictable, dev tools	Boilerplate	Large complex apps
Zustand	Centralized	Minimal, small bundle	Less structured	Simple/medium apps
Context API	Built-in	No external lib	Re-renders all	Small apps, theme
React Query	Server state	Caching, deduping	Server only	API data fetching
MobX	Observable	Reactive	Less predictable	Reactive updates
Jotai	Atomic	Minimal, atomic	Less known	Simple global state

Key Concepts

Single source of truth, immutability, actions, selectors, middleware.

Single Source of Truth

One central store for all state — predictable changes, easy debugging, consistent data across the app.

const store = configureStore({ reducer });
// All state in one place

Immutable Updates

// BAD — mutable
state.user.name = "John";

// GOOD — immutable
setState({ user: { ...state.user, name: "John" } });

Action-Based Updates

dispatch({ type: "LOGIN", payload: userData });

Clear intent, easy debugging, traceable changes.

Selectors

const user = useSelector((state) => state.user);
const userName = useSelector((state) => state.user.name);

Extract specific slices — avoid exposing entire state. Memoize for performance.

Middleware

Interceptors between dispatch and state update — async (thunk, saga), logging, analytics, error handling.

const login = createAsyncThunk("user/login", async (credentials) => {
  const response = await api.login(credentials);
  return response.user;
});

Optimistic Updates

Update UI before server confirms — instant feedback, rollback on error.

const mutation = useMutation({
  mutationFn: updatePost,
  onMutate: async (newPost) => {
    await queryClient.cancelQueries({ queryKey: ["post", id] });
    queryClient.setQueryData(["post", id], newPost);
  },
  onError: (_err, _vars, context) => {
    queryClient.setQueryData(["post", id], context?.previous);
  },
});

Architecture Patterns

Redux, Observable, Atomic, and Server State flows.

Pattern 1 — Redux

Component dispatches action

Action → Reducer

Reducer returns new state

State updates → Component re-renders

Pattern 2 — Observable (MobX)

Component subscribes to observable

Observable notifies on change

Component auto-updates

Pattern 3 — Atomic (Jotai)

Atom holds state

Component uses atom via useAtom

Only subscribers to that atom re-render

Pattern 4 — Server State (React Query)

Component calls useQuery

Query fetches data (or returns cache)

Data cached with staleTime

Component re-renders with data

When to Use Each

Match the library to the scenario.

Scenario	Recommended
Simple app, small state	Context API, useState
Medium app, some global state	Zustand
Large app, complex state	Redux Toolkit
API data fetching	React Query
Reactive updates	MobX
Atomic global state	Jotai
GraphQL	Apollo Client
Form state	React Hook Form

Key Interview Takeaways

Ten points to nail state management questions.

•State = what the app knows — inputs, UI, auth, API data
•Local state first — useState/useReducer for component UI
•Global state — auth, theme, cart; use Zustand or Redux
•Server state — API data; use React Query, not Redux
•Context re-renders all consumers — split contexts or use selectors
•Redux = predictable, DevTools, middleware — for complex apps
•Zustand = minimal API, no boilerplate — for medium apps
•Immutable updates — never mutate state directly
•Selectors — subscribe to slices, not entire store
•Optimistic updates — instant UX, rollback on error

Frequently Asked Questions

Common interview questions about state management.

Library

Type

Pros

Cons

Best For

Redux Toolkit

Centralized

Predictable, dev tools

Boilerplate

Large complex apps

Zustand

Centralized

Minimal, small bundle

Less structured

Simple/medium apps

Context API

Built-in

No external lib

Re-renders all

Small apps, theme

React Query

Server state

Caching, deduping

Server only

API data fetching

MobX

Observable

Reactive

Less predictable

Reactive updates

Jotai

Atomic

Minimal, atomic

Less known

Simple global state

Scenario

Recommended

Simple app, small state

Context API, useState

Medium app, some global state

Zustand

Large app, complex state

Redux Toolkit

API data fetching

React Query

Reactive updates

MobX

Atomic global state

Jotai

GraphQL

Apollo Client

Form state

React Hook Form

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Is State Management?

Types of State Management

State Management Libraries

Library Comparison Table

Key Concepts

Architecture Patterns

When to Use Each

Key Interview Takeaways

Frequently Asked Questions

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Is State Management?

Types of State Management

State Management Libraries

Library Comparison Table

Key Concepts

Architecture Patterns

When to Use Each

Key Interview Takeaways

Frequently Asked Questions