Context API in React

What is Context API in React?

The Context API in React is a way to share data globally across components without passing props manually at every level (avoiding prop drilling).

It is mainly used for:

• Theme management (dark/light mode)

• Authentication/user info

• Language settings

• Global app settings

• Shared state across many components

Problem Context API Solves

Prop Drilling Problem

Without Context API:

<App user={user}>
  <Parent user={user}>
    <Child user={user}>
      <Profile user={user} />
    </Child>
  </Parent>
</App>

Here, user is passed through many intermediate components even if they don't use it.

This is called prop drilling.

Context API solves this problem.

How Context API Works

Context API mainly involves 3 things:

1. createContext()

2. Provider

3. useContext()

Basic Flow

Create Context
      ↓
Wrap Components with Provider
      ↓
Consume Data using useContext()

Step-by-Step Example

Step 1: Create Context

import { createContext } from "react";

const UserContext = createContext();

This creates a global context object.

Step 2: Provide Data

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

function App() {
  const user = "Sampath";

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

Provider shares the data with all child components.

Step 3: Consume Data

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

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

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

useContext() accesses the shared data directly.

Visual Understanding

App
 └── UserContext.Provider
      └── Dashboard
           └── Profile
                └── useContext(UserContext)

Any child inside the Provider can access the context value.

Real-Time Example (Theme)

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Navbar />
    </ThemeContext.Provider>
  );
}

function Navbar() {
  const theme = useContext(ThemeContext);

  return <div>Current Theme: {theme}</div>;
}

Important Interview Points

1. Context API avoids prop drilling

Main purpose:

• Avoid passing props deeply

• Share global data easily

2. Context API is NOT a full replacement for Redux

Interviewers often ask this.

Context API

Good for:

• Small to medium global state

• Theme

• User authentication

• Language preferences

Redux

Better for:

• Complex state management

• Large applications

• Advanced debugging

• Middleware support

Context API vs Redux

Feature	Context API	Redux
Built into React	Yes	No
Easy to learn	Yes	Moderate
Best for	Simple global state	Complex state
Middleware	No	Yes
Performance optimization	Limited	Better
Boilerplate	Less	More

Common Interview Question

Q: Does Context API improve performance?

Not always.

When context value changes:

• All consuming components re-render.

This can cause performance issues if:

• Large data is stored

• Frequent updates happen

Optimization Tip

Use:

• useMemo

• React.memo

• Multiple smaller contexts

Example:

const value = useMemo(() => ({ user }), [user]);

<UserContext.Provider value={value}>

Multiple Contexts Example

<AuthContext.Provider value={auth}>
  <ThemeContext.Provider value={theme}>
    <App />
  </ThemeContext.Provider>
</AuthContext.Provider>

When to Use Context API

Use it when:

• Many components need same data

• Props become difficult to manage

• Global configuration is needed

Examples:

• Logged-in user

• Theme

• Notifications

• Locale/language

When NOT to Use Context API

Avoid when:

• State changes very frequently

• Application becomes very large

• Complex async flows exist

In such cases:

• Redux

• Zustand

• Recoil

• MobX

may be better choices.

Common Mistakes

1. Wrapping entire app unnecessarily

Bad:

<AppContext.Provider value={hugeObject}>

This may trigger many re-renders.

2. Storing frequently changing values

Like:

• Mouse position

• Animation state

• Typing input

Interview-Friendly Definition

"Context API is a built-in React feature used for sharing global data between components without prop drilling. It works using createContext, Provider, and useContext."

Frequently Asked Interview Questions

Q1: What problem does Context API solve?

It solves prop drilling.

Q2: Difference between Context API and props?

• Props pass data parent → child

• Context shares data globally

Q3: Can Context API replace Redux?

For small apps, sometimes yes.
For large complex apps, Redux is usually better.

Q4: What causes re-renders in Context API?

When Provider's value changes, consuming components re-render.

Q5: Can we use multiple contexts?

Yes.

Simple Interview Answer (Short Version)

"Context API is used to share data globally in React without passing props manually through every component level. It uses createContext, Provider, and useContext hooks. It is commonly used for themes, authentication, and global settings."