fix: devtools source field disappears after component remount (#27297)

## Summary Fixes: #27296 On actions that cause a component to change its signature, and therefore to remount, the `_debugSource` property of the fiber updates in delay and causes the `devtools` source field to vanish. This issue happens in https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberBeginWork.js ```js function beginWork( current: Fiber | null, workInProgress: Fiber, renderLanes: Lanes, ): Fiber | null { if (__DEV__) { if (workInProgress._debugNeedsRemount && current !== null) { // This will restart the begin phase with a new fiber. return remountFiber( current, workInProgress, createFiberFromTypeAndProps( workInProgress.type, workInProgress.key, workInProgress.pendingProps, workInProgress._debugOwner || null, workInProgress.mode, workInProgress.lanes, ), ); } } // ... ``` `remountFiber` uses the 3rd parameter as the new fiber (`createFiberFromTypeAndProps(...)`), but this parameter doesn’t contain a `_debugSource`. ## How did you test this change? Tested by monkey patching `./node_modules/react-dom/cjs/react-dom.development.js`: <img width="1749" alt="image" src="https://github.com/facebook/react/assets/75563024/ccaf7fab-4cc9-4c05-a48b-64db6f55dc23"> https://github.com/facebook/react/assets/75563024/0650ae5c-b277-44d1-acbb-a08d98bd38e0 DiffTrain build for commit eaa6968.
facebook · Aug 29, 2023 · 3930ad5 · 3930ad5
1 parent 33e4ca3
commit 3930ad5
Show file tree

Hide file tree

Showing 13 changed files with 160 additions and 106 deletions.
diff --git a/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<3545510f0ae198cd36a14af654d7cf69>>
+ * @generated SignedSource<<cd445f3b30b95bc14ba23cb28c191840>>
  */
 
 'use strict';
@@ -11440,6 +11440,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
+      null,
       workInProgress,
       workInProgress.mode,
       renderLanes
@@ -14216,6 +14217,7 @@ function beginWork$1(current, workInProgress, renderLanes) {
           workInProgress.type,
           workInProgress.key,
           workInProgress.pendingProps,
+          workInProgress._debugSource || null,
           workInProgress._debugOwner || null,
           workInProgress.mode,
           workInProgress.lanes
@@ -17600,6 +17602,7 @@ function detachFiberAfterEffects(fiber) {
   fiber.stateNode = null;
 
   {
+    fiber._debugSource = null;
     fiber._debugOwner = null;
   } // Theoretically, nothing in here should be necessary, because we already
   // disconnected the fiber from the tree. So even if something leaks this
@@ -23609,6 +23612,7 @@ function createFiberFromTypeAndProps(
   type, // React$ElementType
   key,
   pendingProps,
+  source,
   owner,
   mode,
   lanes
@@ -23752,15 +23756,18 @@ function createFiberFromTypeAndProps(
   fiber.lanes = lanes;
 
   {
+    fiber._debugSource = source;
     fiber._debugOwner = owner;
   }
 
   return fiber;
 }
 function createFiberFromElement(element, mode, lanes) {
+  var source = null;
   var owner = null;
 
   {
+    source = element._source;
     owner = element._owner;
   }
 
@@ -23771,6 +23778,7 @@ function createFiberFromElement(element, mode, lanes) {
     type,
     key,
     pendingProps,
+    source,
     owner,
     mode,
     lanes
@@ -23986,7 +23994,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-canary-4129ea8c9-20230829";
+var ReactVersion = "18.3.0-canary-eaa696876-20230829";
 
 // Might add PROFILE later.
 

diff --git a/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<e115811eff0dd9efb954c6e8c7551c0d>>
+ * @generated SignedSource<<d1b32810e51fc98372bfbb5c93420bef>>
  */
 
 "use strict";
@@ -1300,6 +1300,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       element.key,
       element.props,
       null,
+      null,
       returnFiber.mode,
       lanes
     );
@@ -1362,6 +1363,7 @@ function createChildReconciler(shouldTrackSideEffects) {
               newChild.key,
               newChild.props,
               null,
+              null,
               returnFiber.mode,
               lanes
             )),
@@ -1767,6 +1769,7 @@ function createChildReconciler(shouldTrackSideEffects) {
                   newChild.key,
                   newChild.props,
                   null,
+                  null,
                   returnFiber.mode,
                   lanes
                 )),
@@ -3294,6 +3297,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
+      null,
       workInProgress,
       workInProgress.mode,
       renderLanes
@@ -8023,20 +8027,21 @@ function createFiberFromTypeAndProps(
   type,
   key,
   pendingProps,
+  source,
   owner,
   mode,
   lanes
 ) {
-  var fiberTag = 2;
-  owner = type;
-  if ("function" === typeof type) shouldConstruct(type) && (fiberTag = 1);
-  else if ("string" === typeof type) fiberTag = 5;
+  owner = 2;
+  source = type;
+  if ("function" === typeof type) shouldConstruct(type) && (owner = 1);
+  else if ("string" === typeof type) owner = 5;
   else
     a: switch (type) {
       case REACT_FRAGMENT_TYPE:
         return createFiberFromFragment(pendingProps.children, mode, lanes, key);
       case REACT_STRICT_MODE_TYPE:
-        fiberTag = 8;
+        owner = 8;
         mode |= 8;
         0 !== (mode & 1) && (mode |= 16);
         break;
@@ -8076,30 +8081,30 @@ function createFiberFromTypeAndProps(
         if ("object" === typeof type && null !== type)
           switch (type.$$typeof) {
             case REACT_PROVIDER_TYPE:
-              fiberTag = 10;
+              owner = 10;
               break a;
             case REACT_CONTEXT_TYPE:
-              fiberTag = 9;
+              owner = 9;
               break a;
             case REACT_FORWARD_REF_TYPE:
-              fiberTag = 11;
+              owner = 11;
               break a;
             case REACT_MEMO_TYPE:
-              fiberTag = 14;
+              owner = 14;
               break a;
             case REACT_LAZY_TYPE:
-              fiberTag = 16;
-              owner = null;
+              owner = 16;
+              source = null;
               break a;
           }
         throw Error(
           "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " +
             ((null == type ? type : typeof type) + ".")
         );
     }
-  key = createFiber(fiberTag, pendingProps, key, mode);
+  key = createFiber(owner, pendingProps, key, mode);
   key.elementType = type;
-  key.type = owner;
+  key.type = source;
   key.lanes = lanes;
   return key;
 }
@@ -8612,7 +8617,7 @@ var devToolsConfig$jscomp$inline_1027 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-4129ea8c9-20230829",
+  version: "18.3.0-canary-eaa696876-20230829",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1226 = {
@@ -8643,7 +8648,7 @@ var internals$jscomp$inline_1226 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-4129ea8c9-20230829"
+  reconcilerVersion: "18.3.0-canary-eaa696876-20230829"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1227 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<6f79df6822325918bc8b4438c31c68fc>>
+ * @generated SignedSource<<c0a54e40c38caf663b646a4c7f7321d1>>
  */
 
 "use strict";
@@ -1318,6 +1318,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       element.key,
       element.props,
       null,
+      null,
       returnFiber.mode,
       lanes
     );
@@ -1380,6 +1381,7 @@ function createChildReconciler(shouldTrackSideEffects) {
               newChild.key,
               newChild.props,
               null,
+              null,
               returnFiber.mode,
               lanes
             )),
@@ -1785,6 +1787,7 @@ function createChildReconciler(shouldTrackSideEffects) {
                   newChild.key,
                   newChild.props,
                   null,
+                  null,
                   returnFiber.mode,
                   lanes
                 )),
@@ -3376,6 +3379,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
+      null,
       workInProgress,
       workInProgress.mode,
       renderLanes
@@ -8446,20 +8450,21 @@ function createFiberFromTypeAndProps(
   type,
   key,
   pendingProps,
+  source,
   owner,
   mode,
   lanes
 ) {
-  var fiberTag = 2;
-  owner = type;
-  if ("function" === typeof type) shouldConstruct(type) && (fiberTag = 1);
-  else if ("string" === typeof type) fiberTag = 5;
+  owner = 2;
+  source = type;
+  if ("function" === typeof type) shouldConstruct(type) && (owner = 1);
+  else if ("string" === typeof type) owner = 5;
   else
     a: switch (type) {
       case REACT_FRAGMENT_TYPE:
         return createFiberFromFragment(pendingProps.children, mode, lanes, key);
       case REACT_STRICT_MODE_TYPE:
-        fiberTag = 8;
+        owner = 8;
         mode |= 8;
         0 !== (mode & 1) && (mode |= 16);
         break;
@@ -8500,30 +8505,30 @@ function createFiberFromTypeAndProps(
         if ("object" === typeof type && null !== type)
           switch (type.$$typeof) {
             case REACT_PROVIDER_TYPE:
-              fiberTag = 10;
+              owner = 10;
               break a;
             case REACT_CONTEXT_TYPE:
-              fiberTag = 9;
+              owner = 9;
               break a;
             case REACT_FORWARD_REF_TYPE:
-              fiberTag = 11;
+              owner = 11;
               break a;
             case REACT_MEMO_TYPE:
-              fiberTag = 14;
+              owner = 14;
               break a;
             case REACT_LAZY_TYPE:
-              fiberTag = 16;
-              owner = null;
+              owner = 16;
+              source = null;
               break a;
           }
         throw Error(
           "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " +
             ((null == type ? type : typeof type) + ".")
         );
     }
-  key = createFiber(fiberTag, pendingProps, key, mode);
+  key = createFiber(owner, pendingProps, key, mode);
   key.elementType = type;
-  key.type = owner;
+  key.type = source;
   key.lanes = lanes;
   return key;
 }
@@ -9038,7 +9043,7 @@ var devToolsConfig$jscomp$inline_1069 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-4129ea8c9-20230829",
+  version: "18.3.0-canary-eaa696876-20230829",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1267 = {
@@ -9069,7 +9074,7 @@ var internals$jscomp$inline_1267 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-4129ea8c9-20230829"
+  reconcilerVersion: "18.3.0-canary-eaa696876-20230829"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1268 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-canary-4129ea8c9-20230829";
+var ReactVersion = "18.3.0-canary-eaa696876-20230829";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js
@@ -616,4 +616,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-4129ea8c9-20230829";
+exports.version = "18.3.0-canary-eaa696876-20230829";
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js
@@ -619,7 +619,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-4129ea8c9-20230829";
+exports.version = "18.3.0-canary-eaa696876-20230829";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

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 @@
-4129ea8c922b950be3964f98d2bb74ff4a1c5431
+eaa696876ee40bb048727aefe995be1bbb7384a8