Stop Prop Drilling: Learn React useContext with Easy Examples

React useContext Hook Explained with Simple Examples

If you've started learning React Hooks, you've probably heard about useContext. At first, it may seem confusing, but once you understand the problem it solves, it becomes much easier.

What is useContext?

useContext is a React Hook that allows multiple components to access the same data without passing it through every intermediate component as props.

In simple words:

useContext helps you share data between components directly.

---

Why do we need useContext?

Imagine the following component structure:

App
 ├── Parent
      ├── Child
            ├── GrandChild

Suppose the GrandChild component needs the user's name.

Without useContext, you would have to pass the data like this:

<App user="Saravanan">
   ↓
<Parent user={user}>
   ↓
<Child user={user}>
   ↓
<GrandChild user={user}>

Even though only GrandChild needs the data, every component in between has to receive and pass it.

This process is called prop drilling.

useContext solves this problem.

---

Real-Time Example

Think of a company.

• The CEO announces a holiday.
• Every employee should know about it.
• The CEO doesn't tell each employee individually.
• Instead, the announcement is placed on the company notice board where everyone can read it.

In React:

• Context = Notice board
• Provider = Person who posts the announcement
• Consumer (useContext) = Employees reading the announcement

No need to pass the information through every manager.

---

Another Simple Example

Imagine your house has Wi-Fi.

Every family member connects to the same Wi-Fi.

The password is not passed from one family member to another every time someone wants internet access.

Instead, everyone accesses the same network directly.

useContext works similarly.

---

Syntax

Step 1: Create a Context

import { createContext } from "react";

const UserContext = createContext();

---

Step 2: Provide the Data

<UserContext.Provider value="Saravanan">
    <Child />
</UserContext.Provider>

The value prop contains the data that will be shared.

---

Step 3: Consume the Data

import { useContext } from "react";

const user = useContext(UserContext);

return <h1>{user}</h1>;

Now the component can access the shared data directly.

---

Complete Example

App.jsx

import { createContext } from "react";
import Child from "./Child";

export const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value="Saravanan">
      <Child />
    </UserContext.Provider>
  );
}

export default App;

---

Child.jsx

import GrandChild from "./GrandChild";

function Child() {
  return <GrandChild />;
}

export default Child;

---

GrandChild.jsx

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

function GrandChild() {
  const user = useContext(UserContext);

  return <h2>Hello, {user}</h2>;
}

export default GrandChild;

Output

Hello, Saravanan

Notice that Child never receives any props.

GrandChild directly accesses the shared value.

---

How useContext Works

createContext()
        │
        ▼
Context Object
        │
        ▼
Provider shares data
        │
        ▼
Child Components
        │
        ▼
useContext() reads the data

---