Creating and Providing Context

🌐 What Is React Context?

React Context provides a way to pass data through the component tree without having to pass props manually at every level. It’s perfect for things like themes, authentication state, or language preferences that many components need access to. 💡

🎯 When Should You Use Context?

Use Context when:

• 🔑 You have global or app-wide state
• ⛓️ Props drilling becomes too deep and messy
• 🧠 Multiple components need access to the same value

🛠️ Step 1: Create the Context

Use React.createContext() to define a context:

import { createContext } from 'react';

export const ThemeContext = createContext();

🔗 Step 2: Create a Context Provider

The provider is the component that wraps your app and supplies the context value:

import { useState } from 'react';
import { ThemeContext } from './ThemeContext';

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

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

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

🧩 Step 3: Wrap Your App with the Provider

Use the provider at the top level of your app (typically in App.jsx or layout.js in Next.js):

import ThemeProvider from './ThemeProvider';

function App() {
  return (
    <ThemeProvider>
      <MainComponent />
    </ThemeProvider>
  );
}

📥 Step 4: Access Context Using useContext

Now any component can consume the context using useContext():

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

function Button() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

🔁 Example: Theme Switcher

Here's a complete example combining everything:

// ThemeContext.js
export const ThemeContext = createContext();

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

export default 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>
  );
}

// App.js
import ThemeProvider from './ThemeProvider';
import Button from './Button';

export default function App() {
  return (
    <ThemeProvider>
      <Button />
    </ThemeProvider>
  );
}

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

function Button() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme}>
      Current Theme: {theme}
    </button>
  );
}

🧠 Tips and Best Practices

• ✅ Keep contexts focused — one purpose per context (e.g., AuthContext, ThemeContext)
• ✅ Avoid using context for frequently changing values (use Redux/Zustand/Recoil instead)
• ✅ Combine with custom hooks for better reusability

🚀 Final Thoughts

React Context is a simple yet powerful way to share data globally across your app. By creating a provider and accessing it with useContext, you avoid prop drilling and keep your code clean and scalable. Whether it's theme toggles, auth state, or app-wide settings — mastering context makes your React skills production-ready! 💪✨