Integration of eslint-plugin-react-hooks/recommended with eslint.config.js

Question

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 result to:

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}

Sadly, I do not find the documentation that uses eslint.config.js.

My best try until now results in :

import reactHooks from "eslint-plugin-react-hooks";

export default [
{
  plugins: {
    "react-hooks": reactHooks,
  },

  rules: {
    ...reactHooks.configs.recommended.rules,
  },
},
]

Even if this works well, I'm sure that this is not the recommended way to configure it.

Thanks for your time.

Answer 1

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