State Management (Redux vs. Context API)

The Problem: Prop Drilling

Prop Drilling occurs when you pass data through multiple layers of nested components, even through components that don’t need the data themselves. This makes code verbose, hard to maintain, and tightly coupled.

The Solutions: Global State Management

1. Context API (Built-in)

• Core Idea: Provide data to the entire component tree without passing props manually.
• Mechanism: A Provider makes a value available; components subscribe via useContext.
• Best For: Low-frequency updates (e.g., Theme, Auth status, Localization).
• Cons: Every consumer re-renders when the context value changes, which can be a performance bottleneck for high-frequency data.

2. Redux (Third-party)

• Core Idea: A centralized “Store” with predictable, one-way data flow.
• Pattern:
  1. UI dispatches an Action.
  2. A Reducer (pure function) creates a new state.
  3. The Store updates, and only subscribed components re-render.
• Best For: Complex, high-frequency state (e.g., Undo/Redo, complex forms, real-time dashboards).
• Pros: Optimized performance, massive ecosystem, and powerful DevTools (time-travel debugging).

Core Concepts

1. Context API

The Context API is designed for “static” or slowly changing global data. You wrap your app in a ThemeContext.Provider, and any child can access it. However, if you store a high-frequency counter in Context, the entire component tree beneath the provider might re-render unnecessarily on every tick.

2. Redux Toolkit (RTK)

Modern Redux (RTK) has significantly reduced the boilerplate once associated with Redux. It uses its own logic to determine if a component needs to re-render, making it much more efficient for large apps. It also integrates seamlessly with Thunks for handling asynchronous side effects (like API calls).

Practice Exercise

Build a theme toggle (light/dark) using both Context and Redux to see where each shines.

Answer

1. Implementation with Context API (The Pragmatic Choice)

// theme-context.js
import React, { createContext, useState, useContext } from "react";

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => setTheme((t) => (t === "light" ? "dark" : "light"));

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

export const useTheme = () => useContext(ThemeContext);

2. Implementation with Redux (The Scalable Choice)

// themeSlice.js
import { createSlice } from "@reduxjs/toolkit";

const themeSlice = createSlice({
  name: "theme",
  initialState: { mode: "light" },
  reducers: {
    toggleTheme: (state) => {
      state.mode = state.mode === "light" ? "dark" : "light";
    },
  },
});

export const { toggleTheme } = themeSlice.actions;
export default themeSlice.reducer;

Discussion and Conclusion

• Context API Pros: No external dependencies, minimal setup. Perfect for themes or user settings.
• Redux Pros: Performance optimization out of the box. Components only re-render if the specific path in the state they use (via useSelector) changes.

Conclusion: For managing a global theme, Context API is the winner. It is simpler and avoids the overhead of a state management library. Reserve Redux for complex entities like a shopping cart or a multi-step checkout process.