[Compiler Bug]: false positive for eslint rule react-hooks/static-components

[TkDodo]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBAknBAHYCyCFUBAvgQGYwQYEDkAAgPRrkKYTgG4AOhQmCwhDAEMsWNBQDmBALwEAFAEoNAPiISCBGAjywKpQTTriKDexIQAPHPhZQKcPGkoEAYXYcClo8XSMrAmlCMn9NeUVlFV17ExiCAEEKCDwACwQYOKtNYtsoCWNTc0ttKpMAHgATNAA3fXqTAgbi6IgAG1x1MRAAdzy0PAQRgl4OqK7u7NyCosE+wZhhsYmpmbnOht4W9qqdewYQABoQQWY0FRR0bFxCPABPLAQiAgAFfqgKmUAHksL5KGBGCw2BxOAAjORwhD9AC0WABQIoKLMch8KPI2DQ-UKxzQMlElQoWmAVV4vAJSn6cnB1AgTQQyAIIzk-X6IwkTDAzLJ9wQkP+gJBYL8QnO13AeQgoxIFCmMAoPLAKGYmoQDCAA

Repro steps

The reproduction shows 1 Lint Error:

Error: Cannot create components during render

But the component is stable as the mapping function only returns a reference to a stable component, which should be allowed.

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

"eslint-plugin-react-hooks": "7.0.0"

[josephsavona]

Thanks for posting! This rule is intentionally simple in order to establish a clear mental model: components should be declared at module scope. If the component already is declared that way, then there's no particular reason to have a function call indirection to access it. If the component is actually dynamically declared in a function you call in render (such as within mapping), well...that's not static!

Can you expand a bit with a more real-world use-case?

[TkDodo]

Thanks for looking into this.

If the component is actually dynamically declared in a function you call in render (such as within mapping), well...that's not static!

Hm, mapping doesn’t dynamically declare a component - it returns a reference to a statically defined component, which should be fine?

The real-world use-case would be this from the sentry code-base:

https://github.com/getsentry/sentry/blob/f11bf42341774cafe031e9f7c3ec76626cbf68c9/static/app/views/dashboards/widgetBuilder/widgetLibrary/card.tsx#L12-L27

where getWidgetIcon is: https://github.com/getsentry/sentry/blob/f9fd5bc396f62df382e26347bdf717c9587b1dcc/static/app/views/dashboards/widgetLibrary/widgetCard.tsx#L6-L22

If I take the same switch statement and inline it, it works fine. But extracting it to a function call seems to yield the false positive. Here’s an updated playground.

[akrynski-1]

Hello, I have a similar problem, basically I have a router-like scenario where there's a big map of lazy loaded views and a component dedicated to dynamically load them, something like:

const views = {
  "view-1": lazy(() => import(...)),
  "view-2": lazy(() => import(...)),
  ...
};

export const getView = (id) => {
  return views[id] || ErrorComponent;
}


const App = () => {
  const id = useIdFromSomewhere();
  const Comp = getView(id);
  return <Comp />
}

These components aren't recreated, it works as intended. If this is anti-pattern now, how should I implement such mechanism?