gnowland/eslint-plugin-react-hooks-unreliable-deps

Extends ESLint rules for React Hooks to check for potential reference equality issues in dependency arrays

eslint-plugin-react-hooks-unreliable-deps

This is a companion ESLint plugin for eslint-plugin-react-hooks to warn about potential issues arising from reference equality in React Hooks API dependency arrays.

Installation

Assuming you already have ESLint installed, run:

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

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

Then extend the recommended eslint config:

{
  "extends": [
    // ...
    "plugin:react-hooks-unreliable-deps/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-unreliable-deps"
  ],
  "rules": {
    // ...
    "react-hooks-unreliable-deps/reference-deps": ["warn", {
      "avoidObjects": true
    }]
  }
}

Advanced Configuration

reference-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-unreliable-deps/reference-deps": ["warn", {
      "additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)",
      "avoidObjects": true
    }]
  }
}

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.

Explanation

Please refer to this wonderful treatise Object & Array Dependencies in the React useEffect Hook to learn more about the impetus behind this rule.

License

This project was forked from facebook/react/.../eslint-plugin-react-hooks and is inherently licensed under MIT.

Development

Clone the repository and run npm install to initialize. Run npm run build to create the build packages.

eslint-plugin-react-hooks-unreliable-deps's Issues

Please submit feedback to the official PR request facebook/react#24636

facebook/react#24636

[bug] false trigger for `primitive` states that are passed from parent component

if I pass a primitive state from a parent component to child component and use that state in useEffect, your eslint rules triggers a false error: React Hook useEffect has an object in its dependency array: 'hover'. Non-primitive dependencies can result in triggering the callback unnecessarily due to referential equality comparison. Consider destructuring the object outside the useEffect call or using property accessors to refer to primitive values within the dependency array.eslint[react-hooks-unreliable-deps/reference-deps](https://www.benmvp.com/blog/object-array-dependencies-react-useEffect-hook/)