diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md index d7a3e7d39cdee..0dc9a6f633f9f 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 c9ba00f2139f2..dd0fc0f2165ea 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js @@ -535,6 +535,16 @@ const tests = { `, options: [{additionalHooks: 'useAnotherEffect'}], }, + { + code: normalizeIndent` + function MyComponent(props) { + useCustomEffectExtended(() => { + console.log(props.foo); + }, []); + } + `, + options: [{additionalHooks: '^useCustomEffect$'}], + }, { code: normalizeIndent` function MyComponent(props) { @@ -3665,6 +3675,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() {