eslint-plugin-react-hooks

What is eslint-plugin-react-hooks?

The eslint-plugin-react-hooks package is an ESLint plugin that enforces the Rules of Hooks for React. It helps developers to follow the best practices and avoid common pitfalls when using hooks in React components.

What are eslint-plugin-react-hooks's main functionalities?

Rules of Hooks

This feature enforces the rules of hooks, ensuring that hooks are called in the same order on every render and not inside conditions, loops, or nested functions.

/* eslint react-hooks/rules-of-hooks: 'error' */
const MyComponent = () => {
  if (condition) {
    const [value, setValue] = useState(0); // This will cause an error
  }
  return <div>{value}</div>;
};

Exhaustive Dependencies

This feature ensures that all dependencies used inside useEffect, useCallback, and useMemo are properly specified, helping to avoid stale closures and other related bugs.

/* eslint react-hooks/exhaustive-deps: 'warn' */
useEffect(() => {
  // Should include dependencies used inside the effect
}, []); // This will cause a warning if dependencies are omitted

Other packages similar to eslint-plugin-react-hooks

eslint-plugin-react

This package includes linting rules for React and JSX. It is broader in scope than eslint-plugin-react-hooks, covering a wide range of React best practices and potential errors, not limited to hooks.

eslint-plugin-hooks

This is a less popular and potentially less maintained alternative to eslint-plugin-react-hooks. It may offer similar functionality but does not have the same level of community support or frequent updates.

README

eslint-plugin-react-hooks

This ESLint plugin enforces the Rules of Hooks.

It is a part of the Hooks API for React.

Installation

Note: If you're using Create React App, please use react-scripts >= 3 instead of adding it directly.

Assuming you already have ESLint installed, run:

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

# yarn
yarn add eslint-plugin-react-hooks --dev

Legacy Config (.eslintrc)

If you are still using ESLint below 9.0.0, please continue to use recommended-legacy. To avoid breaking changes, we still support recommended as well, but note that this will be changed to alias the flat recommended config in v6.

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

Flat Config (eslint.config.js)

For ESLint 9.0.0 and above users, add the recommended-latest config.

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

export default [
  // ...
  reactHooks.configs['recommended-latest'],
];

Custom Configuration

If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:

Legacy Config (.eslintrc)

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Flat Config (eslint.config.js)

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

export default [
  {
    files: ['**/*.{js,jsx}'],
    plugins: { 'react-hooks': reactHooks },
    // ...
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
    }
  },
];

Advanced Configuration

exhaustive-deps can be configured to validate dependencies of custom Hooks with the additionalHooks option. This option accepts a regex to match the names of custom Hooks that have dependencies.

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
    }]
  }
}

We suggest to use this option very sparingly, if at all. Generally saying, we recommend most custom Hooks to not use the dependencies argument, and instead provide a higher-level API that is more focused around a specific use case.

Valid and Invalid Examples

Please refer to the Rules of Hooks documentation to learn more about this rule.

License

MIT

Changelog

15.2.0 (July 1, 2016)

React

• Add error codes to production invariants, with links to the view the full error text. (@keyanzhang in #6948)
• Include component stack information in PropType validation warnings. (@troydemonbreun in #6398, @sophiebits in #6771)
• Include component stack information in key warnings. (@keyanzhang in #6799)
• Stop validating props at mount time, only validate at element creation. (@keyanzhang in #6824)
• New invariant providing actionable error in missing instance case. (@yungsters in #6990)
• Add React.PropTypes.symbol to support ES2015 Symbols as props. (@puradox in #6377)
• Fix incorrect coercion of ref or key that are undefined in development (@gaearon in #6880)
• Fix a false positive when passing other element’s props to cloneElement (@ericmatthys in #6268)
• Warn if you attempt to define childContextTypes on a functional component (@Aweary in #6933)

React DOM

• Add warning for unknown properties on DOM elements. (@jimfb in #6800, @gm758 in #7152)
• Properly remove attributes from custom elements. (@grassator in #6748)
• Fix invalid unicode escape in attribute name regular expression. (@nbjahan in #6772)
• Add onLoad handling to <link> element. (@roderickhsiao in #6815)
• Add onError handling to <source> element. (@wadahiro in #6941)
• Handle value and defaultValue more accurately in the DOM. (@jimfb in #6406)
• Fix events issue in environments with mutated Object.prototype. (@Weizenlol in #6886)
• Fix issue where is="null" ended up in the DOM in Firefox. (@darobin in #6896)
• Improved performance of text escaping by using escape-html. (@aickin in #6862)
• Fix issue with dangerouslySetInnerHTML and SVG in Internet Explorer. (@joshhunt in #6982)
• Fix issue with <textarea> placeholders. (@jimfb in #7002)
• Fix controlled vs uncontrolled detection of <input type="radio"/>. (@jimfb in #7003)
• Improve performance of updating text content. (@trueadm in #7005)
• Ensure controlled <select> components behave the same on initial render as they do on updates. (@yiminghe in #5362)

React Perf Add-on

• Add isRunning() API. (@nfcampos in #6763)
• Improve accuracy of lifecycle hook timing. (@gaearon in #6858)
• Fix internal errors when using ReactPerf with portal components. (@gaearon in #6860)
• Fix performance regression. (@sophiebits in #6770)
• Add warning that ReactPerf is not enabled in production. (@sashashakun in #6884)

React CSSTransitionGroup Add-on

• Fix timing issue with null node. (@keyanzhang in #6958)

React Native Renderer

• Dependencies on React Native modules use CommonJS requires instead of providesModule. (@davidaurelio in #6715)