logoESLint React
Rules

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

  • core
  • recommended
  • recommended-typescript
  • recommended-type-checked

What it does

Disallows using React.useContext.

In React 19, use is preferred over useContext because it is more flexible.

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

An unsafe codemod is available for this rule.

Examples

Failing

import { useContext } from "react";
 
function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

Passing

import { use } from "react";
 
function Button() {
  const theme = use(ThemeContext);
  // ...
}

Implementation

Further Reading


See Also

On this page