logoESLint React
Rules

no-use-context

Replaces usage of 'useContext' with 'use'.

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 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.

Common Violations

Invalid

import { useContext } from "react";

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

Valid

import { use } from "react";

function Button() {
  const theme = use(ThemeContext);
  // ...
}

Resources

Further Reading


See Also

  • context-name
    Enforces the context name to be a valid component name with the suffix Context
  • no-context-provider
    Replaces usage of <Context.Provider> with <Context>

On this page