Skip to content

Commit 3930ad5

Browse files
committed
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.
1 parent 33e4ca3 commit 3930ad5

File tree

13 files changed

+160
-106
lines changed

13 files changed

+160
-106
lines changed

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<3545510f0ae198cd36a14af654d7cf69>>
10+
* @generated SignedSource<<cd445f3b30b95bc14ba23cb28c191840>>
1111
*/
1212

1313
'use strict';
@@ -11440,6 +11440,7 @@ function updateMemoComponent(
1144011440
Component.type,
1144111441
null,
1144211442
nextProps,
11443+
null,
1144311444
workInProgress,
1144411445
workInProgress.mode,
1144511446
renderLanes
@@ -14216,6 +14217,7 @@ function beginWork$1(current, workInProgress, renderLanes) {
1421614217
workInProgress.type,
1421714218
workInProgress.key,
1421814219
workInProgress.pendingProps,
14220+
workInProgress._debugSource || null,
1421914221
workInProgress._debugOwner || null,
1422014222
workInProgress.mode,
1422114223
workInProgress.lanes
@@ -17600,6 +17602,7 @@ function detachFiberAfterEffects(fiber) {
1760017602
fiber.stateNode = null;
1760117603

1760217604
{
17605+
fiber._debugSource = null;
1760317606
fiber._debugOwner = null;
1760417607
} // Theoretically, nothing in here should be necessary, because we already
1760517608
// disconnected the fiber from the tree. So even if something leaks this
@@ -23609,6 +23612,7 @@ function createFiberFromTypeAndProps(
2360923612
type, // React$ElementType
2361023613
key,
2361123614
pendingProps,
23615+
source,
2361223616
owner,
2361323617
mode,
2361423618
lanes
@@ -23752,15 +23756,18 @@ function createFiberFromTypeAndProps(
2375223756
fiber.lanes = lanes;
2375323757

2375423758
{
23759+
fiber._debugSource = source;
2375523760
fiber._debugOwner = owner;
2375623761
}
2375723762

2375823763
return fiber;
2375923764
}
2376023765
function createFiberFromElement(element, mode, lanes) {
23766+
var source = null;
2376123767
var owner = null;
2376223768

2376323769
{
23770+
source = element._source;
2376423771
owner = element._owner;
2376523772
}
2376623773

@@ -23771,6 +23778,7 @@ function createFiberFromElement(element, mode, lanes) {
2377123778
type,
2377223779
key,
2377323780
pendingProps,
23781+
source,
2377423782
owner,
2377523783
mode,
2377623784
lanes
@@ -23986,7 +23994,7 @@ function createFiberRoot(
2398623994
return root;
2398723995
}
2398823996

23989-
var ReactVersion = "18.3.0-canary-4129ea8c9-20230829";
23997+
var ReactVersion = "18.3.0-canary-eaa696876-20230829";
2399023998

2399123999
// Might add PROFILE later.
2399224000

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<e115811eff0dd9efb954c6e8c7551c0d>>
10+
* @generated SignedSource<<d1b32810e51fc98372bfbb5c93420bef>>
1111
*/
1212

1313
"use strict";
@@ -1300,6 +1300,7 @@ function createChildReconciler(shouldTrackSideEffects) {
13001300
element.key,
13011301
element.props,
13021302
null,
1303+
null,
13031304
returnFiber.mode,
13041305
lanes
13051306
);
@@ -1362,6 +1363,7 @@ function createChildReconciler(shouldTrackSideEffects) {
13621363
newChild.key,
13631364
newChild.props,
13641365
null,
1366+
null,
13651367
returnFiber.mode,
13661368
lanes
13671369
)),
@@ -1767,6 +1769,7 @@ function createChildReconciler(shouldTrackSideEffects) {
17671769
newChild.key,
17681770
newChild.props,
17691771
null,
1772+
null,
17701773
returnFiber.mode,
17711774
lanes
17721775
)),
@@ -3294,6 +3297,7 @@ function updateMemoComponent(
32943297
Component.type,
32953298
null,
32963299
nextProps,
3300+
null,
32973301
workInProgress,
32983302
workInProgress.mode,
32993303
renderLanes
@@ -8023,20 +8027,21 @@ function createFiberFromTypeAndProps(
80238027
type,
80248028
key,
80258029
pendingProps,
8030+
source,
80268031
owner,
80278032
mode,
80288033
lanes
80298034
) {
8030-
var fiberTag = 2;
8031-
owner = type;
8032-
if ("function" === typeof type) shouldConstruct(type) && (fiberTag = 1);
8033-
else if ("string" === typeof type) fiberTag = 5;
8035+
owner = 2;
8036+
source = type;
8037+
if ("function" === typeof type) shouldConstruct(type) && (owner = 1);
8038+
else if ("string" === typeof type) owner = 5;
80348039
else
80358040
a: switch (type) {
80368041
case REACT_FRAGMENT_TYPE:
80378042
return createFiberFromFragment(pendingProps.children, mode, lanes, key);
80388043
case REACT_STRICT_MODE_TYPE:
8039-
fiberTag = 8;
8044+
owner = 8;
80408045
mode |= 8;
80418046
0 !== (mode & 1) && (mode |= 16);
80428047
break;
@@ -8076,30 +8081,30 @@ function createFiberFromTypeAndProps(
80768081
if ("object" === typeof type && null !== type)
80778082
switch (type.$$typeof) {
80788083
case REACT_PROVIDER_TYPE:
8079-
fiberTag = 10;
8084+
owner = 10;
80808085
break a;
80818086
case REACT_CONTEXT_TYPE:
8082-
fiberTag = 9;
8087+
owner = 9;
80838088
break a;
80848089
case REACT_FORWARD_REF_TYPE:
8085-
fiberTag = 11;
8090+
owner = 11;
80868091
break a;
80878092
case REACT_MEMO_TYPE:
8088-
fiberTag = 14;
8093+
owner = 14;
80898094
break a;
80908095
case REACT_LAZY_TYPE:
8091-
fiberTag = 16;
8092-
owner = null;
8096+
owner = 16;
8097+
source = null;
80938098
break a;
80948099
}
80958100
throw Error(
80968101
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " +
80978102
((null == type ? type : typeof type) + ".")
80988103
);
80998104
}
8100-
key = createFiber(fiberTag, pendingProps, key, mode);
8105+
key = createFiber(owner, pendingProps, key, mode);
81018106
key.elementType = type;
8102-
key.type = owner;
8107+
key.type = source;
81038108
key.lanes = lanes;
81048109
return key;
81058110
}
@@ -8612,7 +8617,7 @@ var devToolsConfig$jscomp$inline_1027 = {
86128617
throw Error("TestRenderer does not support findFiberByHostInstance()");
86138618
},
86148619
bundleType: 0,
8615-
version: "18.3.0-canary-4129ea8c9-20230829",
8620+
version: "18.3.0-canary-eaa696876-20230829",
86168621
rendererPackageName: "react-test-renderer"
86178622
};
86188623
var internals$jscomp$inline_1226 = {
@@ -8643,7 +8648,7 @@ var internals$jscomp$inline_1226 = {
86438648
scheduleRoot: null,
86448649
setRefreshHandler: null,
86458650
getCurrentFiber: null,
8646-
reconcilerVersion: "18.3.0-canary-4129ea8c9-20230829"
8651+
reconcilerVersion: "18.3.0-canary-eaa696876-20230829"
86478652
};
86488653
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
86498654
var hook$jscomp$inline_1227 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<6f79df6822325918bc8b4438c31c68fc>>
10+
* @generated SignedSource<<c0a54e40c38caf663b646a4c7f7321d1>>
1111
*/
1212

1313
"use strict";
@@ -1318,6 +1318,7 @@ function createChildReconciler(shouldTrackSideEffects) {
13181318
element.key,
13191319
element.props,
13201320
null,
1321+
null,
13211322
returnFiber.mode,
13221323
lanes
13231324
);
@@ -1380,6 +1381,7 @@ function createChildReconciler(shouldTrackSideEffects) {
13801381
newChild.key,
13811382
newChild.props,
13821383
null,
1384+
null,
13831385
returnFiber.mode,
13841386
lanes
13851387
)),
@@ -1785,6 +1787,7 @@ function createChildReconciler(shouldTrackSideEffects) {
17851787
newChild.key,
17861788
newChild.props,
17871789
null,
1790+
null,
17881791
returnFiber.mode,
17891792
lanes
17901793
)),
@@ -3376,6 +3379,7 @@ function updateMemoComponent(
33763379
Component.type,
33773380
null,
33783381
nextProps,
3382+
null,
33793383
workInProgress,
33803384
workInProgress.mode,
33813385
renderLanes
@@ -8446,20 +8450,21 @@ function createFiberFromTypeAndProps(
84468450
type,
84478451
key,
84488452
pendingProps,
8453+
source,
84498454
owner,
84508455
mode,
84518456
lanes
84528457
) {
8453-
var fiberTag = 2;
8454-
owner = type;
8455-
if ("function" === typeof type) shouldConstruct(type) && (fiberTag = 1);
8456-
else if ("string" === typeof type) fiberTag = 5;
8458+
owner = 2;
8459+
source = type;
8460+
if ("function" === typeof type) shouldConstruct(type) && (owner = 1);
8461+
else if ("string" === typeof type) owner = 5;
84578462
else
84588463
a: switch (type) {
84598464
case REACT_FRAGMENT_TYPE:
84608465
return createFiberFromFragment(pendingProps.children, mode, lanes, key);
84618466
case REACT_STRICT_MODE_TYPE:
8462-
fiberTag = 8;
8467+
owner = 8;
84638468
mode |= 8;
84648469
0 !== (mode & 1) && (mode |= 16);
84658470
break;
@@ -8500,30 +8505,30 @@ function createFiberFromTypeAndProps(
85008505
if ("object" === typeof type && null !== type)
85018506
switch (type.$$typeof) {
85028507
case REACT_PROVIDER_TYPE:
8503-
fiberTag = 10;
8508+
owner = 10;
85048509
break a;
85058510
case REACT_CONTEXT_TYPE:
8506-
fiberTag = 9;
8511+
owner = 9;
85078512
break a;
85088513
case REACT_FORWARD_REF_TYPE:
8509-
fiberTag = 11;
8514+
owner = 11;
85108515
break a;
85118516
case REACT_MEMO_TYPE:
8512-
fiberTag = 14;
8517+
owner = 14;
85138518
break a;
85148519
case REACT_LAZY_TYPE:
8515-
fiberTag = 16;
8516-
owner = null;
8520+
owner = 16;
8521+
source = null;
85178522
break a;
85188523
}
85198524
throw Error(
85208525
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " +
85218526
((null == type ? type : typeof type) + ".")
85228527
);
85238528
}
8524-
key = createFiber(fiberTag, pendingProps, key, mode);
8529+
key = createFiber(owner, pendingProps, key, mode);
85258530
key.elementType = type;
8526-
key.type = owner;
8531+
key.type = source;
85278532
key.lanes = lanes;
85288533
return key;
85298534
}
@@ -9038,7 +9043,7 @@ var devToolsConfig$jscomp$inline_1069 = {
90389043
throw Error("TestRenderer does not support findFiberByHostInstance()");
90399044
},
90409045
bundleType: 0,
9041-
version: "18.3.0-canary-4129ea8c9-20230829",
9046+
version: "18.3.0-canary-eaa696876-20230829",
90429047
rendererPackageName: "react-test-renderer"
90439048
};
90449049
var internals$jscomp$inline_1267 = {
@@ -9069,7 +9074,7 @@ var internals$jscomp$inline_1267 = {
90699074
scheduleRoot: null,
90709075
setRefreshHandler: null,
90719076
getCurrentFiber: null,
9072-
reconcilerVersion: "18.3.0-canary-4129ea8c9-20230829"
9077+
reconcilerVersion: "18.3.0-canary-eaa696876-20230829"
90739078
};
90749079
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
90759080
var hook$jscomp$inline_1268 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ if (
2727
}
2828
"use strict";
2929

30-
var ReactVersion = "18.3.0-canary-4129ea8c9-20230829";
30+
var ReactVersion = "18.3.0-canary-eaa696876-20230829";
3131

3232
// ATTENTION
3333
// When adding new symbols to this file,

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -616,4 +616,4 @@ exports.useSyncExternalStore = function (
616616
exports.useTransition = function () {
617617
return ReactCurrentDispatcher.current.useTransition();
618618
};
619-
exports.version = "18.3.0-canary-4129ea8c9-20230829";
619+
exports.version = "18.3.0-canary-eaa696876-20230829";

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -619,7 +619,7 @@ exports.useSyncExternalStore = function (
619619
exports.useTransition = function () {
620620
return ReactCurrentDispatcher.current.useTransition();
621621
};
622-
exports.version = "18.3.0-canary-4129ea8c9-20230829";
622+
exports.version = "18.3.0-canary-eaa696876-20230829";
623623

624624
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
625625
if (
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
4129ea8c922b950be3964f98d2bb74ff4a1c5431
1+
eaa696876ee40bb048727aefe995be1bbb7384a8

0 commit comments

Comments
 (0)