eslint-plugin-react-hooks: JSX support for react-hooks/exhaustive-deps (#18051)

[chrstnv]

Summary

As mentioned in the discussion, ESLint does not implement React-specific logic, and therefore JSX Identifiers will not be treated by ESLint as regular variables with references to them in scopes.

Because of this circumstance, when we collect hook callback dependencies, JSX variables don't end up in the list of dependencies and JSX-component variables declared in the hook dependencies array are considered exhaustive, but they are not.

So I implemented a prototype of a possible solution to this problem — handling JSX-expressions in the dependency gathering logic of the plugin.

In a nutshell, if JSX is found in the callback hook, then I traverse the JSX tree of elements and collect a list of React components. In the process, I filter out all elements that are not React components. Then I add the resulting array to the list of collected dependencies, which will be checked for exhaustiveness or lack of dependencies.

My prototype solution is imperfect at the moment, it doesn't find JSX-expressions in if/else constructions, it does not fully support JSXMemberExpressions, I have not yet written Typescript tests, etc. But I will do my best if I know that this is the right way.

Thanks!

Test Plan

✅ All test, test-prod, lint, flow checks are passed.
Added some new tests for positive and negative cases of JSX support.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3ae490e:

Sandbox	Source
React	Configuration

[sizebot]

	Warnings
⚠️	Could not find build artifacts for base commit: 6291255

Size changes (stable)

Generated by 🚫 dangerJS against 38a8d3c

[sizebot]

	Warnings
⚠️	Could not find build artifacts for base commit: 6291255

Size changes (experimental)

Generated by 🚫 dangerJS against 38a8d3c