From d92cfd56f53d1547933b36a94d5fc0e0c950cd79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?= <nacho.lopez@manomano.com>
Date: Tue, 21 Mar 2023 04:47:39 -0700
Subject: [PATCH] Only reset textAncesor when is a child of text (#36520)

Summary:
Text need to know if is a descendant of a text in order to proper render nested text. For this react-native uses the textAncestor provider https://github.com/facebook/react-native/pull/29736#issuecomment-681116943.

This provides a not so ideal DX when profiling/Debugging as the view is polluted with TextAncestor.provider on each view render (As is the main render piece this happens quite often).

The idea behind of this PR is to just reset the context when view is a descendant of a text (Not so common case) rather than resetting all the time.

| Before  | After |
| ------------- | ------------- |
| ![Screenshot 2023-03-08 at 23 06 12](https://user-images.githubusercontent.com/6432326/226111157-d8af7990-2584-46b6-8f02-8583a84c2994.png)  |  ![Screenshot 2023-03-08 at 23 07 11](https://user-images.githubusercontent.com/6432326/226111222-65e8ac86-8ac8-4499-a725-c2f5ed2a2c99.png)  |

From my understanding of how hooks works this shouldn't degrade the performance and didn't spot any diff profiling my app (For better or worse).

## Changelog

[INTERNAL] [CHANGED] - Only reset textAncesor when is a child of text

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

Test Plan: https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/Text/TextExample.ios.js

Reviewed By: necolas

Differential Revision: D44213843

Pulled By: javache

fbshipit-source-id: 246ac22557dc7794741fd9732d399fe8b9256f11
---
 .../Libraries/Components/View/View.js         | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js
index 0edf2e6820d..a10c06231fb 100644
--- a/packages/react-native/Libraries/Components/View/View.js
+++ b/packages/react-native/Libraries/Components/View/View.js
@@ -62,6 +62,7 @@ const View: React.AbstractComponent<
     }: ViewProps,
     forwardedRef,
   ) => {
+    const hasTextAncestor = React.useContext(TextAncestor);
     const _accessibilityLabelledBy =
       ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 
@@ -103,36 +104,42 @@ const View: React.AbstractComponent<
 
     const newPointerEvents = style?.pointerEvents || pointerEvents;
 
-    return (
-      <TextAncestor.Provider value={false}>
-        <ViewNativeComponent
-          {...otherProps}
-          accessibilityLiveRegion={
-            ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
-          }
-          accessibilityLabel={ariaLabel ?? accessibilityLabel}
-          focusable={tabIndex !== undefined ? !tabIndex : focusable}
-          accessibilityState={_accessibilityState}
-          accessibilityRole={
-            role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-          }
-          accessibilityElementsHidden={
-            ariaHidden ?? accessibilityElementsHidden
-          }
-          accessibilityLabelledBy={_accessibilityLabelledBy}
-          accessibilityValue={_accessibilityValue}
-          importantForAccessibility={
-            ariaHidden === true
-              ? 'no-hide-descendants'
-              : importantForAccessibility
-          }
-          nativeID={id ?? nativeID}
-          style={style}
-          pointerEvents={newPointerEvents}
-          ref={forwardedRef}
-        />
-      </TextAncestor.Provider>
+    const actualView = (
+      <ViewNativeComponent
+        {...otherProps}
+        accessibilityLiveRegion={
+          ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
+        }
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
+        accessibilityState={_accessibilityState}
+        accessibilityRole={
+          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+        }
+        accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
+        accessibilityLabelledBy={_accessibilityLabelledBy}
+        accessibilityValue={_accessibilityValue}
+        importantForAccessibility={
+          ariaHidden === true
+            ? 'no-hide-descendants'
+            : importantForAccessibility
+        }
+        nativeID={id ?? nativeID}
+        style={style}
+        pointerEvents={newPointerEvents}
+        ref={forwardedRef}
+      />
     );
+
+    if (hasTextAncestor) {
+      return (
+        <TextAncestor.Provider value={false}>
+          {actualView}
+        </TextAncestor.Provider>
+      );
+    }
+
+    return actualView;
   },
 );