Enable suspenseCallback on React Native (#29210)

## Summary suspenseCallback feature has proved to be useful for FB Web. Let's look at enabling the feature for the React Native build. ## How did you test this change? Will sync the react changes with a React Native build and will verify that performance logging is correctly notified of suspense promises during the suspense callback. DiffTrain build for commit 246d7bf.
facebook · Aug 27, 2024 · 3ba4b12 · 3ba4b12
1 parent 6c99ba7
commit 3ba4b12
Show file tree

Hide file tree

Showing 14 changed files with 302 additions and 178 deletions.
diff --git a/compiled-rn/VERSION_NATIVE_FB b/compiled-rn/VERSION_NATIVE_FB
@@ -1 +1 @@
-19.0.0-native-fb-ee7f6757-20240823
+19.0.0-native-fb-246d7bfe-20240826
diff --git a/...source/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...source/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<487e4d25726d3b9452e5df47a0ff70f5>>
+ * @generated SignedSource<<9fd63ef3b1c7300e9c6d203ae91a8b08>>
  */
 
 "use strict";
@@ -14938,11 +14938,11 @@ __DEV__ &&
     (function () {
       var internals = {
         bundleType: 1,
-        version: "19.0.0-native-fb-ee7f6757-20240823",
+        version: "19.0.0-native-fb-246d7bfe-20240826",
         rendererPackageName: "react-test-renderer",
         currentDispatcherRef: ReactSharedInternals,
         findFiberByHostInstance: getInstanceFromNode,
-        reconcilerVersion: "19.0.0-native-fb-ee7f6757-20240823"
+        reconcilerVersion: "19.0.0-native-fb-246d7bfe-20240826"
       };
       internals.overrideHookState = overrideHookState;
       internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -15087,5 +15087,5 @@ __DEV__ &&
             flushSyncWorkAcrossRoots_impl(0, !0));
       }
     };
-    exports.version = "19.0.0-native-fb-ee7f6757-20240823";
+    exports.version = "19.0.0-native-fb-246d7bfe-20240826";
   })();
diff --git a/...ource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js b/...ource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<2b7194fd59bbe7abfe013eed25837c19>>
+ * @generated SignedSource<<c126df2e448ffc59e98d891cf74ae8d2>>
  */
 
 "use strict";
@@ -9331,14 +9331,14 @@ function wrapFiber(fiber) {
 }
 var internals$jscomp$inline_1216 = {
   bundleType: 0,
-  version: "19.0.0-native-fb-ee7f6757-20240823",
+  version: "19.0.0-native-fb-246d7bfe-20240826",
   rendererPackageName: "react-test-renderer",
   currentDispatcherRef: ReactSharedInternals,
   findFiberByHostInstance: function (mockNode) {
     mockNode = nodeToInstanceMap.get(mockNode);
     return void 0 !== mockNode ? mockNode.internalInstanceHandle : null;
   },
-  reconcilerVersion: "19.0.0-native-fb-ee7f6757-20240823"
+  reconcilerVersion: "19.0.0-native-fb-246d7bfe-20240826"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1217 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -9474,4 +9474,4 @@ exports.unstable_batchedUpdates = function (fn, a) {
         flushSyncWorkAcrossRoots_impl(0, !0));
   }
 };
-exports.version = "19.0.0-native-fb-ee7f6757-20240823";
+exports.version = "19.0.0-native-fb-246d7bfe-20240826";
diff --git a/.../xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/.../xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<299f69238375a704376166f52cdb50e2>>
+ * @generated SignedSource<<1730b3d88bae08be3715d2c99dbe4f36>>
  */
 
 "use strict";
@@ -9944,14 +9944,14 @@ function wrapFiber(fiber) {
 }
 var internals$jscomp$inline_1117 = {
   bundleType: 0,
-  version: "19.0.0-native-fb-ee7f6757-20240823",
+  version: "19.0.0-native-fb-246d7bfe-20240826",
   rendererPackageName: "react-test-renderer",
   currentDispatcherRef: ReactSharedInternals,
   findFiberByHostInstance: function (mockNode) {
     mockNode = nodeToInstanceMap.get(mockNode);
     return void 0 !== mockNode ? mockNode.internalInstanceHandle : null;
   },
-  reconcilerVersion: "19.0.0-native-fb-ee7f6757-20240823",
+  reconcilerVersion: "19.0.0-native-fb-246d7bfe-20240826",
   getLaneLabelMap: function () {
     for (
       var map = new Map(), lane = 1, index$149 = 0;
@@ -10102,4 +10102,4 @@ exports.unstable_batchedUpdates = function (fn, a) {
         flushSyncWorkAcrossRoots_impl(0, !0));
   }
 };
-exports.version = "19.0.0-native-fb-ee7f6757-20240823";
+exports.version = "19.0.0-native-fb-246d7bfe-20240826";
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<2ba29bebd603109d19a424b4d5da6619>>
+ * @generated SignedSource<<896f79c85e8c2785f38cee89b95a332f>>
  */
 
 "use strict";
@@ -1705,7 +1705,7 @@ __DEV__ &&
     exports.useTransition = function () {
       return resolveDispatcher().useTransition();
     };
-    exports.version = "19.0.0-native-fb-ee7f6757-20240823";
+    exports.version = "19.0.0-native-fb-246d7bfe-20240826";
     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
       "function" ===
         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<2a611fb74005fd03289965ce11f15bca>>
+ * @generated SignedSource<<fc1f4804ec761bcebe4c15d74709e0e6>>
  */
 
 "use strict";
@@ -580,4 +580,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-native-fb-ee7f6757-20240823";
+exports.version = "19.0.0-native-fb-246d7bfe-20240826";
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<7ee390300a2fbde0cddea1af7690a29f>>
+ * @generated SignedSource<<695d3ab4be692d0760b33e3253e66289>>
  */
 
 "use strict";
@@ -584,7 +584,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-native-fb-ee7f6757-20240823";
+exports.version = "19.0.0-native-fb-246d7bfe-20240826";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
@@ -1 +1 @@
-ee7f6757c446c4e79ecc7e2bc22b8c9b712834b7
+246d7bfeb0c90ecccd9531929b60a79d628a4c78
diff --git a/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<746002f099c7204907e443cbabc48477>>
+ * @generated SignedSource<<554f420a6fa3f25ed0f068fc6a103bef>>
  */
 
 "use strict";
@@ -9487,6 +9487,9 @@ __DEV__ &&
             newProps &&
             (workInProgress.child.flags |= 8192);
           scheduleRetryEffect(workInProgress, workInProgress.updateQueue);
+          null !== workInProgress.updateQueue &&
+            null != workInProgress.memoizedProps.suspenseCallback &&
+            (workInProgress.flags |= 4);
           bubbleProperties(workInProgress);
           0 !== (workInProgress.mode & 2) &&
             newProps &&
@@ -10414,6 +10417,10 @@ __DEV__ &&
           );
           break;
         case 18:
+          finishedRoot = finishedRoot.hydrationCallbacks;
+          null !== finishedRoot &&
+            (finishedRoot = finishedRoot.onDeleted) &&
+            finishedRoot(deletedFiber.stateNode);
           break;
         case 4:
           var containerInfo = deletedFiber.stateNode.containerInfo,
@@ -10736,35 +10743,50 @@ __DEV__ &&
         case 13:
           recursivelyTraverseMutationEffects(root, finishedWork, lanes);
           commitReconciliationEffects(finishedWork);
-          if (finishedWork.child.flags & 8192) {
-            var isShowingFallback = null !== finishedWork.memoizedState;
-            current = null !== current && null !== current.memoizedState;
+          finishedWork.child.flags & 8192 &&
+            ((root = null !== finishedWork.memoizedState),
+            (current = null !== current && null !== current.memoizedState),
             alwaysThrottleRetries
-              ? isShowingFallback !== current &&
-                (globalMostRecentFallbackTime = now$1())
-              : isShowingFallback &&
-                !current &&
-                (globalMostRecentFallbackTime = now$1());
-          }
-          flags & 4 &&
-            ((flags = finishedWork.updateQueue),
+              ? root !== current && (globalMostRecentFallbackTime = now$1())
+              : root && !current && (globalMostRecentFallbackTime = now$1()));
+          if (flags & 4) {
+            try {
+              if (null !== finishedWork.memoizedState) {
+                var suspenseCallback =
+                  finishedWork.memoizedProps.suspenseCallback;
+                if ("function" === typeof suspenseCallback) {
+                  var retryQueue = finishedWork.updateQueue;
+                  null !== retryQueue && suspenseCallback(new Set(retryQueue));
+                } else
+                  void 0 !== suspenseCallback &&
+                    error$jscomp$0("Unexpected type for suspenseCallback.");
+              }
+            } catch (error$28) {
+              captureCommitPhaseError(
+                finishedWork,
+                finishedWork.return,
+                error$28
+              );
+            }
+            flags = finishedWork.updateQueue;
             null !== flags &&
               ((finishedWork.updateQueue = null),
-              attachSuspenseRetryListeners(finishedWork, flags)));
+              attachSuspenseRetryListeners(finishedWork, flags));
+          }
           break;
         case 22:
           flags & 512 &&
             null !== current &&
             safelyDetachRef(current, current.return);
-          var isHidden = null !== finishedWork.memoizedState;
-          isShowingFallback =
-            null !== current && null !== current.memoizedState;
+          retryQueue = null !== finishedWork.memoizedState;
+          suspenseCallback = null !== current && null !== current.memoizedState;
           if (finishedWork.mode & 1) {
             var prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden,
               prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-            offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden || isHidden;
+            offscreenSubtreeIsHidden =
+              prevOffscreenSubtreeIsHidden || retryQueue;
             offscreenSubtreeWasHidden =
-              prevOffscreenSubtreeWasHidden || isShowingFallback;
+              prevOffscreenSubtreeWasHidden || suspenseCallback;
             recursivelyTraverseMutationEffects(root, finishedWork, lanes);
             offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
             offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
@@ -10775,13 +10797,13 @@ __DEV__ &&
           root._visibility &= -3;
           root._visibility |= root._pendingVisibility & 2;
           flags & 8192 &&
-            ((root._visibility = isHidden
+            ((root._visibility = retryQueue
               ? root._visibility & -2
               : root._visibility | 1),
-            isHidden &&
+            retryQueue &&
               ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden),
               null === current ||
-                isShowingFallback ||
+                suspenseCallback ||
                 root ||
                 (0 !== (finishedWork.mode & 1) &&
                   recursivelyTraverseDisappearLayoutEffects(finishedWork))));
@@ -13750,6 +13772,7 @@ __DEV__ &&
       this.onRecoverableError = onRecoverableError;
       this.pooledCache = null;
       this.pooledCacheLanes = 0;
+      this.hydrationCallbacks = null;
       this.formState = formState;
       this.incompleteTransitions = new Map();
       this.passiveEffectDuration = this.effectDuration = 0;
@@ -16929,11 +16952,11 @@ __DEV__ &&
     (function () {
       var internals = {
         bundleType: 1,
-        version: "19.0.0-native-fb-ee7f6757-20240823",
+        version: "19.0.0-native-fb-246d7bfe-20240826",
         rendererPackageName: "react-native-renderer",
         currentDispatcherRef: ReactSharedInternals,
         findFiberByHostInstance: getInstanceFromNode,
-        reconcilerVersion: "19.0.0-native-fb-ee7f6757-20240823"
+        reconcilerVersion: "19.0.0-native-fb-246d7bfe-20240826"
       };
       null !== extraDevToolsConfig &&
         (internals.rendererConfig = extraDevToolsConfig);
@@ -17076,6 +17099,7 @@ __DEV__ &&
           onRecoverableError,
           null
         );
+        options.hydrationCallbacks = null;
         concurrentRoot = 1 === concurrentRoot ? 1 : 0;
         isDevToolsPresent && (concurrentRoot |= 2);
         concurrentRoot = createFiber(3, null, null, concurrentRoot);
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		19.0.0-native-fb-ee7f6757-20240823
		19.0.0-native-fb-246d7bfe-20240826
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		ee7f6757c446c4e79ecc7e2bc22b8c9b712834b7
		246d7bfeb0c90ecccd9531929b60a79d628a4c78