When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.

The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:

import { fixupPluginRules } from "@eslint/compat";

  // Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config, 
  // because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
  // Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
  {
    plugins: {
      "react": reactPlugin, // remove this if you already have another config object that adds the react plugin
      "react-hooks": fixupPluginRules(eslintPluginReactHooks),
    },
    rules: {
      ...eslintPluginReactHooks.configs.recommended.rules,
    },
  },

Resources

  • https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687

Proof it works

I've confirmed this by having a code that should error, and saw the error:

  const [first, setfirst] = useState("");
  useEffect(() => {
    console.log(first);
  }, []);
8:6  warning  React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
Answer from Ben Butterworth on Stack Overflow
🌐
npm
npmjs.com › package › eslint-plugin-react
eslint-plugin-react - npm
This plugin exports a recommended configuration that enforces React good practices. To enable this configuration use the extends property in your .eslintrc config file:
      » npm install eslint-plugin-react
    
Published   Apr 03, 2025
Version   7.37.5
Author   Yannick Croissant
🌐
GitHub
github.com › jsx-eslint › eslint-plugin-react
GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint · GitHub
This plugin exports a recommended configuration that enforces React good practices. To enable this configuration use the extends property in your .eslintrc config file:
Starred by 9.3K users
Forked by 2.7K users
Languages   JavaScript
Top answer
1 of 4
10

When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.

The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:

import { fixupPluginRules } from "@eslint/compat";

  // Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config, 
  // because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
  // Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
  {
    plugins: {
      "react": reactPlugin, // remove this if you already have another config object that adds the react plugin
      "react-hooks": fixupPluginRules(eslintPluginReactHooks),
    },
    rules: {
      ...eslintPluginReactHooks.configs.recommended.rules,
    },
  },

Resources

  • https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687

Proof it works

I've confirmed this by having a code that should error, and saw the error:

  const [first, setfirst] = useState("");
  useEffect(() => {
    console.log(first);
  }, []);
8:6  warning  React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
2 of 4
4

[email protected] was released a few weeks ago with "stable" eslint v9 support. If you can upgrade, then see https://github.com/facebook/react/issues/28313#issuecomment-2408157792 for a sample configuration for now.

Also, follow this thread if interested in documentation refresh

🌐
React
react.dev › reference › eslint-plugin-react-hooks
eslint-plugin-react-hooks – React
This plugin helps you catch violations of React’s rules at build time, ensuring your components and hooks follow React’s rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn’t adopted the compiler yet.
🌐
npm
npmjs.com › package › eslint-plugin-react-hooks
eslint-plugin-react-hooks - npm
If you want to try bleeding edge experimental compiler rules, use recommended-latest. // eslint.config.js import reactHooks from 'eslint-plugin-react-hooks'; import { defineConfig } from 'eslint/config'; export default defineConfig([ reactHooks.configs.flat['recommended-latest'], ]);
      » npm install eslint-plugin-react-hooks
    
Published   Oct 24, 2025
Version   7.0.1
Homepage   https://react.dev/
🌐
Reddit
reddit.com › r/reactjs › what eslint rules you recommend?
r/reactjs on Reddit: What eslint rules you recommend?
February 21, 2025 -

Hey all, I am in the process of creating my own eslint version 9 set of rules with a flat config for the first time and I am wondering what you guys are using or recommending as a must have?

I use Typescript with React so thought to definitely include eslint-plugin-react and typescript-eslint. What else? I saw there is sonar eslint too but this one seems not so popular?

Do you have any "gems" that are not enabled by default or not popular but still a great addition?

I also see that many rules can be customized a bit, do you recommend that or rather not?

Really curious and interested about your experience on this, thanks!

🌐
LogRocket
blog.logrocket.com › home › 12 essential eslint rules for react
12 essential ESLint rules for React - LogRocket Blog
June 4, 2024 - This will cause ESLint to report errors about React not being in scope (for more details, see the rule react/react-in-jsx-scope below). If this applies to your application, you’ll need to add plugin:react/jsx-runtime to your extends list: { ... other ESLint config extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended' ] }
Find elsewhere
🌐
npm
npmjs.com › package › @eslint-react › eslint-plugin
@eslint-react/eslint-plugin - npm
recommended-type-checked Same as the recommended-typescript preset but enables additional rules that require type information. strict-typescript Same as the strict preset but disables rules that can be enforced by TypeScript. strict-type-checked ...
      » npm install @eslint-react/eslint-plugin
    
Published   Feb 14, 2026
Version   2.13.0
Author   Rel1cx
🌐
Tim James
timjames.dev › blog › the-best-eslint-rules-for-react-projects-30i8
The Best ESLint Rules for React Projects | Tim James
Hi, I'm Tim William James, a full-stack developer from Canberra, Australia. My core technologies include TypeScript, React, and AWS.
🌐
GitHub
github.com › Rel1cx › eslint-react
GitHub - Rel1cx/eslint-react: 4-7x faster, composable ESLint rules for React and friends.
recommended-type-checked Same as the recommended-typescript preset but enables additional rules that require type information. strict-typescript Same as the strict preset but disables rules that can be enforced by TypeScript. strict-type-checked ...
Starred by 490 users
Forked by 39 users
Languages   TypeScript 80.1% | MDX 19.3% | TypeScript 80.1% | MDX 19.3%
🌐
Medium
medium.com › @RossWhitehouse › setting-up-eslint-in-react-c20015ef35f7
Setting up ESLint in React
April 13, 2018 - Alternatively if you're running ESLint locally, we run npm install eslint-plugin-react --save-dev. This will install the plugin we need, but we need to tell ESLint that we want this plugin to help us out. In our ESLint config file, we just need a few extra lines. "extends": [ "eslint:recommended", "plugin:react/recommended" ]
🌐
freeCodeCamp
freecodecamp.org › news › how-to-add-eslint-to-your-react-project
How to Add ESLint to Your React Project
August 8, 2023 - The above configuration sets up ESLint to work with React and React Hooks using the recommended configurations. You can add or customize rules according to your project's specific requirements. Created the.eslintrc.json file and added the configuration that allows ESLint to work with React.
🌐
Better Programming
betterprogramming.pub › 4-essential-eslint-plugins-you-need-in-your-react-setup-824b419ce598
4 Essential ESLint Plugins You Need in Your React Setup | by Roberto ...
March 16, 2020 - 4 Essential ESLint Plugins You Need in Your React Setup Focus on coding and let them help you with the rest Along the coding journey, I have learned how a proper setup environment can boost your …
🌐
Next.js
nextjs.org › docs › app › api-reference › config › eslint
Configuration: ESLint | Next.js
2 weeks ago - Next.js provides an ESLint configuration package, eslint-config-next, that makes it easy to catch common issues in your application. It includes the @next/eslint-plugin-next plugin along with recommended rule-sets from eslint-plugin-react and eslint-plugin-react-hooks.
🌐
GitHub
github.com › facebook › react › blob › main › packages › eslint-plugin-react-hooks › README.md
react/packages/eslint-plugin-react-hooks/README.md at main · facebook/react
If you want to try bleeding edge experimental compiler rules, use recommended-latest. // eslint.config.js import reactHooks from 'eslint-plugin-react-hooks'; import { defineConfig } from 'eslint/config'; export default defineConfig([ reactHooks.configs.flat['recommended-latest'], ]);
Author   facebook
🌐
Scaler
scaler.com › home › topics › react › eslint plugin react
ESLint Plugin React - Scaler Topics
May 4, 2023 - Note: These configurations enable JSX in languageOptions and import the eslint-plugin-react. parserOptions. Plugin: protocol, such as plugin:react/recommended, is no longer valid in the new configuration system.