React Context API Interview Guide

What is Context API?

Context API is a built-in React feature used to share data across multiple components without passing props manually at every level (prop drilling).

Common use cases:

• Theme (Dark/Light mode)
• Authentication
• User preferences
• Language settings
• Global state

const UserContext = React.createContext();

What Problem Does Context API Solve?

It solves prop drilling.

Without Context:

App -> Parent -> Child -> GrandChild

Every component passes props even if it doesn’t use them.

With Context:

GrandChild
   ->
useContext(UserContext)

Direct access to shared data.

Creating a Context

import { createContext } from "react";

const UserContext = createContext();

Provider and Consumer

Provider

Supplies data to components.

<UserContext.Provider value={user}>
  <App />
</UserContext.Provider>

Consumer

Reads context values.

<UserContext.Consumer>
  {(user) => <h1>{user.name}</h1>}
</UserContext.Consumer>

Today, useContext() is generally preferred.

useContext Hook

The useContext hook consumes context values.

const user = useContext(UserContext);

Benefits:

• Cleaner code
• No nested Consumer components

Context API Flow

flowchart TD
    A[Create Context] --> B[Provider supplies value]
    B --> C["Child calls useContext()"]
    C --> D[Receives latest value]

Complete Example

const ThemeContext = createContext();

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

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

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

When Should You Use Context API?

Use it for:

• Authentication
• Theme
• Locale
• User profile
• Shared settings

Avoid using it as the primary solution for frequently changing, complex application state.

Limitations

• Re-render issues
• Not ideal for complex state management
• Harder debugging than Redux
• No middleware support

Why Does Context Cause Re-renders?

When the Provider value changes:

<UserContext.Provider value={user}>

all consuming components re-render, even if they only use a small part of the object.

Example:

{
  name: "John",
  age: 25
}

Changing age still causes every consumer to re-render.

Performance Optimization

Using useMemo

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

<UserContext.Provider value={value}>

This prevents creating a new object on every render.

Can React.memo Prevent Context Re-renders?

No.

const Child = React.memo(() => {
   const user = useContext(UserContext);
});

Context updates bypass React.memo because React directly notifies context subscribers.

Context API vs Redux

Context API	Redux
Built into React	External library
Simple state sharing	Complex state management
No middleware	Middleware support
Re-renders consumers	Better optimization
Small apps	Large apps

Context API vs Prop Drilling

Prop Drilling	Context API
Pass props through many levels	Direct access
Hard to maintain	Easier maintenance
More boilerplate	Less code
Higher component coupling	Cleaner architecture

Multiple Contexts

<AuthContext.Provider>
   <ThemeContext.Provider>
      <App />
   </ThemeContext.Provider>
</AuthContext.Provider>

Consume:

const auth = useContext(AuthContext);
const theme = useContext(ThemeContext);

Using useContext Outside a Provider

If useContext is called outside a matching Provider, it returns the default value.

const UserContext = createContext("Guest");

Output:

Guest

Authentication Example

const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = () => {};
  const logout = () => {};

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Avoiding Unnecessary Re-renders

• Split contexts (UserContext, ThemeContext, LanguageContext)
• Use useMemo
• Use context selectors (useContextSelector) where appropriate
• Consider Redux, Zustand, or Recoil for complex state

Context Composition

Instead of deeply nesting providers:

<AuthProvider>
  <ThemeProvider>
    <LanguageProvider>
      <App />
    </LanguageProvider>
  </ThemeProvider>
</AuthProvider>

Create:

<AppProviders>
   <App />
</AppProviders>

This improves readability.

Why Context API Is Not Full State Management

Context only shares state.

It does not provide:

• Middleware
• DevTools
• Time-travel debugging
• State normalization
• Advanced caching
• Optimized selective subscriptions

Large applications commonly use Redux Toolkit, Zustand, MobX, or Recoil alongside or instead of Context.

Key Interview One-Liners

• Context API solves prop drilling.
• Provider supplies data; useContext consumes it.
• Provider value changes re-render all consumers.
• React.memo does not prevent context-driven re-renders.
• Use useMemo and split contexts for better performance.
• Context is a state-sharing mechanism, not a complete state management solution.

Summary

• Context API is ideal for sharing global UI state such as authentication, themes, and localization.
• It simplifies component communication by eliminating prop drilling.
• Performance should be considered because Provider updates re-render consumers.
• Optimize with useMemo, smaller contexts, and appropriate state management libraries for large applications.