Stop Passing Props Like a Maniac — Why React Context Exists

Introduction

We've all been there. You need to pass a little piece of data from one component to another, and before you know it you're shoving props down five different layers like you're playing hot potato with JavaScript objects. It's not fun, it's not elegant, and it definitely doesn't scale.

That's where React Context comes in to save the day. Let’s break down why prop drilling feels so awful and how Context makes your life easier.

The Prop Drilling Nightmare

Imagine you’ve got a UserProfile component at the top of your tree, and somewhere deep down inside a Navbar -> Menu -> Settings -> Avatar component needs the user’s name.

Without Context, you’re doing this:

1function Navbar({ user }) {
2  return <Menu user={user} />;
3}
4
5function Menu({ user }) {
6  return <Settings user={user} />;
7}
8
9function Settings({ user }) {
10  return <Avatar user={user} />;
11}
12
13function Avatar({ user }) {
14  return <p>{user.name}</p>;
15}

Congratulations, you’re now a professional props delivery service. But did you really want all those components in the middle to know about user? Nope. They don’t care, they’re just the unfortunate mail carriers.

Why Context Exists

React Context was created to stop this madness. It lets you share data without forcing every single component in the chain to touch it. You set up a Provider at a higher level, and any child can just grab the data without begging for props.

Here’s the same example with Context:

1import { createContext, useContext } from "react";
2
3const UserContext = createContext();
4
5function App() {
6  const user = { name: "Pedro" };
7  return (
8    <UserContext.Provider value={user}>
9      <Navbar />
10    </UserContext.Provider>
11  );
12}
13
14function Avatar() {
15  const user = useContext(UserContext);
16  return <p>{user.name}</p>;
17}

No more passing props through components that don’t care. Clean, simple, and way less stressful.

But Wait — Don’t Abuse It

Context is awesome, but if you start throwing everything into Context, you’ll end up with a giant tangled mess. Think of it like salt: use it when it makes the dish better, but don’t pour the whole shaker into the pot.

Good uses for Context

• Auth state (user info, tokens)
• Theme (light/dark mode)
• App-wide settings (language, config)

Bad uses for Context

• Every tiny piece of local state
• Temporary UI states (like modal open/close)
• Data that changes super often (it can re-render everything)

Alternatives You Should Know

Context is great for sharing global-ish state, but if you need caching, background updates, or data syncing, libraries like React Query or Zustand might be a better fit. Context is not a full state management solution — it's more like duct tape for props.

Conclusion

If you catch yourself passing props down more than two or three levels, stop and ask: should this be in Context? Chances are, the answer is yes. Context cleans up your component tree, keeps your code sane, and saves you from prop-drilling purgatory.

So go ahead, break free from the props delivery service. Your future self will thank you.