Better react exhaustive-deps eslint plugin

Installation

yarn add -D @wogns3623/eslint-plugin-better-exhaustive-deps

or

npm i -D @wogns3623/eslint-plugin-better-exhaustive-deps

Usage

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

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

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 = {
  // ...
  plugins: ["@wogns3623/better-exhaustive-deps"],
  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 = {
// ...
  plugins: ["@wogns3623/better-exhaustive-deps"],
  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
• [ ] Report error if static(stable) value from staticHook is in deps