Interview Answer

useContext() is a React Hook that allows components to access shared data from a Context without passing props through multiple component levels. It is commonly used for authentication, theme settings, language preferences, user information, and other global data. It helps avoid prop drilling and makes state sharing across components simpler and cleaner.

What is useContext()?

useContext() is a React Hook used to share data between components without passing props manually through every level.

This solves the Prop Drilling problem.

---

What is Prop Drilling?

Suppose you have:

App
 ↓
Dashboard
 ↓
Sidebar
 ↓
Profile

And the user data is needed in Profile.

Without Context:

<App user={user}>
  <Dashboard user={user}>
    <Sidebar user={user}>
      <Profile user={user} />
    </Sidebar>
  </Dashboard>
</App>

The user prop is passed through every component even though only Profile needs it.

This is called Prop Drilling.

---

Solution: useContext()

App
 ↓
Context
 ↓
Any Component

Any component can access the data directly.

---

Step 1: Create Context

import { createContext } from "react";

export const UserContext = createContext();

---

Step 2: Provide Data

import { UserContext } from "./UserContext";

function App() {
  const user = {
    name: "Raj",
    city: "Bangalore"
  };

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

---

Step 3: Consume Data

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

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

  return (
    <>
      <h2>{user.name}</h2>
      <p>{user.city}</p>
    </>
  );
}

Output:

Raj
Bangalore

---

Real Project Example: Logged-in User

AuthContext

import { createContext } from "react";

export const AuthContext = createContext();

App

<AuthContext.Provider
  value={{
    userId: 101,
    name: "Raj"
  }}
>
  <Layout />
</AuthContext.Provider>

Header

const user = useContext(AuthContext);

return <h3>Welcome {user.name}</h3>;

---

Theme Example

Provider

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

Consumer

const theme = useContext(ThemeContext);

return (
  <div className={theme}>
    Dashboard
  </div>
);

---

When to Use useContext?

Use it when data is needed by many components.

Good Use Cases

✅ Logged-in User

✅ Authentication

✅ Theme (Dark/Light)

✅ Language Settings

✅ Company Information

✅ Shopping Cart

✅ Global Configuration

---

When NOT to Use useContext?

Avoid for frequently changing large application state.

Example:

Products
Orders
Jobs
Reports
Notifications

For large applications, prefer:

• Redux Toolkit
• Zustand
• Recoil
• MobX

because excessive Context updates can trigger many component re-renders.

---

useContext + useState Example

import {
  createContext,
  useContext,
  useState
} from "react";

const CounterContext = createContext();

function App() {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider
      value={{ count, setCount }}
    >
      <Counter />
    </CounterContext.Provider>
  );
}

function Counter() {
  const { count, setCount } =
    useContext(CounterContext);

  return (
    <>
      <h2>{count}</h2>

      <button
        onClick={() => setCount(count + 1)}
      >
        Increment
      </button>
    </>
  );
}

---

Easy Way to Remember

Without Context

Parent
 ↓
Child
 ↓
GrandChild
 ↓
GreatGrandChild

Pass props at every level.

With Context

Context
 ↓
Any Component

Direct access.

---

Interview Answer

useContext() is a React Hook that allows components to access shared data from a Context without passing props through multiple component levels. It is commonly used for authentication, theme settings, language preferences, user information, and other global data. It helps avoid prop drilling and makes state sharing across components simpler and cleaner.