no-use-context

Full Name in eslint-plugin-react-x

react-x/no-use-context

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-use-context

Features

🔄

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule DetailsCopy Anchor Link

In React 19, this rule prefers use over useContext because use is more flexible — unlike useContext, it can be called within loops and conditional statements. Note that this is a convention of this rule, not an official React recommendation; useContext remains the standard way to read context.

Note: Reading context with use is not supported in Server Components. The auto-fix that replaces useContext with use does not apply there — review flagged code in Server Components manually instead of applying the fix.

In addition, enable the react-naming-convention/context-name rule to enforce consistent naming conventions for contexts.

ExamplesCopy Anchor Link

Still using useContext in React 19Copy Anchor Link

React 19 introduced the more general use API, which can replace useContext and, unlike useContext, can be called in conditional statements and loops. This rule prefers use in new code.

// 🔴 Problem: this rule prefers use 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 conditionallyCopy Anchor Link

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} />;
}

ResourcesCopy Anchor Link

• Rule Source
• Test Source
• Rule Changelog

Further ReadingCopy Anchor Link

• React Docs: Reading context with use
• React Docs: Blog: New feature use

See AlsoCopy Anchor Link

• react-naming-convention/context-name
  Enforces identifier names assigned from createContext calls to be a valid component name with the suffix Context.
• react-x/no-context-provider
  Replaces usage of <Context.Provider> with <Context>.