What causes Context Without Provider?

The component using useContext is rendered outside the Provider tree. The Provider is placed too low in the component tree, missing some consumers. createContext() was called with null as the default and no Provider wraps the consumer. The Provider and the consumer are in different React roots.

← Errors

JavaScript

Context Without Provider: What It Means and How to Fix It

Error reference

Context Without Provider

Language

JavaScript

Severity

Medium

When it happens

useContext() returns the default value passed to createContext() when there is no matching Provider in the component tree above it.

Potential fixes

Ensure the Provider wraps all components that consume the context. Provide a meaningful default value to createContext() so the app degrades gracefully without a Provider. Create a custom hook that throws a clear error message if the context value is null.

Deep dive

useContext() returns the default value passed to createContext() when there is no matching Provider in the component tree above it. If the default value is null or undefined and you access properties on it, you get a TypeError at runtime.

Why it happens

•The component using useContext is rendered outside the Provider tree.
•The Provider is placed too low in the component tree, missing some consumers.
•createContext() was called with null as the default and no Provider wraps the consumer.
•The Provider and the consumer are in different React roots.

Potential fixes

Ensure the Provider wraps all components that consume the context. Provide a meaningful default value to createContext() so the app degrades gracefully without a Provider. Create a custom hook that throws a clear error message if the context value is null.

Examples

JavaScript

Code that triggers the error

const ThemeContext = createContext(null);

function Button() {
  const theme = useContext(ThemeContext); // no Provider above
  return <button style={{ color: theme.primary }}>Click</button>;
}

Error output

TypeError: Cannot read properties of null (reading 'primary')

Fixed code

function App() {
  return (
    <ThemeContext.Provider value={{ primary: "blue" }}>
      <Button />
    </ThemeContext.Provider>
  );
}

Practice in English

How would you explain a Context Without Provider to a fellow dev? Choose the right phrase:

"I hit an error...

Debugging in English?

You just read real developer English to fix this. Lingua-e has free exercises built the same way: standups, code reviews, and real workplace scenarios.

Practice developer English, free