Context API

First, I learned on my own using AI—especially ChatGPT—which helped me understand things simply. I’m now going to share that learning, along with the prerequisites you need before diving into the Context API or useContext in React.js, such as basic JavaScript, ES6 concepts, React fundamentals, components, props, and state.

If you don’t feel the pain, Context feels unnecessary.

So let’s simulate the pain first, like a game.

Level 1: “The Message Relay Game”

Your Task

You are building a React app.

App has user = "Ayushman"
Deep inside: Profile needs it

Component tree:

App
└── Dashboard
└── Sidebar
└── Profile 👈 needs user

❌ You choose: “I’ll pass props”

Let’s play it out.

function App() {
  const user = "Ayushman";
  return <Dashboard user={user} />;
}
function Dashboard({ user }) {
  return <Sidebar user={user} />;
}
function Sidebar({ user }) {
  return <Profile user={user} />;
}
function Profile({ user }) {
  return <h1>Hello {user}</h1>;
}

😐 Now pause.

Ask yourself:

👉 Does Dashboard care about user?
👉 Does Sidebar care?

NO.

They are just delivery boys

Core Pain

This is not just annoying. It creates:

❌ Tight coupling
❌ Unnecessary re-renders
❌ Hard-to-maintain code

This is the REAL problem Context solves.

Level 2: Add One More Requirement

Now product manager says:

“Also pass theme and language”

Now your code becomes:

<Dashboard user={user} theme={theme} language={language} />

Then:

<Sidebar user={user} theme={theme} language={language} />

Then:

<Profile user={user} theme={theme} language={language} />

What just happened?

You created a prop explosion

And worst part:

👉 Every intermediate component must now know about everything

Breaking Point (Where Context is Born)

At this point, your brain should scream:

“WHY am I passing things that nobody uses???”

That scream = Context API moment_

Level 3: The Escape (Context)

Now instead of passing manually…

You create a global tunnel

Same App, New Thinking

const UserContext = React.createContext();
function App() {
  return (
    <UserContext.Provider value="Ayushman">
      <Dashboard />
    </UserContext.Provider>
  );
}

Now suddenly:

function Profile() {
  const user = useContext(UserContext);
  return <h1>Hello {user}</h1>;
}

What changed?
Dashboard ❌ not involved
Sidebar ❌ not involved
Profile directly gets data ✅

CORE UNDERSTANDING (Not textbook)

Context is NOT:

“A way to share data”

That’s too shallow.

Real Definition (burn this in memory)

Context is a way to REMOVE unnecessary intermediaries

Final Mental Model (Never Forget This)

Whenever you see this pattern:

A → B → C → D → E (only E needs data)

Your brain should say:

“This is wrong. Use Context.”

---

Ultra-Quick Self Test

Answer instantly:

Situation:
2 components need data → ❓
👉 Props
10 deeply nested components → ❓
👉 Context
Frequently updating state everywhere → ❓
👉 Maybe NOT Context (performance issue)