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

Then extend the recommended eslint config:

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

Custom Configuration

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

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "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.1.0 (May 20, 2016)

React

• Ensure we're using the latest object-assign, which has protection against a non-spec-compliant native Object.assign. (@zpao in #6681)
• Add a new warning to communicate that props objects passed to createElement must be plain objects. (@richardscarrott in #6134)
• Fix a batching bug resulting in some lifecycle methods incorrectly being called multiple times. (@sophiebits in #6650)

React DOM

• Fix regression in custom elements support. (@jscissr in #6570)
• Stop incorrectly warning about using onScroll event handler with server rendering. (@Aweary in #6678)
• Fix grammar in the controlled input warning. (@jakeboone02 in #6657)
• Fix issue preventing <object> nodes from being able to read <param> nodes in IE. (@syranide in #6691)
• Fix issue resulting in crash when using experimental error boundaries with server rendering. (@jimfb in #6694)
• Add additional information to the controlled input warning. (@borisyankov in #6341)

React Perf Add-on

• Completely rewritten to collect data more accurately and to be easier to maintain. (@gaearon in #6647, #6046)

React Native Renderer

• Remove some special cases for platform specific branching. (@sebmarkbage in #6660)
• Remove use of merge utility. (@sebmarkbage in #6634)
• Renamed some modules to better indicate usage (@javache in #6643)