no-use-context
Replaces usage of 'useContext' with 'use'.
Full Name in eslint-plugin-react-x
react-x/no-use-contextFull Name in @eslint-react/eslint-plugin
@eslint-react/no-use-contextFeatures
🔄
Presets
x
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
In React 19, use is preferred over useContext because it is more flexible.
In addition, enable the naming-convention/context-name rule to enforce consistent naming conventions for contexts.
Examples
Still using useContext in React 19
React 19 introduced the more general use API, which can replace useContext and supports being called in conditional statements and loops. New code should prefer use.
// Problem: use should be preferred over useContext in React 19
import { useContext } from "react";
function Button() {
const theme = useContext(ThemeContext);
// ...
}// Recommended: use the React 19 use API
import { use } from "react";
function Button() {
const theme = use(ThemeContext);
// ...
}Calling context reads conditionally
Unlike useContext, use can be called inside conditions and loops. This lets you read context only when needed.
// Problem: useContext must be called at the top level, even when not needed
import { useContext } from "react";
function Toolbar({ showTooltip, tooltipContext }) {
const tooltip = useContext(tooltipContext); // Always called
if (!showTooltip) return null;
return <Tooltip content={tooltip} />;
}// Recommended: use can be called conditionally
import { use } from "react";
function Toolbar({ showTooltip, tooltipContext }) {
if (!showTooltip) return null;
const tooltip = use(tooltipContext); // Called only when needed
return <Tooltip content={tooltip} />;
}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-context-provider
Replaces usage of<Context.Provider>with<Context>.