eslint-plugin-react-hooks-addons

0.5.1 verified Sat Apr 25 auth: no javascript

ESLint plugin that adds the rule 'no-unused-deps' to detect unused dependencies in React Hook dependency arrays, complementing eslint-plugin-react-hooks. Current stable version is 0.5.1, released with support for ESLint v10. It flags variables in dependency arrays that are declared but not referenced inside the hook body, helping prevent unintended effect executions. Key differentiators: built-in support for static effect detection (unused deps), optional comment directive to mark intentional effect dependencies, and the ability to extend checking to custom hooks via `additionalHooks` option. It ships TypeScript types and provides both flat and legacy config.

Common errors

error ESLint: Failed to load plugin 'eslint-plugin-react-hooks-addons': Cannot find module 'eslint-plugin-react-hooks-addons' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install -D eslint-plugin-react-hooks-addons'

error ESLint: Configuration for rule 'react-hooks-addons/no-unused-deps' is invalid. Value '[object Object]' has unexpected property 'customComment'. ↓

cause The option 'customComment' was renamed to 'effectComment' in v0.3.0.

fix

Change option name from 'customComment' to 'effectComment'.

error Parsing error: The keyword 'import' is reserved ↓

cause Using import syntax in a CommonJS file without transpilation.

fix

Use require() for CommonJS or set up a build step for ESM.

Warnings

gotcha The rule only checks useEffect and useLayoutEffect by default; custom hooks need additionalHooks option. ↓

fix Add 'additionalHooks' pattern in rule options to match custom hooks.

gotcha Flat config requires ESM import, not require(). ↓

fix Use 'import reactHooksAddons from 'eslint-plugin-react-hooks-addons''.

deprecated The 'customComment' option was renamed to 'effectComment' in v0.3.0. ↓

fix Rename option 'customComment' to 'effectComment'.

gotcha Legacy config uses 'recommended-legacy' not 'recommended'. ↓

fix Use 'extends: ["plugin:react-hooks-addons/recommended-legacy"]'.

gotcha Must have eslint-plugin-react-hooks installed and configured for this plugin to be effective. ↓

fix Install both plugins: eslint-plugin-react-hooks and eslint-plugin-react-hooks-addons.

Install

npm install eslint-plugin-react-hooks-addons

yarn add eslint-plugin-react-hooks-addons

pnpm add eslint-plugin-react-hooks-addons

Imports

reactHooksAddons

wrong

const reactHooksAddons = require('eslint-plugin-react-hooks-addons')

correct

import reactHooksAddons from 'eslint-plugin-react-hooks-addons'

Default export for flat config. With CommonJS, use require() but note that ESM is preferred for flat config.

plugin in .eslintrc
wrong
```
"plugins": ["eslint-plugin-react-hooks-addons"]
```
correct
```
"plugins": ["react-hooks-addons"]
```
In legacy config, the plugin name is 'react-hooks-addons' without the prefix.
configs.recommended
wrong
```
reactHooksAddons.configs['recommended-legacy']
```
correct
```
reactHooksAddons.configs.recommended
```
Use .recommended for flat config, .recommended-legacy for legacy config.

Quickstart

Installation, both flat and legacy config setup, and a React component demonstrating the rule.

// Install: npm install -D eslint-plugin-react-hooks-addons

// Flat config (eslint.config.js):
import reactHooksAddons from 'eslint-plugin-react-hooks-addons';
export default [
  reactHooksAddons.configs.recommended
];

// Legacy config (.eslintrc):
// {
//   "extends": ["plugin:react-hooks-addons/recommended-legacy"],
//   "rules": {
//     "react-hooks-addons/no-unused-deps": "warn"
//   }
// }

// Example usage with React effect:
import { useEffect, useState } from 'react';

function Example() {
  const [user1, setUser1] = useState();
  const [user2, setUser2] = useState();

  useEffect(() => {
    fetch(`someUrl/${user1}`).then(/* ... */);
    // user2 is in deps but not used => warning!
  }, [user1, user2]);

  // Mark intentional dep:
  useEffect(() => {
    // fetch that depends on user1
  }, [user1, /* effect dep */ user2]);

  return null;
}