React Context Not Wrapped in Provider — What It Means & How to Fix It

What Does This Error Mean?

This React error means a component is calling useContext() or consuming a context value, but no matching Provider component exists above it in the component tree. Every React context consumer must have a Provider ancestor — if the Provider is missing or the consumer is outside it, React returns the default context value (often undefined) or throws an error. The fix is to wrap the component (or its ancestor) with the correct Provider component. This is one of the most common React context mistakes.

Affected Models

React 17
React 18
React 19
Create React App
Next.js

Common Causes

The component using useContext() is not wrapped inside the corresponding Context.Provider in the component tree
The Provider was added to the wrong place in the component tree and does not cover the consuming component
The component is rendered outside the main app tree (in a portal, modal, or test) and the Provider is missing there
The context was created in one file and a different context object is being used inadvertently (import mismatch)
The Provider was removed during a refactor but the consumers were not updated to reflect the change

How to Fix It

Identify which context is being consumed. Look at your useContext() call — for example, useContext(ThemeContext). Note the context name.

The error message React displays will often name the context if it was created with a displayName or if the variable name is clear.
Find where the corresponding Provider should be. The Provider (e.g., <ThemeContext.Provider value={...}>) must be a parent component of everything that consumes that context.

Think of the Provider like a wrapper — everything inside it can access the context, everything outside cannot.
Wrap your component tree with the Provider at the correct level. In most apps, global contexts (theme, auth, user) are provided at the root level in index.jsx or App.jsx.

Example: wrap your entire <App /> with <ThemeContext.Provider value={theme}> in your root file.
Verify you are importing the same context object in both the Provider file and the consumer file. Using two different imports or creating context twice will result in consumers not finding their Provider.

Create context once in a dedicated file (e.g., ThemeContext.js) and import the same object everywhere.
If the component is rendered in a portal or modal, ensure the Provider is also an ancestor in that rendering context. React Portals render outside the normal DOM tree but still respect the React component tree hierarchy.

Portals created with ReactDOM.createPortal() still receive context from their React parent, not their DOM parent. The Provider just needs to be a React component ancestor.

When to Call a Professional

This is a developer error in React code that you fix by restructuring your component tree. No external service or tool is needed — it is resolved entirely in your codebase. If you are new to React context, reviewing the React documentation on Context at react.dev is the best starting point.

Frequently Asked Questions

What does React return when context has no Provider?

When a consumer accesses context without a Provider, React returns the default value passed to createContext(). For example: const ThemeContext = createContext('light') — without a Provider, all consumers receive 'light'. If createContext() was called with no argument or undefined, consumers receive undefined, which often causes runtime errors in components that expect a real value.

Should I always provide a default value to createContext()?

It depends on your use case. A meaningful default value is useful for testing, Storybook, and components that can function without the full context. For contexts that are always required (like an auth context), passing null or undefined as default and checking for it is a common pattern to catch missing Providers early. Some teams throw an error in a custom hook if context is undefined, which gives a clearer error message.

What is the performance impact of React Context?

Every component that consumes a context re-renders when the context value changes. If your context value is an object that is recreated on every parent render, all consumers will re-render unnecessarily. Use useMemo() to memoize the context value object and prevent unnecessary re-renders. For frequently changing values, consider using a state management library like Zustand or Redux instead of context.