react-hooks: Rules of Hooks now considers component/hook declarations inside JSX attributes

[eps1lon]

Summary

Noticed during work in #25360.
Closes #23230

Currently, the below code will trigger rules of hooks with "hooks can only be called at the top level" despite the hook being called in something that looks like a component.

function JSXApp() {
  return (
    <Child
      Component={() => {
        const [myState, setMyState] = useState(null);
      }}
    />
  );
}

The above code is equivalent to the code below where we already apply Rules of Hooks

function App() {
  return createElement(Child, {
    Component: () => {
      const [myState, setMyState] = useState(null);
    },
  });
}

It's kind of neat to not apply rules of hook the components in JSX attributes since this can prevent declaration of nested components. But the error message wouldn't make sense and it would also flag component declarations in JSX elements that are not created during render.

The idea is to release this and #25360 together (though #25360 would need some rework if this PR is merged to also consider JSXAttributes).

How did you test this change?

• Added tests
• https://github.com/mui/material-ui/
• Klarna monorepo

[eps1lon]

This is already considered a component in the latest release. Just not when it's written as JSX

[eps1lon]

I think this is overly defensive in todays JSX. But just in case expressioncontainers will ever be able to appear elsewhere and JSXAttributes keys might be something other than an identifier (e.g. computed 😉 )

[sizebot]

Comparing: bdd3d08...ff90b22

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	153.13 kB	153.13 kB	=	48.84 kB	48.84 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	155.05 kB	155.05 kB	=	49.44 kB	49.44 kB
facebook-www/ReactDOM-prod.classic.js	=	529.21 kB	529.21 kB	=	94.48 kB	94.49 kB
facebook-www/ReactDOM-prod.modern.js	=	514.47 kB	514.47 kB	=	92.32 kB	92.32 kB
facebook-www/ReactDOMForked-prod.classic.js	=	529.21 kB	529.21 kB	=	94.49 kB	94.49 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable-semver/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.min.js	+0.75%	26.61 kB	26.81 kB	+0.48%	9.08 kB	9.13 kB
oss-stable/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.min.js	+0.75%	26.61 kB	26.81 kB	+0.48%	9.08 kB	9.13 kB
oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.min.js	+0.73%	27.31 kB	27.51 kB	+0.45%	9.24 kB	9.29 kB
oss-stable-semver/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+0.41%	92.46 kB	92.84 kB	+0.46%	21.80 kB	21.90 kB
oss-stable/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+0.41%	92.46 kB	92.84 kB	+0.46%	21.80 kB	21.90 kB
oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+0.41%	92.65 kB	93.04 kB	+0.48%	21.83 kB	21.93 kB

Generated by 🚫 dangerJS against ff90b22

[eps1lon]

This is already accepted on main but not <Foo useData={async () => useQuery()} />. Test taken from #23230

[github-actions]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[github-actions]

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!