Search code examples
reactjsreact-hookseslintgatsbyeslintrc

Enable react-hooks/exhaustive-deps in Gatsby


How can I enable react-hooks/exhaustive-deps warnings in Gatsby? My question is about Gatsby projects, I have no problem in React projects

I know that eslint-plugin-react-hooks is installed.In my .eslintrc file I added these changes but not working

  1. in rules I added "react-hooks/exhaustive-deps": "warn",
  2. In plugins I added "react-hooks",

Solution

  • Here you can find a configuration I'm using with exhaustive-deps and it's working. Summarized it looks like:

    module.exports = {
      globals: {
        __PATH_PREFIX__: true
      },
      root: true,
      rules: {
        'react-hooks/rules-of-hooks': `warn`,
        'react-hooks/exhaustive-deps': `warn`,
        'react/react-in-jsx-scope': `off`,
      },
      env: {
        'amd': true,
        'browser': true,
        'commonjs': true,
        'es6': true,
        'jest': true,
        'node': true
      },
      extends: [
        `react-app`,
        `eslint:recommended`,
        `plugin:react/recommended`
      ],
      parser: `babel-eslint`,
      parserOptions: {
        'ecmaVersion': 2020,
        'sourceType': `module`,
        'ecmaFeatures': {
          'jsx': true,
          'impliedStrict': true
        }
      },
      plugins: [
        `react`,
        `react-hooks`,
        `babel`,
        `promise`
      ],
      settings: {
        'react': {
          'version': `detect`
        }
      }
    };
    

    Make sure your .eslintignore is not ignoring your source files and your IDE is using the ESLint configuration by default.