🪝 Introduction to useContext
The useContext Hook is a React Hook that allows components to access shared data from a Context without passing props through every intermediate component. This technique helps eliminate prop drilling and makes data sharing across a component tree simpler and more maintainable.
Important
🎯 Why Use useContext?
In many React applications, multiple components need access to the same data, such as the current theme, authenticated user, or language preference. Passing this data through every level of the component tree can become repetitive and difficult to maintain. useContext provides a clean solution by allowing components to access shared values directly.
- Eliminates unnecessary prop drilling.
- Shares data across multiple components.
- Improves code readability.
- Makes global application data easier to manage.
⚙️ Syntax
Basic Syntax
const value = useContext(MyContext);| Part | Description |
|---|---|
| MyContext | The Context object created using createContext(). |
| value | The current value provided by the nearest Context Provider. |
🔄 How useContext Works
💻 Step 1: Create a Context
Creating a Context
import { createContext } from "react";
export const ThemeContext = createContext("light");The createContext() function creates a Context object that can be shared throughout the application.
💻 Step 2: Provide a Value
Using a Provider
import { ThemeContext } from "./ThemeContext";
function App() {
return (
<ThemeContext.Provider value="dark">
<Header />
</ThemeContext.Provider>
);
}The Provider makes the value available to every descendant component inside it.
💻 Step 3: Consume the Context
Using useContext
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
function Header() {
const theme = useContext(ThemeContext);
return <h1>{theme}</h1>;
}The Header component directly reads the current theme without receiving it through props.
📊 Before and After useContext
Data is passed through multiple intermediate components using props, even when those components do not need the data themselves.
Components access shared data directly from the Context Provider, reducing unnecessary prop passing.
📋 Context Flow
🌍 Common Use Cases
| Context | Typical Data |
|---|---|
| Theme | Light or dark mode. |
| Authentication | Current user and login status. |
| Language | Selected application language. |
| User Preferences | Settings and personalization. |
| Application Configuration | Shared configuration values. |
🧩 Combining useContext with useReducer
Many React applications combine useContext with useReducer to create a centralized state management solution. The reducer manages state updates, while the Context makes that state available throughout the application.
Context with useReducer
const StoreContext = createContext();
function App() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<StoreContext.Provider value={{ state, dispatch }}>
<Dashboard />
</StoreContext.Provider>
);
}⚠️ Common Mistakes
- Using useContext outside its matching Provider.
- Placing frequently changing values into a single large Context.
- Using Context for local component state that does not need to be shared.
- Creating unnecessary Context objects for simple prop passing.
Warning
✅ Best Practices
- Use Context only for data shared across multiple components.
- Create separate Contexts for unrelated data.
- Keep Context values focused and well organized.
- Combine useContext with custom Hooks for improved code reuse.
- Use useState or useReducer to manage the data provided by Context.
📚 Official Resource
Learn more about useContext in the official React documentation at React useContext Documentation.