How to Use Multiple Contexts in React: Simple Guide

In React, you can use multiple contexts by nesting their Context.Provider components and consuming them with multiple useContext hooks inside your component. This allows you to access different pieces of shared data independently and cleanly.

Syntax

To use multiple contexts, wrap your component tree with multiple Context.Provider components. Inside your components, call useContext for each context you want to access.

This keeps your data organized and lets components subscribe only to the contexts they need.

jsx

const ThemeContext = React.createContext('light');
const UserContext = React.createContext({ name: 'Guest' });

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: 'Alice' }}>
        <Dashboard />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function Dashboard() {
  const theme = React.useContext(ThemeContext);
  const user = React.useContext(UserContext);
  return <div>Theme: {theme}, User: {user.name}</div>;
}

Output

Theme: dark, User: Alice

Example

This example shows how to create two contexts, provide values for them, and consume both inside a child component using useContext. The output displays the theme and user name from separate contexts.

jsx

import React, { createContext, useContext } from 'react';

const LanguageContext = createContext('English');
const AuthContext = createContext({ loggedIn: false });

function App() {
  return (
    <LanguageContext.Provider value="Spanish">
      <AuthContext.Provider value={{ loggedIn: true }}>
        <Profile />
      </AuthContext.Provider>
    </LanguageContext.Provider>
  );
}

function Profile() {
  const language = useContext(LanguageContext);
  const auth = useContext(AuthContext);

  return (
    <div>
      <p>Language: {language}</p>
      <p>User is {auth.loggedIn ? 'logged in' : 'logged out'}</p>
    </div>
  );
}

export default App;

Output

Language: Spanish
User is logged in

Common Pitfalls

• Not nesting providers correctly: If you forget to wrap components with all needed Providers, useContext will return default values.
• Using context outside provider: Accessing context without a provider leads to unexpected default values.
• Overusing context: Avoid putting too much unrelated data in one context; use multiple contexts to keep concerns separate.

jsx

/* Wrong: Missing one provider */
const ThemeContext = React.createContext('light');
const UserContext = React.createContext({ name: 'Guest' });

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Dashboard /> {/* UserContext.Provider missing here */}
    </ThemeContext.Provider>
  );
}

function Dashboard() {
  const theme = React.useContext(ThemeContext);
  const user = React.useContext(UserContext); // user will be default { name: 'Guest' }
  return <div>Theme: {theme}, User: {user.name}</div>;
}

/* Correct: Nest both providers */
function AppCorrect() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: 'Alice' }}>
        <Dashboard />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

Quick Reference

Tips for using multiple contexts:

• Wrap components with all needed Providers in a clear nested order.
• Use separate contexts for unrelated data to keep code clean.
• Call useContext once per context inside your component.
• Remember context updates cause re-renders only for components using that context.

Key Takeaways

Wrap your components with multiple Context.Provider components to supply different data.

Use useContext hook separately for each context inside your components.

Always ensure your components are inside all required providers to avoid default values.

Keep contexts focused on specific data to maintain clean and maintainable code.

Nesting providers and consuming multiple contexts is the standard way to share multiple data sources.