How to fix Cannot use Context.Consumer outside of a Provider in React

ReactBEGINNERMEDIUM

This error occurs when a React Context Consumer is rendered in a component tree that is not wrapped by the corresponding Context Provider. Context values are undefined or use default values when accessed outside their Provider scope.

What this error means

React Context provides a way to share values between components without explicitly passing props through every level of the component tree. The Context API consists of two parts: a Provider component that supplies the value, and Consumer components (or useContext hooks) that read it. When you use Context.Consumer or useContext() to access a context value, React looks up the component tree to find the nearest matching Provider. If no Provider is found, React will either return the default value passed to createContext(), or undefined if no default was provided. This error message indicates that your code is attempting to consume a context value in a component that is not a descendant of the corresponding Provider. This means the Consumer cannot access the intended context value and will behave unexpectedly, potentially breaking your application logic.

How to fix "Cannot use Context.Consumer outside of a Provider"

1Verify Provider wraps all Consumer components

Check that your Context.Provider is placed high enough in the component tree to wrap all components that need to consume the context.

Incorrect structure:

jsx

import { createContext } from 'react';

const ThemeContext = createContext();

function App() {
  return (
    <div>
      <Navbar /> {/* Cannot access ThemeContext */}
      <ThemeContext.Provider value="dark">
        <Content />
      </ThemeContext.Provider>
    </div>
  );
}

Correct structure:

jsx

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <div>
        <Navbar /> {/* Can now access ThemeContext */}
        <Content />
      </div>
    </ThemeContext.Provider>
  );
}

2Use useContext hook instead of Context.Consumer

Modern React code should use the useContext hook instead of Context.Consumer. This makes the code cleaner and provides better error messages.

Old Consumer pattern:

jsx

function MyComponent() {
  return (
    <ThemeContext.Consumer>
      {value => <div>Theme: {value}</div>}
    </ThemeContext.Consumer>
  );
}

Modern useContext pattern:

jsx

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

3Create a custom hook with validation

Build a custom hook that validates the context is being used within a Provider. This provides clear error messages during development.

jsx

import { createContext, useContext } from 'react';

const ThemeContext = createContext(undefined);

export function useTheme() {
  const context = useContext(ThemeContext);

  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }

  return context;
}

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

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

Now when you use useTheme() outside a Provider, you get a clear error message pointing to the problem.

4Check for multiple React instances

If you're using npm link, monorepos, or have duplicate React installations, you may have multiple Context instances that don't match.

Check for duplicate React:

bash

npm ls react
# or
yarn why react

In a monorepo, ensure React is hoisted:

json

// package.json (workspace root)
{
  "workspaces": {
    "nohoist": []
  }
}

For linked packages, use peerDependencies:

json

// your-library/package.json
{
  "peerDependencies": {
    "react": "^18.0.0"
  }
}

5Fix Context.Consumer render function syntax

If you're still using Context.Consumer, ensure you're passing a render function as the only child.

Incorrect - multiple children:

jsx

<ThemeContext.Consumer>
  <div>Theme: {value}</div> {/* Wrong! */}
</ThemeContext.Consumer>

Incorrect - not a function:

jsx

<ThemeContext.Consumer>
  <div>Theme</div> {/* Wrong! */}
</ThemeContext.Consumer>

Correct - single render function:

jsx

<ThemeContext.Consumer>
  {value => <div>Theme: {value}</div>}
</ThemeContext.Consumer>

6Move Provider to root layout or App component

For application-wide context (theme, auth, etc.), place the Provider in your root component or layout.

Next.js App Router:

jsx

// app/layout.tsx
import { ThemeProvider } from '@/contexts/ThemeContext';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Create React App:

jsx

// src/index.js
import { ThemeProvider } from './contexts/ThemeContext';

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

How to fix Cannot use Context.Consumer outside of a Provider in React

What this error means

Typical symptoms

Common causes

How to fix "Cannot use Context.Consumer outside of a Provider"

Advanced notes

Related errors

Official resources & further reading