[Compiler Bug]: Components prefixed with `_` are assumed host components

[imjordanxd]

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-hooks (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/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYhBABTBED6AQgIYxEC+yR19T7ASgg7gB0AYQgBbAA6EEmHABUAnhISsAlBwA6xIjAQ5YxClqImiAHi4wAfMdMngFdQF4r5gCZ4AbkQD0VlrYmZj6WNtqqANxaAZggADQgcIRoeADmKCDAtj4+SZJ4ADYM+IQAshBuCOwaIAwFBTXR8eAAFhAA7gCSsggwmHVgKDgwUAgsQA

Repro steps

The following code:

function Foo({ _Bar }: { _Bar: React.ComponentType }) {
    return (
      <_Bar>
        {() => <div />}
      </_Bar>
    );
  }

is compiled to the following:

import { c as _c } from "react/compiler-runtime";
function Foo(t0) {
  const $ = _c(1);
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = <_Bar>{_temp}</_Bar>;
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  return t1;
}
function _temp() {
  return <div />;
}

It appears the the compiler makes an assumption that anything prefixed with _ is a host / built-on component here. The _-prefix is admittedly an unconventional naming choice, but it's valid JavaScript and worked fine before React Compiler. The breakage is silent and surprising: React's convention is that lowercase tags are host components, a leading underscore followed by a capital letter is not lowercase, so a reader (and the JSX runtime) reasonably reads <_Bar> as a component, not a host element. The compiler diverges from that expectation.

The fix was trivia and required an alias:

function Foo({ _Bar: Bar }: { _Bar: React.ComponentType }) {
    return (
      <Bar>
        {() => <div />}
      </Bar>
    );
  }

How often does this bug happen?

Every time

What version of React are you using?

19.2.3

What version of React Compiler are you using?

1.0.0

[preetham-18-developer]

@imjordanxd Hey , is any one working on this issue ??

[preetham-18-developer]

@imjordanxd
I tested the original reproduction on the current React Compiler Playground and can still reproduce the issue.

The generated output is:

js

function Foo(t0) {
  const $ = _c(1);

  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = <_Bar>{_temp}</_Bar>;
    $[0] = t1;
  }
}

The compiler still does not track _Bar as a dependency and memoizes the JSX unconditionally.

Unless I'm missing something, this issue appears to remain unresolved.