Context API

Introduction

React data normally flows in one direction: from a parent component down to its children through props. That works well for most data, but some information — like the current theme, the signed-in user, or the selected language — is needed by components scattered all across the tree, often many layers deep. Passing that value down through every intermediate component just so it can reach the one that actually needs it quickly becomes tedious and error-prone.

The Context API is React's built-in solution for sharing this kind of data without manually threading it through every layer. This lesson introduces the problem conceptually, and shows how to create a context, provide a value, and read it from a deeply nested component — a full lesson on prop drilling itself comes later in this course.

The Prop Drilling Problem

Imagine a "logged-in user" value that only the innermost component in a deeply nested tree actually needs. Without Context, that value has to be passed as a prop through every component in between, even the ones that never use it themselves — they simply relay it further down.

function App() {
  const user = { name: "Amol" };
  return <Page user={user} />;
}

function Page({ user }) {
  return <Layout user={user} />;
}

function Layout({ user }) {
  return <Sidebar user={user} />;
}

function Sidebar({ user }) {
  return <UserGreeting user={user} />; // finally used here
}

function UserGreeting({ user }) {
  return <p>Hello, {user.name}!</p>;
}

Page, Layout, and Sidebar do nothing with user except pass it along — this pattern is called prop drilling. It works, but adding a new layer in the middle, or a second piece of shared data, means editing every component in the chain. This lesson introduces the conceptual problem; a dedicated later lesson explores prop drilling in more depth.

What is the Context API?

Context lets a parent component make a value available to every component below it in the tree, no matter how deeply nested, without passing that value through props at every intermediate level. Any descendant component can "tap into" the context directly and read the value it needs.

Creating a Context

A context is created once, using createContext(), typically in its own file so it can be imported wherever it is needed. You can pass a default value, which is used only if a component reads the context without any matching Provider above it.

import { createContext } from "react";

// The argument is the default value, used if no Provider wraps the reader
const UserContext = createContext(null);

export default UserContext;

Providing a Value

To actually share a value, wrap part of your component tree in that context's Provider and pass the value as a prop. Every component nested inside the Provider — no matter how deep — can now read that value.

import UserContext from "./UserContext";

function App() {
  const user = { name: "Amol" };

  return (
    <UserContext.Provider value={user}>
      <Page />
    </UserContext.Provider>
  );
}

Notice Page no longer needs to accept or forward a user prop at all — the Provider makes user available to anything rendered inside it.

Reading Context in a Deeply Nested Component

Any component inside the Provider can read the shared value using useContext (covered in full detail in the next lesson) — completely skipping Page, Layout, and Sidebar, which no longer mention user at all.

import { useContext } from "react";
import UserContext from "./UserContext";

function Page() {
  return <Layout />; // no user prop needed anymore
}

function Layout() {
  return <Sidebar />; // no user prop needed anymore
}

function Sidebar() {
  return <UserGreeting />; // no user prop needed anymore
}

function UserGreeting() {
  const user = useContext(UserContext); // reads the value directly
  return <p>Hello, {user.name}!</p>;
}

Hello, Amol!

When to Use Context

Context is a powerful tool, but it is not meant to replace props everywhere. It works best for data that is genuinely global to a large part of your application, rather than data that only a couple of nearby components need.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

The Context API gives React a built-in way to share data across a component tree without manually passing it down through every intermediate component. By wrapping part of the tree in a Provider, any nested component can read the shared value directly, keeping components in between clean and unaware of data they never use.

In this lesson, you saw the prop drilling problem Context solves, created a context, provided a value, and read it from a deeply nested component, along with guidance on when Context is the right tool. Next, you will look at useContext in more detail — the Hook you already used here to read a context's value.