Creating and Consuming React Context with useContext0%
Building Custom Context Providers with State

Creating and Consuming React Context with useContext

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Creating and Consuming React Context with useContext

1. The 3 Steps of Context

Working with React Context involves three distinct, sequential steps:

  1. 1
    Create the Context: Call createContext() to define the data conduit and optional default fallback.
  2. 2
    Provide the Context: Wrap the component subtree with <Context.Provider value={...}>.
  3. 3
    Consume the Context: Read the provided value inside any descendant component using useContext(Context).
Output
[1. createContext()] ──> [2. <Context.Provider value={val}>] ──> [3. useContext(Context)]

2. Step 1: Creating the Context

In a dedicated module file (e.g., src/context/ThemeContext.js), create and export your context:

JavaScript
// src/context/ThemeContext.js
import { createContext } from 'react';
 
// Create context with an optional default value
export const ThemeContext = createContext('light');

3. Step 2: Providing the Context

In a parent or top-level component, import the context and wrap your tree with ThemeContext.Provider:

JSX
// src/App.jsx
import React, { useState } from 'react';
import { ThemeContext } from './context/ThemeContext';
import Header from './components/Header';
import CourseDashboard from './components/CourseDashboard';
 
export default function App() {
const [theme, setTheme] = useState('dark');
 
const toggleTheme = () => {
setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
};
 
return (
// Pass both current theme and updater function in context value
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<div className={`app-root theme-${theme}`}>
<Header />
<CourseDashboard />
</div>
</ThemeContext.Provider>
);
}

4. Step 3: Consuming the Context with useContext

In any deeply nested child component, import the context object and invoke the useContext hook:

JSX
// src/components/ThemeToggleButton.jsx
import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';
 
export default function ThemeToggleButton() {
// Directly consume context without prop drilling!
const { theme, toggleTheme } = useContext(ThemeContext);
 
return (
<button
onClick={toggleTheme}
className={`theme-toggle-btn ${theme === 'dark' ? 'btn-dark' : 'btn-light'}`}
>
Current Theme: {theme.toUpperCase()} (Click to toggle)
</button>
);
}

5. How useContext Triggers Re-Renders

Whenever the value passed into <ThemeContext.Provider value={...}> changes:

  • React automatically re-renders every component that calls useContext(ThemeContext).
  • This update bypasses intermediate components, even if those intermediate components are wrapped in React.memo!
Interactive Quiz

Practice Quiz

Question 1
What hook is used to consume a React Context in a functional component?
Question 2
What must be passed as an argument to useContext()?
Question 3
What component must wrap the hierarchy for descendants to receive custom context values?
Question 4
If the context value updates, which components will React re-render?
Question 5
What does createContext(defaultValue) return?
Next Lesson

Building Custom Context Providers with State

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
The Prop Drilling Dilemma and Context SolutionBuilding Custom Context Providers with State

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext