jcayabyab/eslint-plugin-react-hooks

This ESLint plugin adds two additional options to the original eslint-plugin-react-hooks:

1. knownStableValues: If commonly-used variables are known to be stable (e.g., dispatch from Redux), you can specify them as RegEx.
2. markStableValuesAsUnnecessary: Stable values such as set functions returned from React.setState don't do anything when included in the dependency array, this allows you to enforce that they are not included in the dependency array.

knownStableValues

Here is an example of how to use the knownStableValues option:

{
  "rules": {
    "@jcayabyab/react-hooks/exhaustive-deps": ["warn", {
      "knownStableValues": "^(dispatch|createMixPanelTrackingCallback)$"
    }]
  }
}

Correct:

import { useDispatch } from 'react-redux';

import type { AppDispatch } from '../index';

const useAppDispatch = useDispatch.withTypes<AppDispatch>();

function MyComponent() {
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(someAction());
  }, []); // The original rule would flag this as a warning with a missing dependency
}

const mixpanelTrackNewFolder = useCallback(
  createMixPanelTrackingCallback('Folders.Create', {
    component: 'FolderModal',
    element: 'Button',
    action: 'Click',
  }),
  []
);

markStableValuesAsUnnecessary

Here is an example of how to use the markStableValuesAsUnnecessary option:

{
  "rules": {
    "@jcayabyab/react-hooks/exhaustive-deps": ["warn", {
      "markStableValuesAsUnnecessary": true
    }]
  }
}

Correct:

function MyComponent() {
  const [foo, setFoo] = useState(0);

  useEffect(() => {
    setFoo(prev => prev + 1);
  }, []);
}

Incorrect:

function MyComponent() {
  const [foo, setFoo] = useState(0);

  useEffect(() => {
    setFoo(prev => prev + 1);
  }, [setFoo]); // "React Hook useEffect has an unnecessary dependency: 'setFoo'. Either exclude it or remove the dependency array."
}

Below is the original documentation.

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