Consuming Context With Hooks

🎯 What Does "Consuming Context" Mean?

Once you’ve created and provided a React Context, the next step is to use it in your components — a process called "consuming context." 🧠 This is where the useContext hook comes into play. It allows any component inside a Context.Provider to instantly access the shared value without prop drilling.

🛠️ The useContext Hook: A Quick Intro

useContext is a built-in React Hook introduced in version 16.3+. It lets you tap into any context you've defined using React.createContext().

// Syntax
const value = useContext(SomeContext);

This hook will return the current value of the context from the nearest matching Provider up the component tree. No need to pass props anymore! 🎉

📦 Step-by-Step Example: Theme Toggle

Let’s walk through a real-world example where we create a ThemeContext and consume it in a button component.

🔗 1. Create the Context

// ThemeContext.js
import { createContext } from 'react';
export const ThemeContext = createContext();

⚙️ 2. Provide Context with a Provider

// ThemeProvider.js
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>
  );
}

🌳 3. Wrap Your App with ThemeProvider

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

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

🧲 4. Consume Context with useContext

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

export default function ThemeToggleButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

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

🔥 Now you’re using context like a pro. The button component doesn’t receive any props — yet it knows the current theme and can update it!

💡 Why useContext Is Better Than Context.Consumer

Before hooks, we used Context.Consumer, which involved render props and nested functions:

// Old way (not preferred)
<ThemeContext.Consumer>
  {value => <p>Theme is {value}</p>}
</ThemeContext.Consumer>

With useContext, your code is cleaner, easier to follow, and supports modern component composition. ✅

🧠 Pro Tips for Using useContext

• ✅ Keep contexts focused (one purpose per context)
• ✅ Use custom hooks to wrap useContext for reuse
• 🚫 Avoid nesting too many providers — it can get messy fast

📌 Bonus: Create a Custom Hook for Cleaner Code

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

export default function useTheme() {
  return useContext(ThemeContext);
}

Now, instead of this:

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

You can just write:

const { theme, toggleTheme } = useTheme();

🚀 Final Thoughts

The useContext hook is your gateway to consuming global data in React without cluttering your codebase with props. Whether it’s a theme toggle, authentication state, or language preference — using useContext makes your components lean, clean, and maintainable. 💪

---