useContext and the Context API

useContext and the Context API

What Problem Does Context Solve?

Consider a logged-in user's name that is needed by the navbar, the dashboard header, and a settings page buried four levels deep. With props alone, you pass user through every component in between — even ones that do not use it.

This is called prop drilling, and it makes components hard to move and hard to read.

The Context API lets you provide a value at the top of the tree and read it anywhere below, with no props in between.

Syntax

Three steps: create, provide, consume.

Example

Step 1 - Create the context

src/context/UserContext.jsx

jsx

import { createContext } from "react";
export const UserContext = createContext(null);

Step 2 - Provide the value

src/App.jsx

jsx

import { useState } from "react";
import { UserContext } from "./context/UserContext";
import Dashboard from "./components/Dashboard";
function App() {
const [user, setUser] = useState({
name: "Priya Sharma",
enrolledCourses: 3
});
return (
<UserContext.Provider value={{ user, setUser }}>
<Dashboard />
</UserContext.Provider>
);
}
export default App;

Step 3 - Consume it anywhere below

src/components/ProfileBadge.jsx

jsx

import { useContext } from "react";
import { UserContext } from "../context/UserContext";
function ProfileBadge() {
const { user } = useContext(UserContext);
return (
<div className="profile-badge">
<span>{user.name}</span>
<span>{user.enrolledCourses} courses</span>
</div>
);
}
export default ProfileBadge;

How It Works

• createContext(null) creates the context object. The argument is the default used when no Provider is found above.
• <UserContext.Provider value={...}> makes the value available to every component inside it, at any depth.
• useContext(UserContext) reads the current value. No props required.
• ProfileBadge can sit ten levels deep inside Dashboard and still work.

Context API vs Props

When Not to Use Context

Context is not a replacement for props. Passing data down one or two levels is fine and clearer. Reach for context when the same data is needed by many components at different depths.

Also note: every component reading a context re-renders when that context value changes. For frequently changing data across a large app, a dedicated state management library such as Redux Toolkit or Zustand is a better fit. Those are beyond this tutorial, but context is the right first step and covers most beginner projects.