{"id":19895,"library":"eslint-plugin-react-hooks-addons","title":"eslint-plugin-react-hooks-addons","description":"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.","status":"active","version":"0.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/szhsin/eslint-plugin-react-hooks-addons","tags":["javascript","eslint","eslint-plugin","eslintplugin","react","hook","typescript"],"install":[{"cmd":"npm install eslint-plugin-react-hooks-addons","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-hooks-addons","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-hooks-addons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - required as the runtime for the plugin","package":"eslint","optional":false}],"imports":[{"note":"Default export for flat config. With CommonJS, use require() but note that ESM is preferred for flat config.","wrong":"const reactHooksAddons = require('eslint-plugin-react-hooks-addons')","symbol":"reactHooksAddons","correct":"import reactHooksAddons from 'eslint-plugin-react-hooks-addons'"},{"note":"In legacy config, the plugin name is 'react-hooks-addons' without the prefix.","wrong":"\"plugins\": [\"eslint-plugin-react-hooks-addons\"]","symbol":"plugin in .eslintrc","correct":"\"plugins\": [\"react-hooks-addons\"]"},{"note":"Use .recommended for flat config, .recommended-legacy for legacy config.","wrong":"reactHooksAddons.configs['recommended-legacy']","symbol":"configs.recommended","correct":"reactHooksAddons.configs.recommended"}],"quickstart":{"code":"// Install: npm install -D eslint-plugin-react-hooks-addons\n\n// Flat config (eslint.config.js):\nimport reactHooksAddons from 'eslint-plugin-react-hooks-addons';\nexport default [\n  reactHooksAddons.configs.recommended\n];\n\n// Legacy config (.eslintrc):\n// {\n//   \"extends\": [\"plugin:react-hooks-addons/recommended-legacy\"],\n//   \"rules\": {\n//     \"react-hooks-addons/no-unused-deps\": \"warn\"\n//   }\n// }\n\n// Example usage with React effect:\nimport { useEffect, useState } from 'react';\n\nfunction Example() {\n  const [user1, setUser1] = useState();\n  const [user2, setUser2] = useState();\n\n  useEffect(() => {\n    fetch(`someUrl/${user1}`).then(/* ... */);\n    // user2 is in deps but not used => warning!\n  }, [user1, user2]);\n\n  // Mark intentional dep:\n  useEffect(() => {\n    // fetch that depends on user1\n  }, [user1, /* effect dep */ user2]);\n\n  return null;\n}","lang":"typescript","description":"Installation, both flat and legacy config setup, and a React component demonstrating the rule."},"warnings":[{"fix":"Add 'additionalHooks' pattern in rule options to match custom hooks.","message":"The rule only checks useEffect and useLayoutEffect by default; custom hooks need additionalHooks option.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use 'import reactHooksAddons from 'eslint-plugin-react-hooks-addons''.","message":"Flat config requires ESM import, not require().","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"Rename option 'customComment' to 'effectComment'.","message":"The 'customComment' option was renamed to 'effectComment' in v0.3.0.","severity":"deprecated","affected_versions":"<0.3.0"},{"fix":"Use 'extends: [\"plugin:react-hooks-addons/recommended-legacy\"]'.","message":"Legacy config uses 'recommended-legacy' not 'recommended'.","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"Install both plugins: eslint-plugin-react-hooks and eslint-plugin-react-hooks-addons.","message":"Must have eslint-plugin-react-hooks installed and configured for this plugin to be effective.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install -D eslint-plugin-react-hooks-addons'","cause":"Package not installed or missing from node_modules.","error":"ESLint: Failed to load plugin 'eslint-plugin-react-hooks-addons': Cannot find module 'eslint-plugin-react-hooks-addons'"},{"fix":"Change option name from 'customComment' to 'effectComment'.","cause":"The option 'customComment' was renamed to 'effectComment' in v0.3.0.","error":"ESLint: Configuration for rule 'react-hooks-addons/no-unused-deps' is invalid. Value '[object Object]' has unexpected property 'customComment'."},{"fix":"Use require() for CommonJS or set up a build step for ESM.","cause":"Using import syntax in a CommonJS file without transpilation.","error":"Parsing error: The keyword 'import' is reserved"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}