Bug: Cannot use **use...Effect** names for custom hooks definition

[japutko]

I had following code:

export const useSummaryHeaderActionsEffect = (): void => {
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchAction);
    }, [dispatch]);
};

which is called in component like:

export const SummaryHeader: FC = () => {
    useSummaryHeaderActionsEffect();
    ...
}

and I kept receiving this error on lint (some content anonymised):

TypeError: Cannot read property 'type' of undefined
Occurred while linting ...SummaryHeader.tsx:9
    at visitCallExpression (node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:823:24)
    at node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (node_modules/eslint/lib/linter/node-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors (node_modules/eslint/lib/linter/node-event-generator.js:283:22)
    at NodeEventGenerator.enterNode (node_modules/eslint/lib/linter/node-event-generator.js:297:14)
    at CodePathAnalyzer.enterNode (node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:634:23)
    at node_modules/eslint/lib/linter/linter.js:936:32
    at Array.forEach (<anonymous>)
    at runRules (node_modules/eslint/lib/linter/linter.js:931:15)
    at Linter._verifyWithoutProcessors (node_modules/eslint/lib/linter/linter.js:1157:31)
    at Linter._verifyWithConfigArray (node_modules/eslint/lib/linter/linter.js:1255:21)
    at Linter.verify (node_modules/eslint/lib/linter/linter.js:1210:25)
    at Linter.verifyAndFix (node_modules/eslint/lib/linter/linter.js:1400:29)
    at verifyText (node_modules/eslint/lib/cli-engine/cli-engine.js:230:48)
    at CLIEngine.executeOnFiles (node_modules/eslint/lib/cli-engine/cli-engine.js:798:28)
    at Object.execute (node_modules/eslint/lib/cli.js:212:111)
    at Object.<anonymous> (node_modules/eslint/bin/eslint.js:107:28)
    .
    .
    .
{
  killed: false,
  code: 2,
  signal: null,
  cmd: 'eslint --quiet SummaryHeader.tsx'
}

until I changed the name of my custom hook from useSummaryHeaderActionsEffect to useSummaryHeaderActionsOnMount.

So obviously name pattern use...Effect got the fella confused when doing his job.

It doesn't seem to be a behaviour by design, otherwise I'd expect proper ESLint hint saying I'm using not-allowed name pattern.

React version:
"react": "16.13.1",
"@typescript-eslint/eslint-plugin": "2.26.0",
"eslint-plugin-react-hooks": "4.0.0",
"eslint": "6.8.0",

The current behavior

Cannot use name pattern use...Effect for custom hooks.

The expected behavior

It's possible to use name pattern use...Effect for custom hooks or eslint-plugin-react-hooks warns you it is not desired.

[iosh]

i read the react-redux hooks document

<button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
 </button>

the dispatch parameter is a object and the type attribute is required, you can check the fetchAction.

[gaearon]

We're going to revert #18580 which will fix this too.

[gaearon]

Fixed in eslint-plugin-react-hooks@4.0.3.