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

Replaces usages of useContext with use.

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