useContext

Pranshu Tiwari — Thu, 29 Jan 2026 20:52:32 GMT

Understanding useContext: React's "Pass Data Without Props" Hook

Hey! Today we'll learn about useContext - it's like creating a global announcement system for your React app where components can listen to important information without passing it through every level.

What Problem Does useContext Solve?

Imagine you're passing a piece of data from a grandparent component to a great-grandchild component:

// ❌ The Prop Drilling Problem
function Grandparent() {
  const theme = 'dark';
  return <Parent theme={theme} />;
}

function Parent({ theme }) {
  return <Child theme={theme} />;
}

function Child({ theme }) {
  return <Grandchild theme={theme} />;
}

function Grandchild({ theme }) {
  return <p>Theme is: {theme}p>;
}

That's prop drilling - passing props through components that don't need them just to reach a component that does.

useContext fixes this!

The Basic Idea

Think of useContext like a radio broadcast:

Context.Provider = Radio station (broadcasts data)
useContext() = Radio receiver (listens to data)
Any component can tune in to the broadcast, no matter where it is!

Three Simple Steps to Use Context

Step 1: Create the Context (The Radio Station)

import React, { createContext } from 'react';

// Create the radio station
const ThemeContext = createContext('light'); // Default value = 'light'
// This is like setting up a radio frequency

Step 2: Provide the Value (Start Broadcasting)

function App() {
  const [theme, setTheme] = useState('dark');

  // Wrap components that need this data in Provider
  return (
    <ThemeContext.Provider value={theme}>
      <Header />
      <MainContent />
      <Footer />
    ThemeContext.Provider>
  );
}
// Now everything inside can listen to the theme!

Step 3: Consume the Value (Tune In)

import React, { useContext } from 'react';

function Header() {
  // Tune into the ThemeContext broadcast
  const theme = useContext(ThemeContext);

  return (
    <header className={`header-${theme}`}>
      <h1>My App (Theme: {theme})h1>
    header>
  );
}
// No props needed! Header just "knows" the theme

Complete Real Example: Theme Switcher

Let's build a complete theme switcher app:

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

// 1. CREATE Context (outside components)
const ThemeContext = createContext();
const ThemeUpdateContext = createContext(); // Another context for update function

// Custom hook for easy theme access
function useTheme() {
  return useContext(ThemeContext);
}

// Custom hook for easy theme updates
function useThemeUpdate() {
  return useContext(ThemeUpdateContext);
}

// 2. PROVIDER Component (wraps our app)
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={theme}>
      <ThemeUpdateContext.Provider value={toggleTheme}>
        {children}
      ThemeUpdateContext.Provider>
    ThemeContext.Provider>
  );
}

// 3. COMPONENTS that use the context
function Header() {
  const theme = useTheme();

  return (
    <header style={{
      background: theme === 'light' ? '#fff' : '#333',
      color: theme === 'light' ? '#000' : '#fff',
      padding: '20px'
    }}>
      <h1>My Websiteh1>
      <p>Current theme: {theme}p>
    header>
  );
}

function Content() {
  const theme = useTheme();

  return (
    <main style={{
      background: theme === 'light' ? '#f5f5f5' : '#222',
      color: theme === 'light' ? '#000' : '#fff',
      padding: '20px',
      minHeight: '200px'
    }}>
      <p>This is the main content area.p>
      <p>It automatically uses the {theme} theme!p>
    main>
  );
}

function ThemeToggleButton() {
  const toggleTheme = useThemeUpdate();
  const theme = useTheme();

  return (
    <button 
      onClick={toggleTheme}
      style={{
        padding: '10px 20px',
        margin: '10px',
        background: theme === 'light' ? '#333' : '#fff',
        color: theme === 'light' ? '#fff' : '#333'
      }}
    >
      Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
    button>
  );
}

// 4. PUT IT ALL TOGETHER
function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <Header />
        <Content />
        <ThemeToggleButton />
        <Footer />
      div>
    ThemeProvider>
  );
}

function Footer() {
  const theme = useTheme();

  return (
    <footer style={{
      background: theme === 'light' ? '#eee' : '#111',
      color: theme === 'light' ? '#000' : '#fff',
      padding: '10px',
      marginTop: '20px'
    }}>
      <p>Footer - Using {theme} themep>
    footer>
  );
}

Multiple Contexts Example: User + Cart

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

// Context 1: User Information
const UserContext = createContext();
// Context 2: Shopping Cart
const CartContext = createContext();

function App() {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john@example.com',
    isPremium: true
  });

  const [cart, setCart] = useState([
    { id: 1, name: 'iPhone', price: 999 },
    { id: 2, name: 'Headphones', price: 199 }
  ]);

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  return (
    <UserContext.Provider value={user}>
      <CartContext.Provider value={{ cart, addToCart }}>
        <Navbar />
        <Products />
        <Checkout />
      CartContext.Provider>
    UserContext.Provider>
  );
}

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

  return (
    <nav>
      <p>Welcome, {user.name}!p>
      <p>{user.isPremium ? '⭐ Premium User' : 'Free User'}p>
    nav>
  );
}

function Products() {
  const { addToCart } = useContext(CartContext);

  const products = [
    { id: 3, name: 'Laptop', price: 1299 },
    { id: 4, name: 'Tablet', price: 599 }
  ];

  return (
    <div>
      <h2>Productsh2>
      {products.map(product => (
        <div key={product.id} style={{border: '1px solid #ccc', padding: '10px', margin: '10px'}}>
          <h3>{product.name}h3>
          <p>${product.price}p>
          <button onClick={() => addToCart(product)}>
            Add to Cart
          button>
        div>
      ))}
    div>
  );
}

function Checkout() {
  const user = useContext(UserContext);
  const { cart } = useContext(CartContext);

  const total = cart.reduce((sum, item) => sum + item.price, 0);

  return (
    <div>
      <h2>Checkouth2>
      <p>Customer: {user.email}p>

      <h3>Cart Items:h3>
      {cart.map(item => (
        <p key={item.id}>{item.name} - ${item.price}p>
      ))}

      <h3>Total: ${total}h3>
      {user.isPremium && <p>Premium Discount Applied! Final: ${total * 0.9}p>}
    div>
  );
}

Dynamic Context with Updates Example

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

const SettingsContext = createContext();

function SettingsProvider({ children }) {
  const [settings, setSettings] = useState({
    language: 'English',
    fontSize: 16,
    notifications: true,
    darkMode: false
  });

  const updateSetting = (key, value) => {
    setSettings(prev => ({
      ...prev,
      [key]: value
    }));
  };

  return (
    <SettingsContext.Provider value={{ settings, updateSetting }}>
      {children}
    SettingsContext.Provider>
  );
}

function SettingsPanel() {
  const { settings, updateSetting } = useContext(SettingsContext);

  return (
    <div style={{border: '2px solid #666', padding: '20px', margin: '20px'}}>
      <h2>Settings Panelh2>

      <div>
        <label>Language: label>
        <select 
          value={settings.language}
          onChange={(e) => updateSetting('language', e.target.value)}
        >
          <option>Englishoption>
          <option>Spanishoption>
          <option>Frenchoption>
        select>
      div>

      <div>
        <label>Font Size: {settings.fontSize}px label>
        <input 
          type="range" 
          min="12" 
          max="24" 
          value={settings.fontSize}
          onChange={(e) => updateSetting('fontSize', parseInt(e.target.value))}
        />
      div>

      <div>
        <label>
          <input 
            type="checkbox"
            checked={settings.notifications}
            onChange={(e) => updateSetting('notifications', e.target.checked)}
          />
          Enable Notifications
        label>
      div>

      <div>
        <label>
          <input 
            type="checkbox"
            checked={settings.darkMode}
            onChange={(e) => updateSetting('darkMode', e.target.checked)}
          />
          Dark Mode
        label>
      div>
    div>
  );
}

function DisplayContent() {
  const { settings } = useContext(SettingsContext);

  return (
    <div style={{
      background: settings.darkMode ? '#333' : '#fff',
      color: settings.darkMode ? '#fff' : '#000',
      fontSize: `${settings.fontSize}px`,
      padding: '20px',
      margin: '20px'
    }}>
      <h1>Content Displayh1>
      <p>Current language: {settings.language}p>
      <p>Font size: {settings.fontSize}pxp>
      <p>Notifications: {settings.notifications ? 'ON' : 'OFF'}p>
      <p>This text changes based on your settings!p>
    div>
  );
}

function App() {
  return (
    <SettingsProvider>
      <div>
        <h1>App Settings Demoh1>
        <SettingsPanel />
        <DisplayContent />
      div>
    SettingsProvider>
  );
}

Custom Hook Pattern (Best Practice)

// Create this in a separate file like 'AuthContext.js'
import React, { createContext, useState, useContext } from 'react';

const AuthContext = createContext();

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

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

  const login = async (email, password) => {
    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      setUser({ email, name: 'John Doe', token: 'abc123' });
      setLoading(false);
    }, 1000);
  };

  const logout = () => {
    setUser(null);
  };

  const value = {
    user,
    login,
    logout,
    loading,
    isAuthenticated: !!user
  };

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

// In your components:
function LoginButton() {
  const { login, loading } = useAuth();

  const handleLogin = () => {
    login('user@example.com', 'password123');
  };

  return (
    <button onClick={handleLogin} disabled={loading}>
      {loading ? 'Logging in...' : 'Login'}
    button>
  );
}

function UserProfile() {
  const { user, logout } = useAuth();

  if (!user) return <p>Please loginp>;

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

When to Use useContext?

✅ USE useContext when:

Multiple components need the same data
You're passing props through 3+ levels (prop drilling)
You have global data (theme, user auth, language)
Many components need to update the same state

❌ DON'T use useContext for:

Data used by only parent-child components (just use props)
Data that changes very frequently (performance issues)
Simple state that's only used in one component

Common Mistakes

Mistake 1: Forgetting the Provider

// ❌ WRONG: Component outside Provider gets undefined
function Component() {
  const value = useContext(MyContext); // value = undefined
  return <p>{value}p>;
}

// ✅ CORRECT: Wrap in Provider
function App() {
  return (
    <MyContext.Provider value="Hello">
      <Component />
    MyContext.Provider>
  );
}

Mistake 2: Unnecessary Rerenders

// ❌ WRONG: New object every render causes rerenders
function App() {
  const [user, setUser] = useState({ name: 'John' });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Child />
    UserContext.Provider>
  );
  // New {user, setUser} object every time = Child rerenders every time
}

// ✅ BETTER: Memoize the value
function App() {
  const [user, setUser] = useState({ name: 'John' });

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

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

Practice Exercise: Build a Notification System

Create a notification system where:

Any component can show notifications
A NotificationCenter component displays all notifications
Notifications auto-remove after 3 seconds

// Try this structure:
const NotificationContext = createContext();

function NotificationProvider({ children }) {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (message) => {
    // Your code here
  };

  const removeNotification = (id) => {
    // Your code here
  };

  return (
    <NotificationContext.Provider value={{ addNotification }}>
      {children}
      <NotificationCenter notifications={notifications} />
    NotificationContext.Provider>
  );
}

// Then use in components:
function AddToCartButton() {
  const { addNotification } = useContext(NotificationContext);

  const handleClick = () => {
    // Add item to cart
    addNotification('Item added to cart!');
  };

  return <button onClick={handleClick}>Add to Cartbutton>;
}

Summary Cheat Sheet

// 1. CREATE context (usually in separate file)
const MyContext = createContext(defaultValue);

// 2. PROVIDE value (wrap your app/components)
<MyContext.Provider value={someValue}>
  <ChildComponents />
MyContext.Provider>

// 3. CONSUME value (in any child component)
const value = useContext(MyContext);

// 4. Best Practice: Create custom hook
function useMyContext() {
  return useContext(MyContext);
}

Remember: useContext is like a shortcut through the component tree. It lets deeply nested components access data without every middle component needing to pass it along!

useContext(React)