Q104- When should you use Context API over Redux?

Both Context API and Redux are used for state management in React, but they serve different purposes depending on scale and complexity.

---

1️⃣ Context API

• Built into React → no extra library required
• Ideal for simple or medium state sharing across components
• Best for global but low-frequency updates such as:
  • Theme (dark/light mode)
  • User authentication info
  • Language or locale

Example:

const ThemeContext = React.createContext();

function App() {
  const [theme, setTheme] = React.useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Content />
    </ThemeContext.Provider>
  );
}

function Header() {
  const { theme } = React.useContext(ThemeContext);
  return <h1>Current Theme: {theme}</h1>;
}

---

2️⃣ Redux

• External library → more setup
• Ideal for large-scale apps with complex state
• Handles:
  • High-frequency updates
  • Complex interactions between different parts of the app
  • Async actions (API calls) via middleware
  • Predictable state with devtools and time-travel debugging

Example Use Case:

• E-commerce cart with multiple components reading/updating items simultaneously

---

3️⃣ Key Differences

Feature	Context API	Redux
Setup	Simple, built-in	Requires library setup
Use Case	Small to medium apps	Large apps with complex state
State Updates Frequency	Low	High
Debugging	Limited	Excellent (Redux DevTools)
Middleware / Async	Needs custom solution	Built-in via thunk/saga
Boilerplate	Minimal	More boilerplate

---

⚡ In short:

Use Context API for lightweight, global state like themes or user info, and choose Redux for large, complex apps where you need predictable state, devtools, middleware, and structured updates.