https://github.com/dherault/eslint-plugin-format-react-hook-dependencies
An Eslint plugin to format React's hook dependencies properly
https://github.com/dherault/eslint-plugin-format-react-hook-dependencies
Last synced: about 1 month ago
JSON representation
An Eslint plugin to format React's hook dependencies properly
- Host: GitHub
- URL: https://github.com/dherault/eslint-plugin-format-react-hook-dependencies
- Owner: dherault
- License: mit
- Created: 2026-04-15T18:44:27.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-23T06:49:30.000Z (3 months ago)
- Last Synced: 2026-04-23T08:27:56.928Z (3 months ago)
- Language: TypeScript
- Size: 113 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# eslint-plugin-format-react-hook-dependencies
An ESLint plugin to format React hook dependencies properly.
## Installation
```bash
npm install --save-dev eslint-plugin-format-react-hook-dependencies
```
## Configuration
Add the plugin to your ESLint config (`eslint.config.js`):
```javascript
import formatReactHookDependencies from 'eslint-plugin-format-react-hook-dependencies'
export default [
// ... other configs
formatReactHookDependencies.configs.recommended,
]
```
## Rules
### `format-dependencies-array`
Enforces consistent formatting of dependency arrays in React hooks (`useMemo`, `useCallback`, `useEffect`, `useLayoutEffect`, `useImperativeHandle`).
- Dependencies must be sorted alphabetically
- If the hook call is multiline, the dependencies array must be multiline (except when empty)
**Bad:**
```javascript
// Unsorted dependencies
const memo = useMemo(() => compute(b, a), [b, a])
// Multiline hook with single-line dependencies
const memo = useMemo(() => {
return compute(a, b)
}, [a, b])
```
**Good:**
```javascript
// Sorted dependencies
const memo = useMemo(() => compute(b, a), [a, b])
// Multiline hook with multiline dependencies
const memo = useMemo(() => {
return compute(a, b)
}, [
a,
b,
])
// Multiline hook with empty dependencies is fine
useEffect(() => {
init()
}, [])
```
## License
MIT