How to configure eslint-plugin-react-hooks in eslint.config.js

[rakleed]

Starting with the next version 9, ESLint will deprecate the current eslintrc format and will default use the new flat config format (eslint.config.js). Already from version 8.2.23 you can fully use the flat config format. Still, neither the README (which is used as a description for the NPM package) nor the documentation says anything about how to configure it correctly. And also no one answered the question on StackOverflow about this. Please add this information to the documentation.

[nikitaNaredi]

My app is in CRA JS and am trying to migrate from .eslintrc to eslint.config.mjs by using the migrator. This is my eslint.config.mjs file after migration:

import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
import jsxA11Y from "eslint-plugin-jsx-a11y";
import reactHooks from "eslint-plugin-react-hooks";
import prettier from "eslint-plugin-prettier";
import react from "eslint-plugin-react";
import babelParser from "@babel/eslint-parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all,
});

export default [
    {
        ignores: [
            "src/registerServiceWorker.js",
          ],
    },
    ...fixupConfigRules(
        compat.extends(
            "airbnb",
            "plugin:jsx-a11y/recommended",
            "prettier",
            "plugin:prettier/recommended",
            "react-app",
            "eslint:recommended",
            "plugin:react/recommended",
            "plugin:react-hooks/recommended"
        )
    ),
    {
        plugins: {
            "jsx-a11y": fixupPluginRules(jsxA11Y),
            "react-hooks": fixupPluginRules(reactHooks),
            prettier: fixupPluginRules(prettier),
            react: fixupPluginRules(react),
        },

        languageOptions: {
            parser: babelParser,
            ecmaVersion: 2023,
            sourceType: "module",

            parserOptions: {
                ecmaFeatures: {
                    jsx: true,
                },

                requireConfigFile: true,
            },
        },

        rules: {
            ...reactHooks.configs.recommended.rules,
            semi: 0,
            "react/destructuring-assignment": 0,

            "react/jsx-filename-extension": [
                1,
                {
                    extensions: [".js", ".jsx"],
                },
            ],

            "react/jsx-fragments": ["off", "element"],

            "react/jsx-props-no-spreading": [
                "error",
                {
                    custom: "ignore",
                },
            ],

            "jsx-a11y/href-no-hash": "off",
            "jsx-a11y/click-events-have-key-events": 0,
            "jsx-a11y/label-has-associated-control": 0,
            "react/button-has-type": 0,
            "react/prop-types": "off",
            "default-param-last": "error",
            "no-promise-executor-return": "off",
            "react/no-unstable-nested-components": "off",

            "prettier/prettier": [
                "error",
                {
                    endOfLine: "auto",
                },
            ],

            "arrow-body-style": "off",
            "prefer-arrow-callback": "off",
            "react-hooks/rules-of-hooks": "error",
            "react-hooks/exhaustive-deps": "warn",
            "react/display-name": "off",
        },
    },
    {
        files: ["src/app/*.js"],

        rules: {
            "no-unused-expressions": "off",
            "import/no-cycle": "off",
            "no-param-reassign": "off",
        },
    },
    {
        files: [
            "src/features/**",
        ],

        rules: {
            "default-param-last": "off",
        },
    },
];

Package.json:

{
    "name": "abc",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "@reduxjs/toolkit": "^1.9.1",
        "axios": "^1.6.7",
        "classnames": "^2.3.2",
        "cross-env": "^7.0.3",
        "deepmerge": "^4.3.1",
        "delay": "^5.0.0",
        "dompurify": "^2.4.1",
        "draft-js": "^0.11.7",
        "draftjs-to-html": "^0.9.1",
        "env-cmd": "^10.1.0",
        "html-react-parser": "^3.0.4",
        "html-to-draftjs": "^1.5.0",
        "lodash": "^4.17.21",
        "pdf-lib": "^1.17.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-draft-wysiwyg": "^1.15.0",
        "react-error-overlay": "^6.0.11",
        "react-helmet-async": "^1.3.0",
        "react-pdf": "^9.1.0",
        "react-redux": "^8.0.5",
        "react-router-dom": "^6.4.5",
        "react-signature-canvas": "^1.0.6",
        "recharts": "^2.2.0",
        "repo": "0.0.15",
        "uuid": "^9.0.0"
    },
    "scripts": {
        // sdf
    },
    "devDependencies": {
        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
        "@babel/preset-env": "^7.23.9",
        "@babel/preset-react": "^7.23.3",
        "@commitlint/cli": "^19.3.0",
        "@commitlint/config-conventional": "^19.2.2",
        "@eslint/compat": "^1.1.1",
        "@eslint/eslintrc": "^3.1.0",
        "@eslint/js": "^9.11.1",
        "@faker-js/faker": "^8.4.1",
        "@nightwatch/selenium-server": "^4.5.0",
        "@playwright/test": "^1.43.1",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^14.0.0",
        "@testing-library/user-event": "^14.4.3",
        "@types/node": "^20.12.7",
        "babel-jest": "^29.7.0",
        "dotenv": "^16.4.5",
        "eslint": "^8.57.1",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-import": "^2.30.0",
        "eslint-plugin-jsx-a11y": "^6.10.0",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.36.1",
        "eslint-plugin-react-hooks": "^4.6.2",
        "husky": "^9.0.11",
        "jest": "^29.7.0",
        "jest-environment-jsdom": "^29.5.0",
        "lint-staged": "^15.2.10",
        "mini-css-extract-plugin": "^2.9.1",
        "msw": "^1.2.2",
        "prettier": "^2.8.1",
        "process": "^0.11.10",
        "react-scripts": "^5.0.1",
        "webpack": "^5.93.0",
        "webpack-cli": "^5.1.4"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "jest": {
        "moduleNameMapper": {
            "axios": "axios/dist/node/axios.cjs"
        },
    },
    "overrides": {
        "nth-check": "^2.1.1",
        "semver": "^7.6.0",
        "@babel/traverse": "^7.23.9",
        "follow-redirects": "^1.15.5"
    },
    "engines": {
        "node": "20.11.0",
        "npm": "10.2.4"
    }
}

now when am trying to build the project am getting:

Definition for rule 'react-hooks/exhaustive-deps' was not found react-hooks/exhaustive-deps. Please help.

[Neoxs]

To configure eslint-plugin-react-hooks in your eslint.config.js, you can use the following line:

...fixupConfigRules(compat.extends("plugin:react-hooks/recommended")),

However, please note that the react-hooks plugin does not yet fully support the new flat config format.

For a more detailed guide and insights into the challenges I faced during my ESLint v9 migration, you can check out my blog article:

🚀 Just completed an ESLint v9 migration, and wow… what a ride! 😵‍💫

I encountered breaking changes, weird errors, and unexpected surprises—but I documented everything to help you avoid the same pitfalls.

If you’re planning to upgrade (or still hesitating), this guide might save you some headaches:
📖 neoxs.me/blog/migration-to-eslint-v9