Module 04: State Management & Data Flow — Managing State at Scale

Estimated Time: 18-22 hours Difficulty: 🔴 Advanced Prerequisites: Module 02 (Hooks), Module 03 (Patterns) Interview Weight: ⭐⭐⭐⭐⭐ (Redux questions are extremely common)

📋 Table of Contents

The State Management Landscape
Types of State in React Apps
Local State Patterns
Context API at Scale
Redux Deep Dive
Redux Toolkit (Modern Redux)
Zustand — Lightweight Alternative
Server State: React Query / TanStack Query
When to Use What — Decision Framework
Common Mistakes & Gotchas
Practice Problems
Interview Questions
"What's the Output?" Challenges

1. The State Management Landscape

┌────────────────────────────────────────────────────────┐
│  The State Management Spectrum                          │
│                                                         │
│  Simple ◄──────────────────────────────────► Complex    │
│                                                         │
│  useState    Context    Zustand    Redux    Redux +      │
│  useReducer  API        Jotai      Toolkit  Saga/Thunk  │
│                         Recoil                          │
│                                                         │
│  ┌──────┐   ┌────────┐  ┌───────┐ ┌──────────────────┐ │
│  │Local │   │Shared  │  │Global │ │Enterprise-scale  │ │
│  │State │   │Subtree │  │Store  │ │with middleware    │ │
│  └──────┘   └────────┘  └───────┘ └──────────────────┘ │
│                                                         │
│  Use the SIMPLEST tool that solves your problem.        │
│  Don't use Redux for a todo app!                        │
└────────────────────────────────────────────────────────┘

2. Types of State in React Apps

Understanding WHAT kind of state you're dealing with determines HOW to manage it:

┌──────────────────────────────────────────────────────────┐
│  State Type      │  Examples           │  Best Tool       │
├──────────────────┼─────────────────────┼──────────────────┤
│  UI State        │  Modal open/closed  │  useState         │
│  (local)         │  Tab selection      │  useReducer       │
│                  │  Form input values  │                   │
├──────────────────┼─────────────────────┼──────────────────┤
│  Shared UI State │  Theme (dark/light) │  Context API      │
│  (cross-comp)    │  User auth status   │  Zustand          │
│                  │  Sidebar collapsed  │                   │
├──────────────────┼─────────────────────┼──────────────────┤
│  Server State    │  User profile data  │  React Query      │
│  (cached)        │  Product listings   │  SWR              │
│                  │  Search results     │  RTK Query        │
├──────────────────┼─────────────────────┼──────────────────┤
│  Complex Client  │  Shopping cart      │  Redux Toolkit    │
│  State           │  Multi-step wizard  │  Zustand          │
│                  │  Collaborative      │                   │
│                  │  editing            │                   │
├──────────────────┼─────────────────────┼──────────────────┤
│  URL State       │  Current page       │  React Router     │
│                  │  Search params      │  URL search params│
│                  │  Filters            │                   │
├──────────────────┼─────────────────────┼──────────────────┤
│  Form State      │  Validation         │  React Hook Form  │
│                  │  Touched/dirty      │  Formik           │
│                  │  Submission status  │                   │
└──────────────────┴─────────────────────┴──────────────────┘

💡 Key Insight: The biggest mistake people make is putting ALL state in one place (usually Redux). Different types of state belong in different places. Server state should NOT be in Redux.

3. Local State Patterns

Lifting State Up (Revisited)

// When siblings need to share state, lift it to their common parent

function TemperatureCalculator() {
  const [temp, setTemp] = useState('');
  const [scale, setScale] = useState('celsius');

  const celsius = scale === 'fahrenheit' ? ((parseFloat(temp) - 32) * 5/9) : parseFloat(temp);
  const fahrenheit = scale === 'celsius' ? ((parseFloat(temp) * 9/5) + 32) : parseFloat(temp);

  return (
    <div>
      <TemperatureInput
        label="Celsius"
        value={scale === 'celsius' ? temp : celsius.toFixed(2)}
        onChange={(val) => { setTemp(val); setScale('celsius'); }}
      />
      <TemperatureInput
        label="Fahrenheit"
        value={scale === 'fahrenheit' ? temp : fahrenheit.toFixed(2)}
        onChange={(val) => { setTemp(val); setScale('fahrenheit'); }}
      />
    </div>
  );
}

function TemperatureInput({ label, value, onChange }) {
  return (
    <label>
      {label}: <input value={value} onChange={e => onChange(e.target.value)} />
    </label>
  );
}

State Colocation — Keep State Close to Where It's Used

// ❌ Over-lifting: State is too far from where it's used
function App() {
  const [searchTerm, setSearchTerm] = useState('');  // Only used in SearchPage!
  const [sortOrder, setSortOrder] = useState('asc');   // Only used in ProductList!

  return (
    <Layout>
      <SearchPage searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
      <ProductList sortOrder={sortOrder} setSortOrder={setSortOrder} />
    </Layout>
  );
}

// ✅ Colocated: State lives where it's used
function App() {
  return (
    <Layout>
      <SearchPage />    {/* Manages its own search state */}
      <ProductList />    {/* Manages its own sort state */}
    </Layout>
  );
}

4. Context API at Scale

When Context Works Well

✅ Good use cases for Context:
├── Theme (light/dark)
├── Current user / authentication
├── Locale / internationalization
├── Feature flags
└── Any data that rarely changes and is needed by many components

When Context Falls Short

❌ Poor use cases for Context:
├── Frequently changing data (causes re-renders of ALL consumers)
├── Complex state logic with many actions
├── State that needs middleware (logging, persistence)
├── State that needs time-travel debugging
└── High-performance scenarios with many consumers

Optimizing Context Performance

import { createContext, useContext, useState, useMemo, memo } from 'react';

// ❌ Naive approach — everything re-renders on any change
const AppContext = createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  // New object every render = ALL consumers re-render
  return (
    <AppContext.Provider value={{ user, setUser, theme, setTheme }}>
      {children}
    </AppContext.Provider>
  );
}

// ✅ Optimized — separate contexts + memoized values

const UserContext = createContext();
const ThemeContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  // Memoize the value object
  const value = useMemo(() => ({ user, setUser }), [user]);
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const value = useMemo(() => ({ theme, setTheme }), [theme]);
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

// Now: changing theme doesn't re-render user consumers!
function App() {
  return (
    <UserProvider>
      <ThemeProvider>
        <MainApp />
      </ThemeProvider>
    </UserProvider>
  );
}

5. Redux Deep Dive

What is Redux?

Redux is a predictable state container for JavaScript apps. It stores all application state in a single object (the "store") and uses a strict pattern to update it.

Real-World Analogy

Think of Redux as a bank:

Store = The bank vault (holds all the money/state)
Action = A withdrawal/deposit slip (describes what you want to do)
Reducer = The bank teller (processes the slip and updates the vault)
Dispatch = Handing the slip to the teller (triggering the update)
Selector = Your bank statement (reading specific data from the vault)

The Three Principles

┌──────────────────────────────────────────────────────┐
│  Redux Three Principles:                              │
│                                                       │
│  1. Single Source of Truth                             │
│     The entire app state lives in ONE store.           │
│     Makes debugging and serialization easy.            │
│                                                       │
│  2. State is Read-Only                                │
│     You can't modify state directly.                   │
│     The only way to change state is to DISPATCH        │
│     an ACTION — a plain object describing what         │
│     happened.                                          │
│                                                       │
│  3. Changes via Pure Functions                         │
│     Reducers are pure functions:                       │
│     (previousState, action) → newState                 │
│     No side effects, no mutations, always              │
│     predictable.                                       │
└──────────────────────────────────────────────────────┘

Redux Data Flow

┌─────────────────────────────────────────────────────┐
│                                                      │
│                    Redux Data Flow                    │
│                                                      │
│   ┌──────────┐                                       │
│   │   UI     │  1. User clicks "Add to Cart"         │
│   │ (React)  │────────────────────┐                  │
│   └──────────┘                    │                  │
│        ▲                          ▼                  │
│        │                   ┌──────────────┐          │
│        │                   │   Action     │          │
│   6. UI re-renders         │   Creator    │          │
│      with new data         │  addToCart() │          │
│        │                   └──────┬───────┘          │
│        │                          │                  │
│        │                   2. Returns action:        │
│        │                   { type: 'ADD_TO_CART',    │
│   ┌────┴──────┐             payload: { id: 1 } }    │
│   │  Store    │                   │                  │
│   │  .getState│            3. dispatch(action)       │
│   └────┬──────┘                   │                  │
│        │                          ▼                  │
│   5. Store updates         ┌──────────────┐          │
│      and notifies          │   Reducer    │          │
│      subscribers           │              │          │
│        ▲                   │ (state, action)         │
│        │                   │   → newState │          │
│        │                   └──────┬───────┘          │
│        │                          │                  │
│        └──────────────────────────┘                  │
│                    4. Returns new state               │
│                                                      │
└─────────────────────────────────────────────────────┘

Vanilla Redux Example (Without Toolkit)

import { createStore } from 'redux';

// Action Types
const INCREMENT = 'counter/increment';
const DECREMENT = 'counter/decrement';
const RESET = 'counter/reset';

// Action Creators
const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });
const reset = () => ({ type: RESET });

// Reducer
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    case RESET:
      return { ...state, count: 0 };
    default:
      return state;
  }
}

// Create Store
const store = createStore(counterReducer);

// Subscribe to changes
store.subscribe(() => {
  console.log('State changed:', store.getState());
});

// Dispatch actions
store.dispatch(increment());  // { count: 1 }
store.dispatch(increment());  // { count: 2 }
store.dispatch(decrement());  // { count: 1 }
store.dispatch(reset());      // { count: 0 }

Connecting Redux to React (Legacy — `connect`)

import { connect } from 'react-redux';

// The old way — using connect HOC
function Counter({ count, increment, decrement }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

// mapStateToProps: what state does this component need?
const mapStateToProps = (state) => ({
  count: state.counter.count,
});

// mapDispatchToProps: what actions does this component dispatch?
const mapDispatchToProps = {
  increment,
  decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Modern Redux with Hooks

import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  // useSelector replaces mapStateToProps
  const count = useSelector(state => state.counter.count);

  // useDispatch replaces mapDispatchToProps
  const dispatch = useDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

Redux Middleware

┌──────────────────────────────────────────────────────┐
│  Middleware sits between dispatch and reducer:         │
│                                                       │
│  dispatch(action)                                     │
│     │                                                 │
│     ▼                                                 │
│  ┌──────────┐   ┌──────────┐   ┌──────────┐         │
│  │ Logger   │──▶│ Thunk    │──▶│ Reducer  │         │
│  │ Middleware│   │Middleware│   │          │         │
│  └──────────┘   └──────────┘   └──────────┘         │
│                                                       │
│  Middleware can:                                       │
│  - Log every action (redux-logger)                    │
│  - Handle async actions (redux-thunk, redux-saga)     │
│  - Persist state (redux-persist)                      │
│  - Report errors (sentry-redux)                       │
│  - Cancel, delay, or modify actions                   │
└──────────────────────────────────────────────────────┘

6. Redux Toolkit (Modern Redux)

Why Redux Toolkit?

Redux Toolkit (RTK) is the official, recommended way to write Redux. It solves the main complaints about vanilla Redux:

Vanilla Redux problems → Redux Toolkit solutions:
├── Too much boilerplate    → createSlice auto-generates actions
├── Need many packages      → All included in @reduxjs/toolkit
├── Immutable updates hard  → Uses Immer (write "mutable" code safely)
├── Store setup complex     → configureStore does it all
├── No async pattern        → createAsyncThunk built-in
└── No selectors            → Reselect included

Setting Up Redux Toolkit

npm install @reduxjs/toolkit react-redux

Creating a Slice

// features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',     // Prefix for action types
  initialState: {
    count: 0,
    status: 'idle',
  },
  reducers: {
    // Each reducer automatically generates an action creator!
    increment(state) {
      state.count += 1;  // ✅ "Mutation" is OK — Immer handles immutability!
    },
    decrement(state) {
      state.count -= 1;
    },
    incrementByAmount(state, action) {
      state.count += action.payload;
    },
    reset(state) {
      state.count = 0;
    },
  },
});

// Auto-generated action creators
export const { increment, decrement, incrementByAmount, reset } = counterSlice.actions;

// Selectors
export const selectCount = (state) => state.counter.count;

// The reducer
export default counterSlice.reducer;

🔍 Under the Hood: Immer

// How Immer makes "mutations" safe:

// What you write:
increment(state) {
  state.count += 1;  // Looks like mutation!
}

// What Immer does behind the scenes:
// 1. Creates a "draft" (proxy) of the state
// 2. Tracks all changes you make to the draft
// 3. Produces a new immutable state based on the changes
// Equivalent to:
increment(state) {
  return { ...state, count: state.count + 1 };  // Immer does this for you
}

// ⚠️ Important rules with Immer:
// Either mutate the draft OR return a new object — never both!

// ✅ Mutate
increment(state) {
  state.count += 1;
}

// ✅ Return new object
increment(state) {
  return { ...state, count: state.count + 1 };
}

// ❌ NEVER do both
increment(state) {
  state.count += 1;
  return state;  // Ambiguous! Don't mix patterns
}

Configuring the Store

// store/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import todosReducer from '../features/todos/todosSlice';
import userReducer from '../features/user/userSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
    todos: todosReducer,
    user: userReducer,
  },
  // DevTools are automatically enabled in development!
  // Thunk middleware is automatically included!
});

export default store;

Providing the Store to React

// main.jsx
import { Provider } from 'react-redux';
import store from './store/store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Async Actions with createAsyncThunk

// features/users/usersSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk — handles pending/fulfilled/rejected automatically
export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',  // Action type prefix
  async (_, { rejectWithValue }) => {
    try {
      const response = await fetch('/api/users');
      if (!response.ok) throw new Error('Failed to fetch');
      return await response.json();  // This becomes action.payload
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

export const deleteUser = createAsyncThunk(
  'users/deleteUser',
  async (userId, { rejectWithValue }) => {
    try {
      await fetch(`/api/users/${userId}`, { method: 'DELETE' });
      return userId;  // Return the ID so reducer can remove it
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

const usersSlice = createSlice({
  name: 'users',
  initialState: {
    items: [],
    status: 'idle',  // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null,
  },
  reducers: {
    // Regular synchronous reducers here
  },
  extraReducers: (builder) => {
    builder
      // Fetch Users
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
        state.error = null;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.payload;
      })
      // Delete User
      .addCase(deleteUser.fulfilled, (state, action) => {
        state.items = state.items.filter(u => u.id !== action.payload);
      });
  },
});

export const selectUsers = (state) => state.users.items;
export const selectUsersStatus = (state) => state.users.status;
export const selectUsersError = (state) => state.users.error;

export default usersSlice.reducer;

Using in Components

import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers, deleteUser, selectUsers, selectUsersStatus, selectUsersError } from './usersSlice';
import { useEffect } from 'react';

function UserList() {
  const dispatch = useDispatch();
  const users = useSelector(selectUsers);
  const status = useSelector(selectUsersStatus);
  const error = useSelector(selectUsersError);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUsers());
    }
  }, [status, dispatch]);

  if (status === 'loading') return <p>Loading users...</p>;
  if (status === 'failed') return <p>Error: {error}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          <button onClick={() => dispatch(deleteUser(user.id))}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

7. Zustand — Lightweight Alternative

Why Zustand?

Zustand is a minimal state management library. No boilerplate, no providers, no reducers:

Redux Toolkit:
├── createSlice with reducers
├── configureStore
├── <Provider store={store}>
├── useSelector + useDispatch
├── createAsyncThunk for async
└── ~15 files for a feature

Zustand:
├── create() with a function
├── Use the hook directly
└── ~1 file for a feature

Zustand Example

import { create } from 'zustand';

// Create a store — it's just a function!
const useStore = create((set, get) => ({
  // State
  count: 0,
  users: [],
  isLoading: false,

  // Actions (just functions that call set)
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),

  // Async actions — no middleware needed!
  fetchUsers: async () => {
    set({ isLoading: true });
    try {
      const response = await fetch('/api/users');
      const users = await response.json();
      set({ users, isLoading: false });
    } catch (error) {
      set({ isLoading: false });
      console.error('Failed to fetch users:', error);
    }
  },

  // Access other state values
  incrementIfBelowMax: (max) => {
    const { count } = get();
    if (count < max) {
      set({ count: count + 1 });
    }
  },
}));

// Usage in components — no Provider needed!
function Counter() {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);

  return <button onClick={increment}>{count}</button>;
}

function UserList() {
  const { users, isLoading, fetchUsers } = useStore();

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  if (isLoading) return <p>Loading...</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Zustand with Middleware

import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

const useStore = create(
  devtools(                        // Redux DevTools integration
    persist(                       // Persist to localStorage
      (set) => ({
        theme: 'light',
        toggleTheme: () => set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light',
        })),
      }),
      { name: 'theme-store' }      // localStorage key
    )
  )
);

📊 Redux Toolkit vs Zustand

Feature	Redux Toolkit	Zustand
Bundle size	~11KB	~1.5KB
Boilerplate	Moderate	Minimal
Provider needed?	Yes	No
DevTools	Built-in	Middleware
Middleware	Built-in (thunk)	Plugin-based
Learning curve	Steeper	Very gentle
TypeScript	Good	Excellent
Ecosystem	Huge	Growing
Time-travel debug	Yes	Via DevTools middleware
Best for	Large teams, complex apps	Small-medium apps

8. Server State: React Query / TanStack Query

The Problem with useEffect for Data Fetching

// ❌ The naive approach has MANY problems:
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => { if (!cancelled) setUser(data); })
      .catch(err => { if (!cancelled) setError(err); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [userId]);

  // Missing features:
  // ❌ No caching — re-fetches on every mount
  // ❌ No background refetching — data gets stale
  // ❌ No deduplication — multiple components fetch same data
  // ❌ No retry on failure
  // ❌ No pagination support
  // ❌ No optimistic updates
  // ❌ No garbage collection
  // ❌ No request cancellation on fast navigation
}

React Query Solves All of This

npm install @tanstack/react-query

// Setup
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,   // Data is "fresh" for 5 minutes
      gcTime: 10 * 60 * 1000,     // Cache garbage collected after 10 min
      retry: 3,                    // Retry failed requests 3 times
      refetchOnWindowFocus: true,  // Refetch when user returns to tab
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MainApp />
    </QueryClientProvider>
  );
}

Basic Query

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const {
    data: user,
    isLoading,
    isError,
    error,
    isFetching,   // True when fetching (including background refetch)
    isStale,       // True when data is stale
    refetch,       // Manually trigger refetch
  } = useQuery({
    queryKey: ['user', userId],     // Unique key for caching
    queryFn: async () => {          // The fetch function
      const res = await fetch(`/api/users/${userId}`);
      if (!res.ok) throw new Error('Failed to fetch user');
      return res.json();
    },
    staleTime: 5 * 60 * 1000,      // Consider data fresh for 5 min
    enabled: !!userId,              // Only fetch if userId exists
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      {isFetching && <small>Updating...</small>}
    </div>
  );
}

Mutations (Create, Update, Delete)

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

function CreateUserForm() {
  const queryClient = useQueryClient();

  const createUser = useMutation({
    mutationFn: async (newUser) => {
      const res = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newUser),
      });
      if (!res.ok) throw new Error('Failed to create user');
      return res.json();
    },
    onSuccess: (newUser) => {
      // Invalidate the users query to trigger a refetch
      queryClient.invalidateQueries({ queryKey: ['users'] });

      // Or optimistically update the cache
      // queryClient.setQueryData(['users'], (old) => [...old, newUser]);
    },
    onError: (error) => {
      alert(`Error: ${error.message}`);
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    createUser.mutate({
      name: formData.get('name'),
      email: formData.get('email'),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <button type="submit" disabled={createUser.isPending}>
        {createUser.isPending ? 'Creating...' : 'Create User'}
      </button>
      {createUser.isError && <p style={{ color: 'red' }}>{createUser.error.message}</p>}
    </form>
  );
}

🔍 How React Query Caching Works

┌─────────────────────────────────────────────────────┐
│  React Query Cache:                                  │
│                                                      │
│  Query Key: ['users']                                │
│  ┌──────────────────────────┐                       │
│  │ Status: success          │                       │
│  │ Data: [{...}, {...}]     │                       │
│  │ Last Updated: 5min ago   │                       │
│  │ Stale: true (>5min)      │                       │
│  │ Observers: 2 components  │                       │
│  └──────────────────────────┘                       │
│                                                      │
│  Query Key: ['user', 42]                             │
│  ┌──────────────────────────┐                       │
│  │ Status: success          │                       │
│  │ Data: {id:42, name:...}  │                       │
│  │ Last Updated: 1min ago   │                       │
│  │ Stale: false (<5min)     │                       │
│  │ Observers: 1 component   │                       │
│  └──────────────────────────┘                       │
│                                                      │
│  When Component A and Component B both call           │
│  useQuery(['user', 42]):                             │
│  - Only ONE network request is made                   │
│  - Both components share the same cached data         │
│  - When data becomes stale, a background refetch      │
│    updates both components                            │
└─────────────────────────────────────────────────────┘

9. When to Use What — Decision Framework

┌───────────────────────────────────────────────────────┐
│                                                        │
│  "What state management should I use?"                 │
│                                                        │
│  Is it SERVER data (from API)?                         │
│  ├── YES → React Query / TanStack Query               │
│  │         (with caching, refetching, etc.)            │
│  └── NO                                                │
│       │                                                │
│       Is it used by only ONE component?                │
│       ├── YES → useState / useReducer                  │
│       └── NO                                           │
│            │                                           │
│            Is it used by a few nearby components?      │
│            ├── YES → Lift state up                     │
│            └── NO                                      │
│                 │                                      │
│                 Does it change rarely?                  │
│                 (theme, auth, locale)                   │
│                 ├── YES → Context API                  │
│                 └── NO                                  │
│                      │                                 │
│                      Is the app small/medium?          │
│                      ├── YES → Zustand                 │
│                      └── NO                            │
│                           │                            │
│                           Large team/enterprise?       │
│                           ├── YES → Redux Toolkit      │
│                           └── NO → Zustand             │
│                                                        │
└───────────────────────────────────────────────────────┘

📊 Comparison Summary

Feature	useState	Context	Zustand	Redux TK	React Query
Scope	Local	Subtree	Global	Global	Server data
Boilerplate	None	Low	Low	Medium	Low
DevTools	React DevTools	React DevTools	Redux DevTools	Redux DevTools	RQ DevTools
Async	Manual	Manual	Built-in	createAsyncThunk	Built-in
Caching	No	No	No	No	Yes ✅
Learning	Easy	Easy	Easy	Medium	Easy-Medium
Best for	Component state	App-wide config	UI state	Complex client	API data

10. Common Mistakes & Gotchas

Mistake 1: Putting Server State in Redux

// ❌ Don't store API data in Redux
const usersSlice = createSlice({
  name: 'users',
  initialState: { data: [], loading: false, error: null },
  // ... lots of boilerplate for fetching, caching, invalidation

  // You're reinventing React Query!
});

// ✅ Use React Query for server state
const { data: users } = useQuery({ queryKey: ['users'], queryFn: fetchUsers });
// Automatic caching, refetching, deduplication, retry...

Mistake 2: Creating New Object Reference in Context Value

// ❌ New object every render = all consumers re-render
function Provider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// ✅ Memoize the value
function Provider({ children }) {
  const [user, setUser] = useState(null);
  const value = useMemo(() => ({ user, setUser }), [user]);
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}

Mistake 3: Over-subscribing to Redux Store

// ❌ Selecting the entire state — re-renders on ANY state change
const state = useSelector(state => state);

// ❌ Creating new object — re-renders every time
const data = useSelector(state => ({
  count: state.counter.count,
  user: state.user.name,
}));

// ✅ Select only what you need — individual selectors
const count = useSelector(state => state.counter.count);
const userName = useSelector(state => state.user.name);

11. Practice Problems

🧪 Problem 1: Build a Shopping Cart with Redux Toolkit

Build a shopping cart with add, remove, update quantity, and clear actions.

<details> <summary>✅ Solution</summary>

// cartSlice.js
import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], total: 0 },
  reducers: {
    addItem(state, action) {
      const existing = state.items.find(i => i.id === action.payload.id);
      if (existing) {
        existing.quantity += 1;
      } else {
        state.items.push({ ...action.payload, quantity: 1 });
      }
      state.total = state.items.reduce((sum, i) => sum + i.price * i.quantity, 0);
    },
    removeItem(state, action) {
      state.items = state.items.filter(i => i.id !== action.payload);
      state.total = state.items.reduce((sum, i) => sum + i.price * i.quantity, 0);
    },
    updateQuantity(state, action) {
      const { id, quantity } = action.payload;
      const item = state.items.find(i => i.id === id);
      if (item) {
        item.quantity = Math.max(0, quantity);
        if (item.quantity === 0) {
          state.items = state.items.filter(i => i.id !== id);
        }
      }
      state.total = state.items.reduce((sum, i) => sum + i.price * i.quantity, 0);
    },
    clearCart(state) {
      state.items = [];
      state.total = 0;
    },
  },
});

export const { addItem, removeItem, updateQuantity, clearCart } = cartSlice.actions;
export const selectCartItems = (state) => state.cart.items;
export const selectCartTotal = (state) => state.cart.total;
export const selectCartCount = (state) =>
  state.cart.items.reduce((sum, i) => sum + i.quantity, 0);

export default cartSlice.reducer;

</details>

🧪 Problem 2: Build a Zustand Store for a Todo App

<details> <summary>✅ Solution</summary>

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useTodoStore = create(
  persist(
    (set, get) => ({
      todos: [],
      filter: 'all', // 'all' | 'active' | 'completed'

      addTodo: (text) => set((state) => ({
        todos: [...state.todos, {
          id: Date.now(),
          text,
          completed: false,
          createdAt: new Date().toISOString(),
        }],
      })),

      toggleTodo: (id) => set((state) => ({
        todos: state.todos.map(t =>
          t.id === id ? { ...t, completed: !t.completed } : t
        ),
      })),

      deleteTodo: (id) => set((state) => ({
        todos: state.todos.filter(t => t.id !== id),
      })),

      clearCompleted: () => set((state) => ({
        todos: state.todos.filter(t => !t.completed),
      })),

      setFilter: (filter) => set({ filter }),

      get filteredTodos() {
        const { todos, filter } = get();
        switch (filter) {
          case 'active': return todos.filter(t => !t.completed);
          case 'completed': return todos.filter(t => t.completed);
          default: return todos;
        }
      },

      get activeCount() {
        return get().todos.filter(t => !t.completed).length;
      },
    }),
    { name: 'todo-storage' }
  )
);

export default useTodoStore;

</details>

12. Interview Questions

❓ Q1: Explain the Redux data flow.

Answer:

User interaction triggers an event (click, form submit)
Component dispatches an action — a plain object with type and optional payload
The store passes current state and action to the reducer
The reducer (pure function) returns a new state based on the action type
The store updates and notifies all subscribed components
Components re-render with the new state

Key principles: single store, state is read-only (immutable updates), reducers are pure functions.

❓ Q2: What is Redux middleware? Give examples.

Answer: Middleware provides a third-party extension point between dispatching an action and the moment it reaches the reducer. It's used for:

redux-thunk: Handle async actions (dispatch functions instead of objects)
redux-saga: Complex async flows using generator functions
redux-logger: Log actions and state changes
redux-persist: Save state to localStorage/AsyncStorage

Middleware intercepts actions and can: log them, transform them, delay them, cancel them, or dispatch additional actions.

❓ Q3: When would you use Context API vs Redux?

Answer:

Context API: For data that changes rarely and is needed by many components — theme, auth, locale. It's simple but triggers re-renders of ALL consumers when ANY value changes.

Redux: For complex client state with many update patterns, middleware needs, or when you want time-travel debugging. Better performance with useSelector (only re-renders when selected data changes).

Neither: For server data, use React Query. For local component state, use useState/useReducer.

❓ Q4: What is React Query? Why not just fetch in useEffect?

Answer: React Query (TanStack Query) is a server state management library. Raw useEffect fetching lacks:

Caching — same data fetched multiple times
Deduplication — multiple components trigger same request
Background refetching — data goes stale
Retry logic — no automatic retry on failure
Garbage collection — unused cache not cleaned up
Optimistic updates — UI doesn't respond instantly
Pagination/infinite scroll — complex to implement

React Query provides all of these out of the box with minimal code.

❓ Q5: What are Redux selectors? Why use them?

Answer: Selectors are functions that extract specific data from the Redux store:

// Simple selector
const selectUserName = (state) => state.user.name;

// Derived selector (with Reselect for memoization)
const selectCompletedTodos = createSelector(
  selectTodos,
  (todos) => todos.filter(t => t.completed)
);

Benefits: encapsulate state shape (components don't know store structure), memoize expensive computations, prevent unnecessary re-renders.

13. "What's the Output?" Challenges

Challenge 1

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  console.log('Counter rendered');
  return <span>{count}</span>;
}

function IncrementButton() {
  const increment = useStore((state) => state.increment);
  console.log('Button rendered');
  return <button onClick={increment}>+</button>;
}

// After clicking the button once, what logs?

<details> <summary>Answer</summary>

Counter rendered

Only Counter re-renders! IncrementButton subscribes only to state.increment (a function reference that never changes), so it doesn't re-render when count changes. This is Zustand's key advantage — fine-grained subscriptions.

</details>

🎯 Module 04 Summary

You now understand:

✅ Different types of state and where each belongs
✅ Context API — usage, limitations, and performance optimization
✅ Redux — core concepts, data flow, middleware
✅ Redux Toolkit — slices, createAsyncThunk, Immer
✅ Zustand — lightweight alternative to Redux
✅ React Query — server state management
✅ Decision framework — when to use what

Next up: Module 05: Performance & React Internals — the "secret weapon" module that separates junior from senior developers. →

04-state-management-and-data-flow.md

Module 04: State Management & Data Flow — Managing State at Scale

📋 Table of Contents

1. The State Management Landscape

2. Types of State in React Apps

3. Local State Patterns

Lifting State Up (Revisited)

State Colocation — Keep State Close to Where It's Used

4. Context API at Scale

When Context Works Well

When Context Falls Short

Optimizing Context Performance

5. Redux Deep Dive

What is Redux?

Real-World Analogy

The Three Principles

Redux Data Flow

Vanilla Redux Example (Without Toolkit)

Connecting Redux to React (Legacy — connect)

Modern Redux with Hooks

Redux Middleware

6. Redux Toolkit (Modern Redux)

Why Redux Toolkit?

Setting Up Redux Toolkit

Creating a Slice

🔍 Under the Hood: Immer

Configuring the Store

Providing the Store to React

Async Actions with createAsyncThunk

Using in Components

7. Zustand — Lightweight Alternative

Why Zustand?

Zustand Example

Zustand with Middleware

📊 Redux Toolkit vs Zustand

8. Server State: React Query / TanStack Query

The Problem with useEffect for Data Fetching

React Query Solves All of This

Basic Query

Mutations (Create, Update, Delete)

🔍 How React Query Caching Works

9. When to Use What — Decision Framework

📊 Comparison Summary

10. Common Mistakes & Gotchas

Mistake 1: Putting Server State in Redux

Mistake 2: Creating New Object Reference in Context Value

Mistake 3: Over-subscribing to Redux Store

11. Practice Problems

🧪 Problem 1: Build a Shopping Cart with Redux Toolkit

🧪 Problem 2: Build a Zustand Store for a Todo App

12. Interview Questions

❓ Q1: Explain the Redux data flow.

❓ Q2: What is Redux middleware? Give examples.

❓ Q3: When would you use Context API vs Redux?

❓ Q4: What is React Query? Why not just fetch in useEffect?

❓ Q5: What are Redux selectors? Why use them?

13. "What's the Output?" Challenges

Challenge 1

🎯 Module 04 Summary

Connecting Redux to React (Legacy — `connect`)