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
npm
npmjs.com › package › eslint-plugin-react
eslint-plugin-react - npm
April 3, 2025 - React specific linting rules for ESLint. Latest version: 7.37.5, last published: a year ago. Start using eslint-plugin-react in your project by running `npm i eslint-plugin-react`. There are 16980 other projects in the npm registry using eslint-plugin-react.
» npm install eslint-plugin-react
Published Apr 03, 2025
Version 7.37.5
Author Yannick Croissant
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.
reactjs - Integration of eslint-plugin-react-hooks/recommended with eslint.config.js - Stack Overflow
I struggle a lot to configure eslint-plugin-react-hooks/recommended using eslint's new configuration file (eslint.config.js). Using the previous eslint configuration (.eslintrc.js) would have resul... More on stackoverflow.com
How to use eslint-plugin-react and eslint-plugin-react-hooks, just for myself?
You don't normally, because its better for the code to be consistent among developers. I would advice that you, instead aim to convince your team to install it for the project. If you still want to do it, you could install it, develop and then remove it from your package.json before commiting. And maybe create a simple script file (AI could do this for you) to do this for you. More on reddit.com
7
6
January 10, 2025What ESLint Plugins Do You Recommend When Using NextJs?
Here is my ESLint plugins I use for all my NextJS projects: https://github.com/ixartz/Next-js-Boilerplate/blob/main/package.json#L85-L102 There are 18 plugins. I also use ESLint plugins for testing part: Jest, Playwright, Storybook, etc. And here you can find how I configure everything: https://github.com/ixartz/Next-js-Boilerplate/blob/main/.eslintrc More on reddit.com
27
14
February 20, 2024What eslint rules you recommend?
eslint-plugin-unicorn is always a great choice. What I like to do with core ESLint, or any plugin I use, is turn on every rule. I often find that this helps me find some rules that weren't turned on by default, that I probably wouldn't have found otherwise. From there, if I see a rule that I dislike, I either check to see if it can be configured in a way that I like, or I turn it off otherwise. More on reddit.com
68
40
February 21, 2025Videos
09:33
22. Install ESLint in the React Project and configure React Plugin ...
09:59
React Setup - 05 - ESLint & Prettier - YouTube
03:03
What Is ESLint Used For In React? - Next LVL Programming - YouTube
ESLint Configuration • React JS Programming • React ...
02:25
ERROR in [eslint] Plugin "react" was conflicted between "package.json ...
00:18
React version not specified in eslint plugin react - YouTube
GitHub
github.com › yannickcr › eslint-plugin-react › blob › master › README.md
eslint-plugin-react/README.md at master · jsx-eslint/eslint-plugin-react
React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.
Author jsx-eslint
npm
npmjs.com › package › @eslint-react › eslint-plugin
@eslint-react/eslint-plugin - npm
2 weeks ago - A unified plugin that combines all individual plugins from the eslint-react monorepo into one.. Latest version: 3.0.0, last published: 9 days ago. Start using @eslint-react/eslint-plugin in your project by running `npm i @eslint-react/eslin...
» npm install @eslint-react/eslint-plugin
GitHub
github.com › jsx-eslint › eslint-plugin-react
GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint · GitHub
React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.
Starred by 9.3K users
Forked by 2.7K users
Languages JavaScript
npm
npmjs.com › package › eslint-plugin-react-hooks
eslint-plugin-react-hooks - npm
The official ESLint plugin for React which enforces the Rules of React and other best practices.
» npm install eslint-plugin-react-hooks
Published Oct 24, 2025
Version 7.0.1
Repository https://github.com/facebook/react
Homepage https://react.dev/
Eslint-react
eslint-react.xyz
ESLint React
4-7x faster composable ESLint rules for React and friends.
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
Medium
medium.com › @RossWhitehouse › setting-up-eslint-in-react-c20015ef35f7
Setting up ESLint in React
April 13, 2018 - In our terminal again, we need to npm install -g eslint-plugin-react. 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.
Reddit
reddit.com › r/reactjs › how to use eslint-plugin-react and eslint-plugin-react-hooks, just for myself?
r/reactjs on Reddit: How to use eslint-plugin-react and eslint-plugin-react-hooks, just for myself?
January 10, 2025 -
Forgive me if this question is poorly worded or misinformed; I'm new to using NPM.
My team has eslint installed as a dev dependency in our project to ensure high code quality. However, we don't use the eslint-plugin-react or eslint-plugin-react-hooks packages. I'd like to install them so that I can follow the best React practices when coding, without actually making changes to the official dependencies used by all developers. Is there a way to go about this (eg, modify a personal "packages.json" that is separate from the project's but will still lint my company's project)?
Reddit
reddit.com › r/reactjs › what eslint plugins do you recommend when using nextjs?
r/reactjs on Reddit: What ESLint Plugins Do You Recommend When Using NextJs?
February 20, 2024 -
I've recently been looking at the Bullet Proof React repository and noticed that they use a few ESLint plugins. I've only ever used what comes with Next. What plugins do you use and recommend?
Top answer 1 of 6
15
eslint-plugin-react eslint-plugin-react-hooks eslint-config-next typescript-eslint/eslint-plugin eslint-plugin-prettier sort-imports or eslint-plugin-simple-import-sort eslint-plugin-boundaries And plugins for tests (RTL, Cypress etc.) if you want to enforce lint on your tests and you're using these libs.
2 of 6
9
Here is my ESLint plugins I use for all my NextJS projects: https://github.com/ixartz/Next-js-Boilerplate/blob/main/package.json#L85-L102 There are 18 plugins. I also use ESLint plugins for testing part: Jest, Playwright, Storybook, etc. And here you can find how I configure everything: https://github.com/ixartz/Next-js-Boilerplate/blob/main/.eslintrc
Yarn
classic.yarnpkg.com › en › package › eslint-plugin-react
eslint-plugin-react
Fast, reliable, and secure dependency management.
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
The official ESLint plugin for React which enforces the Rules of React and other best practices.
Author facebook
LogRocket
blog.logrocket.com › home › 12 essential eslint rules for react
12 essential ESLint rules for React - LogRocket Blog
June 4, 2024 - All versions of react-scripts (one of CRA’s packages) from v3 and later utilize an inbuilt Create React App ESLint configuration which is already set up to include the eslint-plugin-react-hooks plugin (as well as the handy jsx-a11y plugin).
npm
npmjs.com › eslint-plugin-react-dom
eslint-plugin-react-dom - npm
2 weeks ago - ESLint React's ESLint plugin for DOM related rules.. Latest version: 2.13.0, last published: 10 days ago. Start using eslint-plugin-react-dom in your project by running `npm i eslint-plugin-react-dom`. There are 14 other projects in the npm registry using eslint-plugin-react-dom.
» npm install eslint-plugin-react-dom
GitHub
microsoft.github.io › rnx-kit › docs › tools › eslint-plugin
eslint-plugin | React Native Developer Tools
plugin:@typescript-eslint/recommended · plugin:react-hooks/recommended · plugin:react/recommended · It also includes and enables the following rules: @react-native/platform-colors · @rnx-kit/eslint-plugin/strict extends @rnx-kit/eslint-plugin/recommended with rules that enables better tree shaking: @rnx-kit/no-const-enum ·
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!
Top answer 1 of 17
40
ESLint is quickly becoming like Webpack in terms of difficulty of setup and configuration.
2 of 17
35
eslint-plugin-unicorn is always a great choice. What I like to do with core ESLint, or any plugin I use, is turn on every rule. I often find that this helps me find some rules that weren't turned on by default, that I probably wouldn't have found otherwise. From there, if I see a rule that I dislike, I either check to see if it can be configured in a way that I like, or I turn it off otherwise.
freeCodeCamp
freecodecamp.org › news › how-to-add-eslint-to-your-react-project
How to Add ESLint to Your React Project
August 8, 2023 - npx create-react-app signup-app · And you can use the following command to set up ESLint: npm install eslint eslint-plugin-react eslint-plugin-react-hooks --save-dev ·
GitHub
github.com › Rel1cx › eslint-react
GitHub - Rel1cx/eslint-react: 4-7x faster, composable ESLint rules for React and friends.
eslint-plugin-react-rsc - Rules for React Server Components.
Starred by 490 users
Forked by 39 users
Languages TypeScript 80.1% | MDX 19.3% | TypeScript 80.1% | MDX 19.3%
GeeksforGeeks
geeksforgeeks.org › reactjs › how-to-configure-eslint-for-react-projects
How to configure ESLint for React Projects ? - GeeksforGeeks
July 23, 2025 - npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react