no-context-provider
Replaces usage of '<Context.Provider>' with '<Context>'.
Full Name in eslint-plugin-react-x
react-x/no-context-providerFull Name in @eslint-react/eslint-plugin
@eslint-react/no-context-providerFeatures
🔄
Presets
x
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
In React 19, you can render <Context> as a provider instead of <Context.Provider>.
This rule works best in codebases that follow the naming-convention/context-name rule.
Examples
Using a Context Provider in React 19
Starting from React 19, Context itself can be used directly as a provider, so you no longer need to write .Provider.
import ThemeContext from "./ThemeContext";
// Problem: Continuing to use the legacy `<Context.Provider>` syntax
function App({ children }) {
return (
<ThemeContext.Provider value="light">
{children}
</ThemeContext.Provider>
);
}import ThemeContext from "./ThemeContext";
// Recommended: Use `<Context>` directly as a provider
function App({ children }) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}Nesting multiple context providers
When multiple contexts are provided to the same subtree, the legacy .Provider syntax adds unnecessary noise. React 19 allows each context to be used directly.
// Problem: Nested legacy providers
import ThemeContext from "./ThemeContext";
import AuthContext from "./AuthContext";
function App({ children }) {
return (
<ThemeContext.Provider value="dark">
<AuthContext.Provider value={currentUser}>
{children}
</AuthContext.Provider>
</ThemeContext.Provider>
);
}// Recommended: Use contexts directly as providers
import ThemeContext from "./ThemeContext";
import AuthContext from "./AuthContext";
function App({ children }) {
return (
<ThemeContext value="dark">
<AuthContext value={currentUser}>
{children}
</AuthContext>
</ThemeContext>
);
}Versions
Resources
Further Reading
See Also
react-naming-convention/context-name
Enforces identifier names assigned fromcreateContextcalls to be a valid component name with the suffixContext.react-x/no-use-context
Replaces usage ofuseContextwithuse.