Added new logic under the PromoteUsedTemporaries file

Author: Kostya92

compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts

@@ -23,7 +23,6 @@ import {
   markInstructionIds,
   markPredecessors,
   mergeConsecutiveBlocks,
-  promoteTemporaryJsxTag,
   reversePostorderBlocks,
 } from '../HIR';
 import {
@@ -63,12 +62,7 @@ export function constantPropagation(fn: HIRFunction): void {
 
 function constantPropagationImpl(fn: HIRFunction, constants: Constants): void {
   while (true) {
-    const jsxTagIdentifiers = collectJsxTagIdentifiers(fn);
-    const haveTerminalsChanged = applyConstantPropagation(
-      fn,
-      constants,
-      jsxTagIdentifiers,
-    );
+    const haveTerminalsChanged = applyConstantPropagation(fn, constants);
     if (!haveTerminalsChanged) {
       break;
     }
@@ -112,7 +106,6 @@ function constantPropagationImpl(fn: HIRFunction, constants: Constants): void {
 function applyConstantPropagation(
   fn: HIRFunction,
   constants: Constants,
-  jsxTagIdentifiers: Set<IdentifierId>,
 ): boolean {
   let hasChanges = false;
   for (const [, block] of fn.body.blocks) {
@@ -137,7 +130,7 @@ function applyConstantPropagation(
         continue;
       }
       const instr = block.instructions[i]!;
-      const value = evaluateInstruction(constants, instr, jsxTagIdentifiers);
+      const value = evaluateInstruction(constants, instr);
       if (value !== null) {
         constants.set(instr.lvalue.identifier.id, value);
       }
@@ -246,7 +239,6 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null {
 function evaluateInstruction(
   constants: Constants,
   instr: Instruction,
-  jsxTagIdentifiers: Set<IdentifierId>,
 ): Constant | null {
   const value = instr.value;
   switch (value.kind) {
@@ -601,14 +593,6 @@ function evaluateInstruction(
     case 'LoadLocal': {
       const placeValue = read(constants, value.place);
       if (placeValue !== null) {
-        if (
-          instr.lvalue != null &&
-          jsxTagIdentifiers.has(instr.lvalue.identifier.id) &&
-          placeValue.kind === 'LoadGlobal' &&
-          instr.lvalue.identifier.name == null
-        ) {
-          promoteTemporaryJsxTag(instr.lvalue.identifier);
-        }
         instr.value = placeValue;
       }
       return placeValue;
@@ -655,19 +639,3 @@ function read(constants: Constants, place: Place): Constant | null {
 
 type Constant = Primitive | LoadGlobal;
 type Constants = Map<IdentifierId, Constant>;
-
-function collectJsxTagIdentifiers(fn: HIRFunction): Set<IdentifierId> {
-  const identifiers = new Set<IdentifierId>();
-
-  for (const [, block] of fn.body.blocks) {
-    for (const instr of block.instructions) {
-      if (
-        instr.value.kind === 'JsxExpression' &&
-        instr.value.tag.kind === 'Identifier'
-      ) {
-        identifiers.add(instr.value.tag.identifier.id);
-      }
-    }
-  }
-  return identifiers;
-}

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PromoteUsedTemporaries.ts

@@ -31,6 +31,39 @@ import {eachInstructionValueLValue, eachPatternOperand} from '../HIR/visitors';
  * Phase 2: Promote identifiers which are used in a place that requires a named variable.
  */
 class PromoteTemporaries extends ReactiveFunctionVisitor<State> {
+  /*
+   * Only promote LoadGlobal temps when the JSX tag identifier's name differs
+   * from the referenced module-local binding. This preserves direct uses like
+   * <StaticText1 /> while still emitting stable temps for aliases such as
+   * const Tag = StaticText1; return <Tag />;.
+   */
+  override visitInstruction(
+    instruction: ReactiveInstruction,
+    state: State,
+  ): void {
+    const binding =
+      instruction.value.kind === 'LoadGlobal'
+        ? instruction.value.binding
+        : null;
+    const lvalue = instruction.lvalue;
+    const tagName =
+      lvalue != null
+        ? (state.tagNames.get(lvalue.identifier.declarationId) ?? null)
+        : null;
+    if (
+      binding != null &&
+      binding.kind === 'ModuleLocal' &&
+      lvalue != null &&
+      lvalue.identifier.name == null &&
+      tagName !== null &&
+      tagName !== binding.name &&
+      state.tags.has(lvalue.identifier.declarationId)
+    ) {
+      promoteIdentifier(lvalue.identifier, state);
+    }
+    this.traverseInstruction(instruction, state);
+  }
+
   override visitScope(scopeBlock: ReactiveScopeBlock, state: State): void {
     for (const dep of scopeBlock.scope.dependencies) {
       const {identifier} = dep;
@@ -172,6 +205,7 @@ class PromoteAllInstancedOfPromotedTemporaries extends ReactiveFunctionVisitor<S
 type JsxExpressionTags = Set<DeclarationId>;
 type State = {
   tags: JsxExpressionTags;
+  tagNames: Map<DeclarationId, string | null>;
   promoted: Set<DeclarationId>;
   pruned: Map<
     DeclarationId,
@@ -205,7 +239,10 @@ class CollectPromotableTemporaries extends ReactiveFunctionVisitor<State> {
   ): void {
     this.traverseValue(id, value, state);
     if (value.kind === 'JsxExpression' && value.tag.kind === 'Identifier') {
-      state.tags.add(value.tag.identifier.declarationId);
+      const identifier = value.tag.identifier;
+      state.tags.add(identifier.declarationId);
+      const name = identifier.name != null ? identifier.name.value : null;
+      state.tagNames.set(identifier.declarationId, name);
     }
   }
 
@@ -432,6 +469,7 @@ class PromoteInterposedTemporaries extends ReactiveFunctionVisitor<InterState> {
 export function promoteUsedTemporaries(fn: ReactiveFunction): void {
   const state: State = {
     tags: new Set(),
+    tagNames: new Map(),
     promoted: new Set(),
     pruned: new Map(),
   };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-tag-in-lambda.expect.md

@@ -37,8 +37,7 @@ function useFoo() {
   return t0;
 }
 function _temp() {
-  const T0 = Stringify;
-  return <T0 value={4} />;
+  return <Stringify value={4} />;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order.expect.md

@@ -31,23 +31,21 @@ import { StaticText1, StaticText2 } from "shared-runtime";
 function Component(props) {
   const $ = _c(3);
 
-  const T0 = StaticText1;
   const t0 = props.value;
-  const T1 = StaticText2;
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <T1 />;
+    t1 = <StaticText2 />;
     $[0] = t1;
   } else {
     t1 = $[0];
   }
   let t2;
   if ($[1] !== t0) {
     t2 = (
-      <T0>
+      <StaticText1>
         {t0}
         {t1}
-      </T0>
+      </StaticText1>
     );
     $[1] = t0;
     $[2] = t2;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-jsx-dynamic-tag-alias.expect.md

@@ -27,11 +27,9 @@ const base = "div";
 
 const TestComponent: React.FC = () => {
   const $ = _c(1);
-
-  const T0 = base;
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <T0 />;
+    t0 = <base />;
     $[0] = t0;
   } else {
     t0 = $[0];