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

[pke]

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.

[stale]

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!

[dcheng1290]

@pke did you resolve this issue by any chance?

[pke]

No

[eps1lon]

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?

[dcheng1290]

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!

[eduardodallmann]

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

[pke]

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

[eduardodallmann]

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.

[github-actions]

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!

[github-actions]

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!

[scamden]

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
});