Skip to content

[compiler] Fix JSX tags with underscore-prefix incorrectly treated as host components#36686

Open
amitsaroj wants to merge 3 commits into
facebook:mainfrom
amitsaroj:compiler/fix-underscore-jsx-tag-host-component
Open

[compiler] Fix JSX tags with underscore-prefix incorrectly treated as host components#36686
amitsaroj wants to merge 3 commits into
facebook:mainfrom
amitsaroj:compiler/fix-underscore-jsx-tag-host-component

Conversation

@amitsaroj
Copy link
Copy Markdown

Summary

Fixes #36601

In lowerJsxElementName (BuildHIR.ts), the check used to distinguish user-defined component tags from host (builtin) element tags was:

if (tag.match(/^[A-Z]/)) {
  // treat as component — load from scope
} else {
  // treat as BuiltinTag (host element like <div>, <span>)
}

The JSX convention (and the React runtime) is: a tag is a host element if and only if its first character is a lowercase ASCII letter [a-z]. Any other first character — including _, $, or an uppercase letter — means the tag is a user-defined component.

The old regex ^[A-Z] only matched tags beginning with an uppercase letter, so tags like <_Bar> or <$Special> fell through to the BuiltinTag branch and their values were never tracked as dependencies. This produced silently incorrect memoization — _Bar was treated as a stable builtin tag even though it is a prop that could change between renders.

Fix

Change the condition to its logical inverse:

// before
if (tag.match(/^[A-Z]/)) {

// after  
if (!tag.match(/^[a-z]/)) {

This preserves the existing behaviour for the common cases:

  • div, span, button, … → still BuiltinTag (start with [a-z])
    • Button, MyComponent, … → still component (start with [A-Z], not [a-z])
      And now correctly handles:
  • _Bar, _Foo → component (not [a-z] → now takes the component path) ✓
    • $Special → component (not [a-z]) ✓

Test plan

Added a regression test fixture at:
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-underscore-prefix-component.js

Run the compiler test suite to generate the updated snapshot:

yarn test --filter ReactCompiler
# or, to regenerate snapshots:
yarn test --filter ReactCompiler --update-snapshots

Repro (from issue #36601)

function Foo({ _Bar }) {
  return <_Bar>{() => <div />}</_Bar>;
}

Before fix: _Bar was treated as a BuiltinTag. The JSX was memoized with zero dependencies — changes to _Bar across renders were silently ignored.

After fix: _Bar is correctly treated as a component reference, loaded from scope and tracked as a dependency.

@meta-cla
Copy link
Copy Markdown

meta-cla Bot commented Jun 4, 2026

Hi @amitsaroj!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@meta-cla meta-cla Bot added the CLA Signed label Jun 4, 2026
@meta-cla
Copy link
Copy Markdown

meta-cla Bot commented Jun 4, 2026

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant