diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md index e3b7d40431ea..5134e82a238c 100644 --- a/packages/eslint-plugin-react-hooks/README.md +++ b/packages/eslint-plugin-react-hooks/README.md @@ -58,7 +58,7 @@ This option accepts a regex to match the names of custom Hooks that have depende "rules": { // ... "react-hooks/exhaustive-deps": ["warn", { - "additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)" + "additionalHooks": "^(useMyCustomHook|useMyOtherCustomHook)$" }] } } diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js index a26a5e19b2f2..c1993922fe16 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js @@ -532,6 +532,16 @@ const tests = { `, options: [{additionalHooks: 'useAnotherEffect'}], }, + { + code: normalizeIndent` + function MyComponent(props) { + useCustomEffectExtended(() => { + console.log(props.foo); + }, []); + } + `, + options: [{additionalHooks: '^useCustomEffect$'}], + }, { code: normalizeIndent` function MyComponent(props) { @@ -3613,6 +3623,43 @@ const tests = { }, ], }, + { + code: normalizeIndent` + function MyComponent(props) { + useCustomEffect(() => { + console.log(props.foo); + }, []); + + useCustomEffectExtended(() => { + console.log(props.foo); + }, []); + } + `, + options: [{additionalHooks: '^useCustomEffect$'}], + errors: [ + { + message: + "React Hook useCustomEffect has a missing dependency: 'props.foo'. " + + 'Either include it or remove the dependency array.', + suggestions: [ + { + desc: 'Update the dependencies array to be: [props.foo]', + output: normalizeIndent` + function MyComponent(props) { + useCustomEffect(() => { + console.log(props.foo); + }, [props.foo]); + + useCustomEffectExtended(() => { + console.log(props.foo); + }, []); + } + `, + }, + ], + }, + ], + }, { code: normalizeIndent` function MyComponent() {