Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wogns3623/eslint-plugin-better-exhaustive-deps
Eslint plugin for react hooks exhaustive-deps check with static value tracking
https://github.com/wogns3623/eslint-plugin-better-exhaustive-deps
eslint eslint-plugin exhaustive-deps react react-hooks
Last synced: 1 day ago
JSON representation
Eslint plugin for react hooks exhaustive-deps check with static value tracking
- Host: GitHub
- URL: https://github.com/wogns3623/eslint-plugin-better-exhaustive-deps
- Owner: wogns3623
- License: mit
- Created: 2022-05-13T10:35:47.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T15:09:04.000Z (18 days ago)
- Last Synced: 2024-11-10T08:51:58.214Z (5 days ago)
- Topics: eslint, eslint-plugin, exhaustive-deps, react, react-hooks
- Language: JavaScript
- Homepage:
- Size: 35.5 MB
- Stars: 9
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Better react exhaustive-deps eslint plugin with static variable check
## Installation
```bash
yarn add -D @wogns3623/eslint-plugin-better-exhaustive-deps
```
or
```bash
pnpm i -D @wogns3623/eslint-plugin-better-exhaustive-deps
```
or
```bash
npm i -D @wogns3623/eslint-plugin-better-exhaustive-deps
```
## Usage
To use this plugin, you must disable original `react-hooks/exhaustive-deps` rule
```javascript
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.
```javascript
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.
```javascript
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](https://github.com/grncdr)'s code
> [https://github.com/facebook/react/issues/16873#issuecomment-536346885](https://github.com/facebook/react/issues/16873#issuecomment-536346885)
## TODO
- [X] Check callback generated by useCallback is immutable
- [ ] 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