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

What it does

Disallows using React.useContext.

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

An unsafe codemod is available for this rule.

import { useContext } from "react";
 
const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

import React from "react";
 
const MyComponent = () => {
  const value = React.useContext(MyContext);
  return <div>{value}</div>;
};

import { use } from "react";
 
const MyComponent = () => {
  const value = use(MyContext);
  return <div>{value}</div>;
};

import React from "react";
 
const MyComponent = () => {
  const value = React.use(MyContext);
  return <div>{value}</div>;
};