Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
japutko opened this issue May 26, 2020 · 3 comments
Closed

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

japutko opened this issue May 26, 2020 · 3 comments
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@japutko
Copy link

japutko commented May 26, 2020

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.

@japutko japutko added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label May 26, 2020
@iosh
Copy link

iosh commented May 26, 2020

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
Copy link
Collaborator

gaearon commented May 26, 2020

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

@gaearon
Copy link
Collaborator

gaearon commented May 26, 2020

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

@gaearon gaearon closed this as completed May 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

3 participants