🎧 Consuming Context with useContext

Ways to Consume Context

React offers a few ways to read context, but they are not equal. In modern function components, useContext is the standard. The older approaches still exist mostly for legacy class components.

The useContext Hook

useContext takes a context object and returns the current value from the nearest matching Provider above it. That's it — no wrapper components, no render-prop callbacks.

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      className={theme === 'dark' ? 'btn btn--dark' : 'btn btn--light'}
      onClick={toggleTheme}
    >
      Toggle theme
    </button>
  );
}

Why it's the preferred method:

• Clean, flat syntax — no nested callbacks.
• Follows the standard rules of hooks alongside useState, useEffect, and friends.
• Reads like any other hook, so components stay easy to scan.
• Lets you destructure exactly the pieces you need.

📻 A radio analogy. A Provider is a station broadcasting on a frequency; useContext is a receiver tuned to it. Many receivers can pick up the same station at once, and none of them need a wire running back to the tower — exactly how many components read one context without direct prop connections.

Consuming Multiple Contexts

Real components often need several contexts at once. With hooks, you just call useContext once per context — no pyramids:

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
import { UserContext } from './UserContext';
import { LanguageContext } from './LanguageContext';

function ProfileCard() {
  const { theme } = useContext(ThemeContext);
  const { user } = useContext(UserContext);
  const { translations } = useContext(LanguageContext);

  if (!user) return <div>{translations.loading}…</div>;

  return (
    <div className={`profile-card profile-card--${theme}`}>
      <h2>{translations.greeting}, {user.name}!</h2>
      <p>{translations.memberSince}: {new Date(user.joinDate).toLocaleDateString()}</p>
      <button>{translations.editProfile}</button>
    </div>
  );
}

Compare that to the pre-hooks era, when each context meant another layer of Context.Consumer render props:

// The legacy render-prop approach — deeply nested and hard to read
function ProfileCard() {
  return (
    <ThemeContext.Consumer>
      {({ theme }) => (
        <UserContext.Consumer>
          {({ user }) => (
            <LanguageContext.Consumer>
              {({ translations }) => (
                <div className={`profile-card profile-card--${theme}`}>
                  <h2>{translations.greeting}, {user.name}!</h2>
                </div>
              )}
            </LanguageContext.Consumer>
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

Custom Context Hooks

The single most valuable pattern in this lesson: wrap useContext in a custom hook. Instead of consumers importing both the context and the hook, they import one well-named hook that hides the plumbing and can add validation or derived values.

// themeContext.jsx
import { createContext, useContext, useState, useMemo, useCallback } from 'react';

const ThemeContext = createContext(undefined);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = useCallback(() => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  }, []);

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

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

// The custom hook — the only thing consumers import
export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

Consumers now read beautifully — no context object in sight:

import { useTheme } from './themeContext';

function ThemedButton() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button className={`btn btn--${theme}`} onClick={toggleTheme}>
      Toggle theme
    </button>
  );
}

Guarding Against Missing Providers

If a component calls useContext but no matching Provider sits above it, React hands back the default value. When that default is undefined, consumers can crash with a confusing "cannot read property of undefined" far from the real cause.

The fix you saw above is the standard guard: default the context to undefined and throw a clear message from the custom hook.

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

Now a missing Provider fails loudly and early, in development, pointing straight at the mistake instead of surfacing as a subtle runtime bug.

Selectors for Performance

Recall the re-render rule: any change to a context value re-renders every consumer, even ones reading a single field. A lightweight remedy is a selector hook that returns just the slice a component cares about — keeping the consuming component small so its re-render is cheap:

// A tiny selector hook returns only the name
function useUserName() {
  const { user } = useContext(UserContext);
  return user.name;
}

function UserGreeting() {
  const name = useUserName();
  return <h1>Hello, {name}!</h1>;
}

For larger apps where you truly need consumers to skip re-renders unless their slice changes, reach for the community library use-context-selector, which adds real selector semantics on top of Context:

import { useContextSelector } from 'use-context-selector';

function UserAvatar() {
  // Re-renders only when avatarUrl changes, not on every user update
  const avatarUrl = useContextSelector(
    UserContext,
    (value) => value.user.profile.avatarUrl
  );

  return <img src={avatarUrl} alt="User avatar" />;
}

Testing Consumers

A component that reads context needs a matching Provider available in the test. The simplest approach is to wrap the component under test in the real Provider — or a small helper that supplies controlled values.

// A reusable helper that renders with a controlled theme value
import { render } from '@testing-library/react';
import { ThemeContext } from './themeContext';

function renderWithTheme(ui, { theme = 'light', toggleTheme = () => {} } = {}) {
  return render(
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {ui}
    </ThemeContext.Provider>
  );
}

// Usage in a test
import { screen } from '@testing-library/react';

test('button reflects the dark theme', () => {
  renderWithTheme(<ThemedButton />, { theme: 'dark' });
  const button = screen.getByRole('button', { name: /toggle theme/i });
  expect(button).toHaveClass('btn--dark');
});

Two practical tips: prefer asserting on rendered output (roles, text, classes) over internal state, and reuse a single renderWithProviders helper across your test suite so every test wires context the same way.

Hands-on Exercise

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

const CounterContext = createContext(undefined);

export function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount((c) => c + 1), []);
  const reset = useCallback(() => setCount(0), []);

  const value = useMemo(() => ({ count, increment, reset }), [count, increment, reset]);

  return <CounterContext.Provider value={value}>{children}</CounterContext.Provider>;
}

export function useCounter() {
  const context = useContext(CounterContext);
  if (context === undefined) {
    throw new Error('useCounter must be used within a CounterProvider');
  }
  return context;
}

function Counter() {
  const { count, increment, reset } = useCounter();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Summary & Quiz

📚 Further Reading

• React docs — useContext
• React — Reusing Logic with Custom Hooks
• use-context-selector library

🚀 What's Next?

You've now covered Context end to end — creating it, providing it, and consuming it. But for large apps with complex, interdependent state, a dedicated store shines. Next we start Redux, learning its core concepts and architecture with modern Redux Toolkit.