Q282: Can You Use Multiple Contexts in One Component? - React & Modern Frontend (445 Qs)

Yes, it is possible. You can use multiple contexts inside the same component by calling useContext multiple times, once for each context.

It can be achieved with below steps,

Create multiple contexts using createContext().
Wrap your component tree with multiple <Provider>s.
Call useContext() separately for each context in the same component.

Example: Using ThemeContext and UserContext Together

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

// Step 1: Create two contexts
const ThemeContext = createContext();
const UserContext = createContext();

function Dashboard() {
 // Step 2: Use both contexts
 const theme = useContext(ThemeContext);
 const user = useContext(UserContext);

 return (
   <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
     <h1>Welcome, {user.name}</h1>
     <p>Current theme: {theme}</p>
   </div>
 );
}

// Step 3: Provide both contexts
function App() {
 return (
   <ThemeContext.Provider value="dark">
     <UserContext.Provider value={{ name: 'Alex' }}>
       <Dashboard />
     </UserContext.Provider>
   </ThemeContext.Provider>
 );
}

export default App;