⚡ What is React Context API?

The Context API in React provides a way to share state or data across your component tree without passing props manually at every level (a.k.a “prop drilling”).

🏗️ Think of it as: A global store for React components — but lightweight and built-in.

🚀 When to Use Context API?

✅ Great for sharing:

• ✅ User authentication (e.g., user object)
• ✅ Theme toggles (e.g., dark/light mode)
• ✅ Localization (e.g., language settings)
• ✅ App-wide settings (e.g., feature flags)

❌ Not for:

• High-frequency updates (like real-time data) — it can cause performance issues due to unnecessary re-renders.
• In such cases, Redux or state management libraries might be better.

🛠️ Context API — How It Works

1. Create Context — using React.createContext()
2. Provide Context — using the <Context.Provider>
3. Consume Context — using useContext() hook

✅ Example: Theme Toggle Using Context API

1️⃣ Create the Context:

// ThemeContext.js
import { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
};

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

2️⃣ Use the Provider in App:

// App.js
import { ThemeProvider } from './ThemeContext';
import Dashboard from './Dashboard';

const App = () => (
<ThemeProvider>
<Dashboard />
</ThemeProvider>
);

// Dashboard.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Dashboard = () => {
const { theme, toggleTheme } = useContext(ThemeContext);

return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff', padding: '20px' }}>
<h1>{theme === 'light' ? 'Light Mode' : 'Dark Mode'}</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
};

⚡ How It Works:

• ThemeProvider wraps the app and makes the theme data available to any child component.
• useContext(ThemeContext) allows components like Dashboard to access and manipulate the shared theme state.
• Toggling the theme updates the context and causes subscribed components to re-render.

🔥 Using Context API + useReducer for Complex State:

For more complex state logic, combine Context with useReducer — almost like a lightweight Redux.

💡 Best Practices for Context API:

1. Split Contexts: Use multiple smaller contexts instead of one large global context. (e.g., separate AuthContext, ThemeContext).
2. Memoization: Wrap context values in useMemo to avoid unnecessary re-renders.
3. Performance: Avoid using Context for frequently updating values (like real-time data) — it can lead to performance bottlenecks.