FG
💻 Software🌐 Web & Full-Stack

eslint-plugin-react-hooks & "Flat Config" (ESLint 9)

Fresh3 days ago
Mar 14, 20260 views
Confidence Score95%
95%

Problem

👋 Coming over from https://github.com/eslint/eslint/issues/18093: ESLint is migrating to a new "flat config" format that will be the default in ESLint v9. It doesn't look like `eslint-plugin-react-hooks` has documented support yet. But, based on searching around (e.g. https://github.com/vercel/next.js/discussions/49337), ESLint v9 is _basically_ supported if you wire it up manually in your config: [code block] Most community plugins provide a more convenient wrapper. For example, `eslint-plugin-jsdoc` provides a `jsdoc.configs['flat/recommended']` object: [code block] Would the React team be open to a PR adding in a preset object like that? And either way, updating the docs on https://www.npmjs.com/package/eslint-plugin-react-hooks? Note: this was also filed as https://github.com/reactjs/react.dev/issues/6430. I'm posting this issue here as a reference & cross-linking it to the table in https://github.com/eslint/eslint/issues/18093. If there's anything technical blocking the extension from working with flat configs, please let us know - we'd be happy to try to help! 💜 Additional resources: Configuration Migration Guide _(edit)_ Plugin Migration Guide * Blog posts on the new config system: Part 1: Background, Part 2: Introduction to flat config _(sorry for not using the issue templates - I wasn't sure whether this would count as a bug)_

Unverified for your environment

Select your OS to check compatibility.

2 Fixes

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Add Flat Config Support for eslint-plugin-react-hooks

Medium Risk

The issue arises because the 'eslint-plugin-react-hooks' does not currently support the new flat config format introduced in ESLint v9. This prevents users from easily integrating the plugin with the new configuration system, leading to potential linting issues in React applications.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Create a Flat Config Preset

    Implement a new preset object in the 'eslint-plugin-react-hooks' that aligns with the flat config format. This will allow users to easily integrate the plugin without needing extensive manual configuration.

    javascript
    module.exports = {
  configs: {
    'flat/recommended': {
      plugins: ['react-hooks'],
      rules: {
        'react-hooks/rules-of-hooks': 'error',
        'react-hooks/exhaustive-deps': 'warn',
      },
    },
  },
};
  2. 2

    Update Documentation

    Revise the documentation on npm and GitHub to include instructions on how to use the new flat config preset. Ensure that examples are clear and demonstrate how to integrate the preset into a user's ESLint configuration.

    javascript
    npm install eslint-plugin-react-hooks --save-dev

// .eslintrc.cjs
module.exports = {
  extends: ['plugin:react-hooks/flat/recommended'],
};
  3. 3

    Test the New Configuration

    Run ESLint with the new flat config preset to ensure that it works as expected. Create a sample React project and validate that the rules are applied correctly without any linting errors.

    bash
    npx eslint .
  4. 4

    Submit a Pull Request

    Once the preset and documentation updates are complete, submit a pull request to the 'eslint-plugin-react-hooks' repository to merge the changes. Include a description of the changes and how they improve compatibility with ESLint v9.

Validation

Confirm the fix by installing the updated version of 'eslint-plugin-react-hooks', using the flat config preset in a sample project, and running ESLint to ensure no errors occur and that the rules are enforced correctly.

Sign in to verify this fix

1 low-confidence fix
Unverified Fix
New Fix – Awaiting Verification

Add Flat Config Support for eslint-plugin-react-hooks

Medium Risk

The eslint-plugin-react-hooks does not currently support ESLint's new flat config format, which is being adopted in ESLint v9. This lack of support leads to configuration issues when trying to integrate the plugin with projects using the new flat config system.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Create a Custom Flat Config for React Hooks

    Manually create a flat config file that integrates eslint-plugin-react-hooks. This involves importing the plugin and defining the rules you want to enforce.

    javascript
    import { defineConfig } from 'eslint-define-config';
import reactHooks from 'eslint-plugin-react-hooks';

export default defineConfig({
  plugins: ['react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
    'react-hooks/exhaustive-deps': 'warn' // Checks effect dependencies
  }
});
  2. 2

    Update ESLint Configuration

    Ensure your ESLint configuration file (e.g., .eslintrc.js) is updated to use the new flat config format. Remove any old configurations that may conflict with the new setup.

    javascript
    module.exports = {
  extends: './path/to/your/flat-config.js',
};
  3. 3

    Test the Configuration

    Run ESLint on your project to confirm that the new flat config is working correctly with the react-hooks plugin. Look for any errors or warnings related to hooks usage.

    bash
    npx eslint .
  4. 4

    Document the Custom Config

    Update your project documentation to include instructions on how to use the custom flat config for eslint-plugin-react-hooks. This will help other developers in your team understand the setup.

    markdown
    ### ESLint Flat Config Setup

To use eslint-plugin-react-hooks with ESLint v9, follow these steps:
1. Create a flat config file as shown above.
2. Update your ESLint configuration to extend this file.
3. Run ESLint to check for hook rule violations.
  5. 5

    Submit a Pull Request

    Consider contributing back to the eslint-plugin-react-hooks repository by submitting a pull request that adds support for a preset object similar to other plugins. This can help the community and improve future compatibility.

    markdown
    Create a PR in the eslint-plugin-react-hooks repository with your proposed changes.

Validation

To confirm the fix worked, run ESLint on your project and ensure there are no errors related to the react-hooks rules. Additionally, check that the ESLint output reflects the new configuration settings.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

reactjavascriptcomponent:-eslint-rules