Bug: rules-of-hooks violation not caught by eslint plugin

Given the following code:

const createHandler = () => (event) => {
  const { t } = useTranslation()

  Alert.alert(t("title"), t("message"))
}

function MyComponent() {
  return <Button onPress={createHandler()}/>
}

the rules-of-hooks linter rule is not triggered for the createHandler as it should.
The linter rule should detect its not a react component, since it does not return any ReactElement or null.

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@pke

@pke did you resolve this issue by any chance?

No

@gaearon

This may have been an intentional case that's missed so existing code isn't falsely flagged. Assuming that any use* function is a hook, the plugin would trigger some false-positives in the ecosystem. So the plugin is probably assuming here that useTranslate is not a hook because it's neither called in another hook nor directly during render. Tracking createHandler usage would be really hard to accomplish.

Consider e.g. useFakeTimers in sinon. If this would be considered a hook by the plugin, people would probably disable it due to the noise it creates.

Maybe @gaearon can confirm this is intentional.

Does the plugin flag usage of built-in hooks inside createHandler?

Makes sense regarding existing code getting falsely flagged. I was wondering if the plugin currently has a rule for us to enable in order to capture this case. Thanks!

I simply import like this: import { useTranslation as translation } from 'react-i18next';

How is that helping solving the bug shown in this issue?

Sorry, I understood the problem to be an eslint warning in the "react-hooks/rules-of-hooks" rule for using a use* hook outside of a react component. Then I tricked eslint by renaming the import. My mistake.

Add lint tests that should fail (#28147)

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

Add lint tests that should fail (react#28147)

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

this was closed but this is still definitely an issue:

for example when using jotai it's really easy for a dev to accidentally think they can use a hook and it's not caught:

export const atomBiSavedViewExamples = atom(
  async (get) => {
   // no error here..
    const showWatershedSavedViewTemplates = useFeatureFlag(
      'myFlag'
    );
   //...etc
});

Add lint tests that should fail (#28147)

Navigation Menu

Repository navigation

Bug: rules-of-hooks violation not caught by eslint plugin #22520

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bug: rules-of-hooks violation not caught by eslint plugin #22520

Description

Activity

stale commented on Jan 8, 2022

dcheng1290 commented on Feb 22, 2022

pke commented on Feb 22, 2022

eps1lon commented on Feb 23, 2022

dcheng1290 commented on Feb 23, 2022

eduardodallmann commented on Jan 14, 2023

pke commented on Jan 19, 2023

eduardodallmann commented on Jan 20, 2023

github-actions commented on Apr 10, 2024

github-actions commented on Apr 17, 2024

scamden commented on Apr 26, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions