From 82325b42602d72dc57bbcdb808620501c122c3af Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuelsusla@meta.com>
Date: Wed, 19 Jun 2024 10:06:15 -0700
Subject: [PATCH] use feature flag in render function for optimized text
 (#45068)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45068

changelog: [internal]

In D58672844 I added gating to module.exports.

This gating is sensitive to when feature flags are initialised and causes test failures and regressions for developers. Let's move the feature flag check to component's render function. It introduces extra spread operator but it is good enough to compare new and old <Text /> component.

Reviewed By: GijsWeterings

Differential Revision: D58783941

fbshipit-source-id: f89f4f48e6aeb774ed4a84483a9f4ad59d5bc045
---
 packages/react-native/Libraries/Text/Text.js  | 22 ++++++++++++++-----
 .../__snapshots__/public-api-test.js.snap     |  2 +-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js
index bc68479ae4b..807b1c73d16 100644
--- a/packages/react-native/Libraries/Text/Text.js
+++ b/packages/react-native/Libraries/Text/Text.js
@@ -19,6 +19,7 @@ import processColor from '../StyleSheet/processColor';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import TextOptimized from './TextOptimized';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
@@ -27,7 +28,7 @@ import {useContext, useMemo, useState} from 'react';
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: React.AbstractComponent<
+const TextLegacy: React.AbstractComponent<
   TextProps,
   React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
 > = React.forwardRef((props: TextProps, forwardedRef) => {
@@ -308,7 +309,7 @@ const Text: React.AbstractComponent<
   );
 });
 
-Text.displayName = 'Text';
+TextLegacy.displayName = 'TextLegacy';
 
 /**
  * Returns false until the first time `newValue` is true, after which this will
@@ -338,6 +339,17 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
-module.exports = ((ReactNativeFeatureFlags.shouldUseOptimizedText()
-  ? require('./TextOptimized')
-  : Text): typeof Text);
+const Text: React.AbstractComponent<
+  TextProps,
+  React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
+> = React.forwardRef((props: TextProps, forwardedRef) => {
+  if (ReactNativeFeatureFlags.shouldUseOptimizedText()) {
+    return <TextOptimized {...props} ref={forwardedRef} />;
+  } else {
+    return <TextLegacy {...props} ref={forwardedRef} />;
+  }
+});
+
+Text.displayName = 'Text';
+
+module.exports = Text;
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
index ccd24bce524..cd9e2b44087 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -8045,7 +8045,7 @@ exports[`public API should not change unintentionally Libraries/Text/Text.js 1`]
   TextProps,
   React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
 >;
-declare module.exports: typeof Text;
+declare module.exports: Text;
 "
 `;