use feature flag in render function for optimized text (#45068)

Summary:
Pull Request resolved: #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

@@ -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;

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;
 "
 `;