React: [eslint-plugin-react-hooks] Better check against misuse in classical class components

Created on 3 Feb 2020  路  3Comments  路  Source: facebook/react


We have run into issue coming from calling hooks from class component, I was surprised that eslint rules doesn't provide any check for that. Is there any reason for that? Am I missing something? I willing to contribute in case this feature request will be approved. 馃檶

eslint-plugin-react-hooks version: 2.3.0

Steps To Reproduce

  1. Create class Component and try to use hook within it
  2. Not warning appears but the code leads to runtime error

Link to code example: https://codesandbox.io/s/rules-of-hooks-class-tr0ko

The current behavior

There is currently no check for class token. You can use hook within method of your class without triggering any warning coming from Rule of Hooks rules.

The expected behavior

The usage of hooks within class should be restricted since it's against

  • Only Call Hooks at the Top Level
  • Only Call Hooks from React Functions
Stale Unconfirmed

Most helpful comment

As per es-lint-rules-hooks

              // Ignore class methods for now because they produce too many
              // false positives due to feature flag checks. We're less
              // sensitive to them in classes because hooks would produce
              // runtime errors in classes anyway, and because a use*()
              // call in a class, if it works, is unambiguously *not* a hook.

All 3 comments

As per es-lint-rules-hooks

              // Ignore class methods for now because they produce too many
              // false positives due to feature flag checks. We're less
              // sensitive to them in classes because hooks would produce
              // runtime errors in classes anyway, and because a use*()
              // call in a class, if it works, is unambiguously *not* a hook.

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!

Recent versions will check hooks in component class.

Was this page helpful?
0 / 5 - 0 ratings