Better react exhaustive-deps eslint plugin with static variable check

Installation

yarn add -D @wogns3623/eslint-plugin-better-exhaustive-deps
# or
pnpm i -D @wogns3623/eslint-plugin-better-exhaustive-deps
# or
npm i -D @wogns3623/eslint-plugin-better-exhaustive-deps

Usage

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

import betterHooks from "@wogns3623/eslint-plugin-better-exhaustive-deps";

module.exports = [
  // ...
  betterHooks.configs["recommended-latest"],
];

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:@wogns3623/better-exhaustive-deps/recommended-legacy"
  ]
}

Custom Configuration

To use this plugin, you must disable original react-hooks/exhaustive-deps rule

import reactHooks from "eslint-plugin-react-hooks";
import betterHooks from "@wogns3623/eslint-plugin-better-exhaustive-deps";

export default [
  {
    files: ["**/*.{js,jsx}"],
    plugins: {
      "react-hooks": reactHooks,
      "@wogns3623/better-exhaustive-deps": betterHooks,
    },
    // ...
    rules: {
      // disable original rule
      "react-hooks/exhaustive-deps": "off",
      "@wogns3623/better-exhaustive-deps/exhaustive-deps": "warn",
    },
  },
];

Legacy Config (.eslintrc)

module.exports = {
  plugins: [
    // ...
    "@wogns3623/better-exhaustive-deps",
  ],
  rules: {
    // disable original rule
    "react-hooks/exhaustive-deps": "off",
    "@wogns3623/better-exhaustive-deps/exhaustive-deps": "warn",
  },
};

Advanced Configuration

checkMemoizedVariableIsStatic

Check variable memoized by useCallback or useMemo is static.

If Deps is empty or filled with static variable, the return value is also treated as a static variable.

module.exports = {
  // ...
  rules: {
    // disable original rule
    "react-hooks/exhaustive-deps": "off",
    "@wogns3623/better-exhaustive-deps/exhaustive-deps": [
      "warn",
      {
        checkMemoizedVariableIsStatic: true,
      },
    ],
  },
  // ...
};

staticHooks

Return values ​​registered as true are treated as static variable.

Can configure destructured value independently.

module.exports = {
  // ...
  rules: {
    // disable original rule
    "react-hooks/exhaustive-deps": "off",
    "@wogns3623/better-exhaustive-deps/exhaustive-deps": [
      "warn",
      {
        staticHooks: {
          useCustomRef: true,
          useSomething: [false, true],
          useSomethingOther: {
            value: false,
            callback: true,
          },
        },
      },
    ],
  },
  // ...
};

use grncdr's code https://github.com/facebook/react/issues/16873#issuecomment-536346885

TODO

• [x] Check callback generated by useCallback is immutable
• [x] Add test code for staticHooks
• [x] Update test code for checkMemoizedVariableIsStatic
• [ ] Create a rule to check for unnecessary static (stable) values in dependency list.
• [ ] Add presets for popular React libraries
• [ ] Add automatic inference for whether a custom hook return value is static or not
• [ ] Add deep nested object support for staticHooks
• [ ] Support glob patter matching in staticHooks