Master React Context API for state sharing across components. Learn createContext, providers, useContext hooks, and performance optimization patterns.

# React Context API: Eliminate Prop Drilling Effectively

As React applications grow, managing state across distant components becomes challenging. Passing props through multiple intermediary components—known as "prop drilling"—leads to tightly coupled components and unmaintainable code. React's Context API solves this by creating a way to share state globally without threading it through every component layer. This guide teaches you to architect scalable state management using Context effectively.

# Table of Contents

The Prop Drilling Problem
Understanding Context API Fundamentals
Creating and Using Contexts
Provider Patterns
Advanced: Combining Context with useReducer
Multiple Contexts and Organization
Performance Optimization
Common Pitfalls and Solutions
FAQ

# The Prop Drilling Problem

# What Is Prop Drilling?

Prop drilling occurs when you pass state values through multiple component layers that don't need them, just to reach components that do. Consider this component tree:

      
typescript

App (holds user state)
├── Sidebar (doesn't need user)
│   └── UserCard (needs user)
└── Main (doesn't need user)
    └── Content (doesn't need user)
        └── UserProfile (needs user)

Without Context, you must pass user through Sidebar and Main even though they don't use it:

TypeScript Version

      
typescript

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

// App passes user to all children
function App() {
  const [user, setUser] = useState<User | null>(null);
  
  return (
    <div>
      <Sidebar user={user} />
      <Main user={user} />
    </div>
  );
}

// Sidebar doesn't need user but has to accept and forward it
function Sidebar({ user }: { user: User | null }) {
  return <UserCard user={user} />;
}

// Main doesn't need user but has to accept and forward it
function Main({ user }: { user: User | null }) {
  return <Content user={user} />;
}

// Content doesn't need user but has to accept and forward it
function Content({ user }: { user: User | null }) {
  return <UserProfile user={user} />;
}

// Only UserProfile actually uses user
function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Not logged in</p>;
  return <p>Welcome, {user.name}!</p>;
}

JavaScript Version

      
javascript

function App() {
  const [user, setUser] = useState(null);
  
  return (
    <div>
      <Sidebar user={user} />
      <Main user={user} />
    </div>
  );
}

function Sidebar({ user }) {
  return <UserCard user={user} />;
}

function Main({ user }) {
  return <Content user={user} />;
}

function Content({ user }) {
  return <UserProfile user={user} />;
}

function UserProfile({ user }) {
  if (!user) return <p>Not logged in</p>;
  return <p>Welcome, {user.name}!</p>;
}

# Problems with Prop Drilling

Tight coupling: Intermediary components become coupled to props they don't use, reducing reusability. Maintenance overhead: Adding or removing a prop requires updating every component in the chain. Unclear data flow: Reading the code, it's unclear why Sidebar accepts a user prop. Limited flexibility: Components become harder to move or refactor.

This is where Context API becomes essential.

# Understanding Context API Fundamentals

# What Is React Context?

Context is a mechanism for sharing values across the component tree without explicitly passing them as props at each level. It consists of three parts:

Context object - Created with createContext()
Provider component - Supplies the value to consuming components
Consumer hook - useContext() accesses the value

# The Three-Step Pattern

Step 1: Create the context

      
typescript

const UserContext = createContext<User | null>(null);

Step 2: Wrap your app with Provider

      
typescript

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

Step 3: Consume the context

      
typescript

const user = useContext(UserContext);

That's the fundamental pattern. Now let's see it in practice.

# Creating and Using Contexts

# Simple Context Example

Let's refactor the prop drilling example using Context:

TypeScript Version

      
typescript

import { createContext, useContext, useState, ReactNode } from 'react';

// 1. Define the User type
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

// 2. Create the context with default value
const UserContext = createContext<User | null>(null);

// 3. Create a provider wrapper component
interface UserProviderProps {
  children: ReactNode;
}

export function UserProvider({ children }: UserProviderProps) {
  const [user, setUser] = useState<User | null>(null);

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

// 4. Create a custom hook for easy access
export function useUser() {
  const user = useContext(UserContext);
  if (!user) {
    throw new Error('useUser must be used within UserProvider');
  }
  return user;
}

// 5. Use in your app
function App() {
  return (
    <UserProvider>
      <Sidebar />
      <Main />
    </UserProvider>
  );
}

// Now Sidebar doesn't receive user prop
function Sidebar() {
  return <UserCard />;
}

function Main() {
  return <Content />;
}

function Content() {
  return <UserProfile />;
}

// Only UserProfile needs to know about UserContext
function UserProfile() {
  const user = useUser();
  return <p>Welcome, {user.name}!</p>;
}

JavaScript Version

      
javascript

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

// Create the context
const UserContext = createContext(null);

// Provider wrapper component
export function UserProvider({ children }) {
  const [user, setUser] = useState(null);

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

// Custom hook for easy access
export function useUser() {
  const user = useContext(UserContext);
  if (!user) {
    throw new Error('useUser must be used within UserProvider');
  }
  return user;
}

// Use in your app
function App() {
  return (
    <UserProvider>
      <Sidebar />
      <Main />
    </UserProvider>
  );
}

// Sidebar doesn't need user prop anymore
function Sidebar() {
  return <UserCard />;
}

function Main() {
  return <Content />;
}

function Content() {
  return <UserProfile />;
}

// Only UserProfile accesses context
function UserProfile() {
  const user = useUser();
  return <p>Welcome, {user.name}!</p>;
}

Notice the key improvement: Sidebar, Main, and Content no longer accept or forward the user prop. This makes them truly reusable components.

# Context with Both State and Actions

For more complex scenarios, provide both state and functions to update it:

TypeScript Version

      
typescript

import { createContext, useContext, useState, ReactNode, useCallback } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

interface UserContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  updateProfile: (updates: Partial<User>) => void;
}

const UserContext = createContext<UserContextType | undefined>(undefined);

export function UserProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = useCallback(async (email: string, password: string) => {
    // Simulate API call
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    });
    const userData = await response.json();
    setUser(userData);
  }, []);

  const logout = useCallback(() => {
    setUser(null);
  }, []);

  const updateProfile = useCallback((updates: Partial<User>) => {
    setUser((prev) => (prev ? { ...prev, ...updates } : null));
  }, []);

  const value: UserContextType = {
    user,
    login,
    logout,
    updateProfile,
  };

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

export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
}

JavaScript Version

      
javascript

import { createContext, useContext, useState, useCallback } from 'react';

const UserContext = createContext(undefined);

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

  const login = useCallback(async (email, password) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    });
    const userData = await response.json();
    setUser(userData);
  }, []);

  const logout = useCallback(() => {
    setUser(null);
  }, []);

  const updateProfile = useCallback((updates) => {
    setUser((prev) => (prev ? { ...prev, ...updates } : null));
  }, []);

  const value = {
    user,
    login,
    logout,
    updateProfile,
  };

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

export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
}

# Using the Context with Actions

      
typescript

function LoginForm() {
  const { login } = useUser();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await login(email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.currentTarget.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.currentTarget.value)}
      />
      <button type="submit">Login</button>
    </form>
  );
}

function UserGreeting() {
  const { user, logout } = useUser();

  if (!user) {
    return <p>Please log in</p>;
  }

  return (
    <div>
      <p>Welcome, {user.name}!</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

# Provider Patterns

# Compound Provider Pattern

For large applications, organize multiple providers into a single wrapper:

TypeScript Version

      
typescript

import { ReactNode } from 'react';
import { UserProvider } from './UserContext';
import { ThemeProvider } from './ThemeContext';
import { NotificationProvider } from './NotificationContext';

export function AppProviders({ children }: { children: ReactNode }) {
  return (
    <UserProvider>
      <ThemeProvider>
        <NotificationProvider>
          {children}
        </NotificationProvider>
      </ThemeProvider>
    </UserProvider>
  );
}

// In your main App
function App() {
  return (
    <AppProviders>
      <Header />
      <Main />
      <Footer />
    </AppProviders>
  );
}

JavaScript Version

      
javascript

export function AppProviders({ children }) {
  return (
    <UserProvider>
      <ThemeProvider>
        <NotificationProvider>
          {children}
        </NotificationProvider>
      </ThemeProvider>
    </UserProvider>
  );
}

# Advanced: Combining Context with useReducer

For complex state with multiple actions, combine Context with useReducer:

TypeScript Version

      
typescript

import { createContext, useContext, useReducer, ReactNode } from 'react';

interface AuthState {
  isLoading: boolean;
  user: User | null;
  error: string | null;
}

type AuthAction =
  | { type: 'LOGIN_START' }
  | { type: 'LOGIN_SUCCESS'; payload: User }
  | { type: 'LOGIN_ERROR'; payload: string }
  | { type: 'LOGOUT' };

const initialState: AuthState = {
  isLoading: false,
  user: null,
  error: null,
};

function authReducer(state: AuthState, action: AuthAction): AuthState {
  switch (action.type) {
    case 'LOGIN_START':
      return { ...state, isLoading: true, error: null };
    case 'LOGIN_SUCCESS':
      return { ...state, isLoading: false, user: action.payload };
    case 'LOGIN_ERROR':
      return { ...state, isLoading: false, error: action.payload };
    case 'LOGOUT':
      return { ...state, user: null };
    default:
      return state;
  }
}

interface AuthContextType {
  state: AuthState;
  dispatch: React.Dispatch<AuthAction>;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(authReducer, initialState);

  return (
    <AuthContext.Provider value={{ state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

JavaScript Version

      
javascript

import { createContext, useContext, useReducer } from 'react';

const initialState = {
  isLoading: false,
  user: null,
  error: null,
};

function authReducer(state, action) {
  switch (action.type) {
    case 'LOGIN_START':
      return { ...state, isLoading: true, error: null };
    case 'LOGIN_SUCCESS':
      return { ...state, isLoading: false, user: action.payload };
    case 'LOGIN_ERROR':
      return { ...state, isLoading: false, error: action.payload };
    case 'LOGOUT':
      return { ...state, user: null };
    default:
      return state;
  }
}

const AuthContext = createContext(undefined);

export function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, initialState);

  return (
    <AuthContext.Provider value={{ state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

# Using Context with useReducer

      
typescript

function LoginComponent() {
  const { state, dispatch } = useAuth();

  const handleLogin = async (email: string, password: string) => {
    dispatch({ type: 'LOGIN_START' });
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      });
      const user = await response.json();
      dispatch({ type: 'LOGIN_SUCCESS', payload: user });
    } catch (error) {
      dispatch({
        type: 'LOGIN_ERROR',
        payload: error instanceof Error ? error.message : 'Login failed',
      });
    }
  };

  return (
    <div>
      {state.isLoading && <p>Loading...</p>}
      {state.error && <p className="error">{state.error}</p>}
      {state.user && <p>Welcome, {state.user.name}!</p>}
      {!state.user && (
        <button onClick={() => handleLogin('user@example.com', 'password')}>
          Login
        </button>
      )}
    </div>
  );
}

# Multiple Contexts and Organization

# File Organization Strategy

      
typescript

src/
├── contexts/
│   ├── UserContext.tsx
│   ├── ThemeContext.tsx
│   ├── NotificationContext.tsx
│   └── index.ts (export all contexts and providers)
├── hooks/
│   ├── useUser.ts
│   ├── useTheme.ts
│   └── useNotification.ts
└── App.tsx

# Creating a Context Index

      
typescript

// contexts/index.ts
export { UserProvider, useUser } from './UserContext';
export { ThemeProvider, useTheme } from './ThemeContext';
export { NotificationProvider, useNotification } from './NotificationContext';

# Performance Optimization

# The Re-render Problem

Context has a performance limitation: when context value changes, all consuming components re-render, even if they only use a subset of the value.

      
typescript

// ❌ PROBLEM: Every consumer re-renders when ANY value changes
const UserContext = createContext({
  user: null,
  theme: 'light',
  notifications: [],
  setUser: () => {},
  setTheme: () => {},
});

// If user changes, ThemeSwitcher re-renders even though it only uses theme

# Solution 1: Split Contexts by Concern

      
typescript

// ✅ GOOD: Separate contexts by concern
const UserContext = createContext<User | null>(null);
const ThemeContext = createContext<'light' | 'dark'>('light');

// Now ThemeSwitcher only re-renders when theme changes

# Solution 2: Use useCallback to Stabilize Values

      
typescript

// ✅ GOOD: Memoize context value to prevent unnecessary re-renders
export function UserProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

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

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

# Solution 3: Selector Pattern with useCallback

For complex contexts, let consumers select only what they need:

      
typescript

// Custom hook with selector
export function useUserSelector<T>(
  selector: (user: User | null) => T
): T {
  const user = useContext(UserContext);
  return useMemo(() => selector(user), [user, selector]);
}

// Usage
function MyComponent() {
  const userName = useUserSelector((user) => user?.name);
  // Only re-renders when user.name changes
}

# Common Pitfalls and Solutions

# Pitfall 1: Missing Provider

      
typescript

// ❌ ERROR: useUser called outside UserProvider
function App() {
  return <MyComponent />; // No UserProvider!
}

function MyComponent() {
  const user = useUser(); // Error: undefined context
}

// ✅ CORRECT
function App() {
  return (
    <UserProvider>
      <MyComponent />
    </UserProvider>
  );
}

# Pitfall 2: Context Value Changes on Every Render

      
typescript

// ❌ PROBLEM: New object created every render, causes unnecessary re-renders
export function UserProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// ✅ SOLUTION: Memoize the value
export function UserProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

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

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

# Pitfall 3: Not Handling Undefined Context

      
typescript

// ❌ PROBLEM: Unsafe context access
export function useUser() {
  return useContext(UserContext); // Could be undefined!
}

// ✅ SOLUTION: Validate context
export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
}

# FAQ

Q: When should I use Context instead of props?

A: Use Context when state is needed by multiple distant components or by most components in your app. For closely related parent-child components, props are often clearer. A good rule: if you're drilling props through 3+ levels, Context is probably better.

Q: Can I have multiple instances of the same context?

A: Yes, each Provider instance creates a separate context value. This is useful for nested providers:

      
typescript

<UserProvider value={admin}>
  <AdminPanel />
  <UserProvider value={currentUser}>
    <UserProfile />
  </UserProvider>
</UserProvider>

Q: Does Context replace Redux?

A: Context is good for simple to moderate state management. Redux is better for large, complex applications with many actions and state dependencies. Modern practice uses Context for simpler needs and libraries like Redux or Zustand for complex applications.

Q: How do I test components using Context?

A: Wrap your component in the Provider during testing:

      
typescript

import { render } from '@testing-library/react';
import { UserProvider } from './UserContext';

test('MyComponent displays user', () => {
  render(
    <UserProvider>
      <MyComponent />
    </UserProvider>
  );
});

Q: Can context values be async (promises)?

A: Not directly. Context stores values synchronously. Use a state machine pattern where the context holds loading/error/data states:

      
typescript

interface AsyncContextState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

const DataContext = createContext<AsyncContextState<Data>>({
  data: null,
  loading: false,
  error: null,
});

Q: Should I use useCallback for all context functions?

A: Only if those functions are dependency array items in useEffect calls. Otherwise, the memoization cost exceeds the benefit. Profile before optimizing.

Key Takeaway: Context API is React's built-in solution for avoiding prop drilling. Use it for application-level state like theme, authentication, and notifications. For complex state logic, combine it with useReducer. Split contexts by concern and memoize values to optimize performance.

Questions? How are you managing state in your apps? Share your Context patterns in the comments below.