React State Management

In React, State is the memory of your user interface. It represents any piece of data that can change over time based on user interactions, network responses, timers, or form inputs.

When state changes, React automatically evaluates component functions, performs virtual DOM diffing, and reconciles the real browser DOM to reflect the new state. This declarative model is summarized by the formula:

State Management refers to the architectural design of how state is initialized, stored, modified, and broadcasted across components in a software application.

In a small React component, state management is trivial: a simple useState(0) handles a counter. But in real-world applications, data must flow across dozens of deeply nested components, sidebar navigation drawers, checkout screens, and user session bars.

As applications scale from single pages to complex web applications, managing state encounters four classic friction points:

The most crucial question in React design is: “Which component should own this state?”

1. Local State

If a piece of state is only used by a single component and none of its ancestors or siblings need it (e.g. an accordion open toggle or text input value), keep it local with useState.

2. Shared State & Lifting State Up

When two or more sibling components need access to the same state (for example, a ProductList adding items and a Header displaying the cart item badge), lift the state up to their closest common parent component.

// 1. Common Parent owns the state (Single Source of Truth)
function App() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      {/* 2. Pass read-only state to Header */}
      <Header count={cartCount} />
      
      {/* 3. Pass updater callback down to ProductList */}
      <ProductList onAddToCart={() => setCartCount(c => c + 1)} />
    </div>
  );
}

When component state involves complex logic, multiple sub-values, or when the next state depends heavily on the previous state, useReducer provides a clean, predictable architecture inspired by Redux.

type CartAction =
  | { type: 'ADD'; payload: Product }
  | { type: 'REMOVE'; payload: { id: string } }
  | { type: 'CLEAR' };

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'ADD':
      return { ...state, items: [...state.items, action.payload] };
    case 'REMOVE':
      return { ...state, items: state.items.filter(i => i.id !== action.payload.id) };
    case 'CLEAR':
      return { ...state, items: [] };
    default:
      return state;
  }
}

React Context allows you to broadcast values (like user authentication, dark/light themes, or locale preferences) to all descendants without explicitly passing props through intermediate components.

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

const ThemeContext = createContext<{ theme: string; toggle: () => void } | null>(null);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState('dark');
  const toggle = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
};

Combining Context with useReducer creates a powerful, lightweight global state store with zero external dependencies.

Use this 3-point test before making any state global:

Follow the State Decision Ladder. Move up a level only when your requirements exceed the lower level's capabilities:

Redux is a predictable state container based on the Flux pattern. It enforces strict unidirectional data flow:

Modern Standard: Redux Toolkit (RTK)

Legacy Redux required hand-writing action types, action creators, and immutable switch statements. Redux Toolkit (@reduxjs/toolkit) simplifies this dramatically with createSlice and built-in Immer support.

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CartState {
  items: { id: string; name: string; qty: number }[];
}

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] } as CartState,
  reducers: {
    addItem: (state, action: PayloadAction<{ id: string; name: string }>) => {
      const item = state.items.find(i => i.id === action.payload.id);
      if (item) {
        item.qty += 1; // Immer allows direct 'mutation' syntax safely!
      } else {
        state.items.push({ ...action.payload, qty: 1 });
      }
    },
    removeItem: (state, action: PayloadAction<string>) => {
      state.items = state.items.filter(i => i.id !== action.payload);
    }
  }
});

export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;

One of the biggest shifts in modern React is recognizing that Server Data is NOT Client State.

Below is the architectural layout of our complete Mini E-Commerce application. Notice how App orchestrates the state, allowing Header and Cart to read from the single source of truth while ProductList dispatches additions.