React Introduction to Context API

In the last lesson, React Handling 404 Pages, you finished the React Router module. Now you’ll meet the Context API, React’s built-in way to share data with many components at once without threading props through every level.

🤔 Why do we need the Context API?

Here’s the pain. Some data is needed all over your app, and passing it as props through every layer is tiring and messy.

• Things like the logged-in user, the theme, or the language are needed in many far-apart components.
• To get that data from the top down to a deep component, you pass it through every component in between.
• The middle components don’t use the data at all. They just forward it, prop by prop.
• Add another shared value and you repeat all that drilling again.

So the Context API gives you a shared store that any component can read directly, no matter how deep it sits. The middle layers stay clean.

🐍 What is the Context API?

Let’s define it plainly, building on the useContext hook you already met.

• Context is a way to make some data available to a whole part of your component tree at once.
• You create a context, put a value in it at the top, and any component inside can read that value.
• The components in between don’t need to know about it or pass anything along.

Think of it like the wifi in a building. You don’t run a cable to every single room. You set up one router, and every device in range can connect directly. Context is that shared signal for your data.

🔁 Prop drilling vs context

The clearest way to see the value is to compare the two. Here’s the same data, the user’s name, reaching a deep component both ways.

// ❌ prop drilling: name passes through every level, even ones that don't use it
function App() {
  const name = "Alex";
  return <Page name={name} />;
}
function Page({ name }) {
  return <Sidebar name={name} />; // Page doesn't use name, just forwards it
}
function Sidebar({ name }) {
  return <Profile name={name} />; // Sidebar doesn't use it either
}
function Profile({ name }) {
  return <p>Hello, {name}</p>; // finally used here
}

Look at the waste in the drilling version.

• name starts in App and needs to reach Profile, three levels down.
• Page and Sidebar don’t use name at all, but both must accept and pass it.
• Every new shared value means more props added to those middle components.

With context, the middle components don’t touch the data. Profile reads it straight from the shared store.

// ✅ with context: Page and Sidebar don't deal with name at all
function Profile() {
  const name = useContext(UserContext); // read directly, no props passed in
  return <p>Hello, {name}</p>;
}

So context removes the drilling. The value goes in at the top, and only the components that actually need it read it.

🧩 The pieces of context

Context always has the same three parts. You’ll build each one in the next lessons, but here’s the map.

• Create the context with createContext. This makes the shared store.
• Wrap part of the tree in the context’s Provider and give it a value. Everything inside can read it.
• Read the value with useContext in any component that needs it.

So the flow is: create, provide at the top, read at the bottom. That’s the whole Context API in three steps.

🌍 When to use context

Context is great for data many components need, but it’s not for everything. Use it for the genuinely shared, app-wide things.

• The current theme, like light or dark mode.
• The logged-in user and login status.
• The app’s language or locale.
• App-wide settings that lots of screens read.

So if a value is needed across many distant parts of the app and would otherwise be drilled through layers, that’s the sign context fits.

✅ Best Practices

A few ideas to carry into the next lessons.

• Reach for context when a value is needed by many components spread across the tree.
• Keep using props for data that only one or two close components need.
• Think of context as three steps: create, provide, read.
• Group related shared data, like all theme settings, into one context.

🧩 What You’ve Learned

• ✅ The Context API shares data with many components at once, without passing props through every layer
• ✅ It solves prop drilling, where middle components forward data they don’t use
• ✅ Context has three pieces: createContext, a Provider with a value, and useContext to read
• ✅ The flow is: create the context, provide a value at the top, read it where needed
• ✅ It’s a great fit for theme, user, and language; broadly shared, app-wide data
• ✅ It’s built into React, and it’s not a replacement for ordinary props

🚀 What’s Next?

Now you understand what context is and the problem it solves. Time to build one. Next you’ll create your first context with createContext and set up the shared store.

React Creating Context