[lint] Allow eslint react hooks rule to apply to any wrapped components #34608
+134
−32
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
The following construct is usual in mobx (and some other libraries that use high order functions over components)
However, that construct is not recognized as a component by the eslint plugin react rules of hooks, so any failure to follow the rules there are silently ignored. Exhaustive deps rules work though, giving the user a false sense of security.
More over, the following construct does lint the rules properly.
The current PR addresses this by allowing the detection of hooks rules in the first case (no matter the number of middle wrappers), but ONLY in the case of variables that follow the component naming rules. This is, the "inside a hook" detection mechanism is unchanged, only the "inside a component" detection mechanism is changed.
Since, after this change any wrapper becomes valid, we can then remove the custom detection logic for "memo" and "forwardRef", since they are also considered wrappers like any other.
How did you test this change?
The following unit tests where added as invalid cases: