Skip to content

Commit c4d091a

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 [eaa6968](eaa6968)
1 parent 5a211bb commit c4d091a

20 files changed

+250
-158
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
4129ea8c922b950be3964f98d2bb74ff4a1c5431
1+
eaa696876ee40bb048727aefe995be1bbb7384a8

compiled/facebook-www/React-dev.classic.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-www-classic-44782c01";
30+
var ReactVersion = "18.3.0-www-classic-06724970";
3131

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

compiled/facebook-www/React-dev.modern.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-www-modern-c6e988f2";
30+
var ReactVersion = "18.3.0-www-modern-5ec21dc5";
3131

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

compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -615,4 +615,4 @@ exports.useSyncExternalStore = function (
615615
exports.useTransition = function () {
616616
return ReactCurrentDispatcher.current.useTransition();
617617
};
618-
exports.version = "18.3.0-www-modern-cbca474e";
618+
exports.version = "18.3.0-www-modern-feef7178";

compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

72-
var ReactVersion = "18.3.0-www-classic-958fdb2b";
72+
var ReactVersion = "18.3.0-www-classic-bb068684";
7373

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;
@@ -13766,6 +13766,7 @@ function updateMemoComponent(
1376613766
Component.type,
1376713767
null,
1376813768
nextProps,
13769+
null,
1376913770
workInProgress,
1377013771
workInProgress.mode,
1377113772
renderLanes
@@ -16787,6 +16788,7 @@ function beginWork$1(current, workInProgress, renderLanes) {
1678716788
workInProgress.type,
1678816789
workInProgress.key,
1678916790
workInProgress.pendingProps,
16791+
workInProgress._debugSource || null,
1679016792
workInProgress._debugOwner || null,
1679116793
workInProgress.mode,
1679216794
workInProgress.lanes
@@ -21024,6 +21026,7 @@ function detachFiberAfterEffects(fiber) {
2102421026
fiber.stateNode = null;
2102521027

2102621028
{
21029+
fiber._debugSource = null;
2102721030
fiber._debugOwner = null;
2102821031
} // Theoretically, nothing in here should be necessary, because we already
2102921032
// disconnected the fiber from the tree. So even if something leaks this
@@ -27869,6 +27872,7 @@ function createFiberFromTypeAndProps(
2786927872
type, // React$ElementType
2787027873
key,
2787127874
pendingProps,
27875+
source,
2787227876
owner,
2787327877
mode,
2787427878
lanes
@@ -28031,15 +28035,18 @@ function createFiberFromTypeAndProps(
2803128035
fiber.lanes = lanes;
2803228036

2803328037
{
28038+
fiber._debugSource = source;
2803428039
fiber._debugOwner = owner;
2803528040
}
2803628041

2803728042
return fiber;
2803828043
}
2803928044
function createFiberFromElement(element, mode, lanes) {
28045+
var source = null;
2804028046
var owner = null;
2804128047

2804228048
{
28049+
source = element._source;
2804328050
owner = element._owner;
2804428051
}
2804528052

@@ -28050,6 +28057,7 @@ function createFiberFromElement(element, mode, lanes) {
2805028057
type,
2805128058
key,
2805228059
pendingProps,
28060+
source,
2805328061
owner,
2805428062
mode,
2805528063
lanes

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

72-
var ReactVersion = "18.3.0-www-modern-94891484";
72+
var ReactVersion = "18.3.0-www-modern-fa00f381";
7373

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;
@@ -13488,6 +13488,7 @@ function updateMemoComponent(
1348813488
Component.type,
1348913489
null,
1349013490
nextProps,
13491+
null,
1349113492
workInProgress,
1349213493
workInProgress.mode,
1349313494
renderLanes
@@ -16481,6 +16482,7 @@ function beginWork$1(current, workInProgress, renderLanes) {
1648116482
workInProgress.type,
1648216483
workInProgress.key,
1648316484
workInProgress.pendingProps,
16485+
workInProgress._debugSource || null,
1648416486
workInProgress._debugOwner || null,
1648516487
workInProgress.mode,
1648616488
workInProgress.lanes
@@ -20689,6 +20691,7 @@ function detachFiberAfterEffects(fiber) {
2068920691
fiber.stateNode = null;
2069020692

2069120693
{
20694+
fiber._debugSource = null;
2069220695
fiber._debugOwner = null;
2069320696
} // Theoretically, nothing in here should be necessary, because we already
2069420697
// disconnected the fiber from the tree. So even if something leaks this
@@ -27529,6 +27532,7 @@ function createFiberFromTypeAndProps(
2752927532
type, // React$ElementType
2753027533
key,
2753127534
pendingProps,
27535+
source,
2753227536
owner,
2753327537
mode,
2753427538
lanes
@@ -27691,15 +27695,18 @@ function createFiberFromTypeAndProps(
2769127695
fiber.lanes = lanes;
2769227696

2769327697
{
27698+
fiber._debugSource = source;
2769427699
fiber._debugOwner = owner;
2769527700
}
2769627701

2769727702
return fiber;
2769827703
}
2769927704
function createFiberFromElement(element, mode, lanes) {
27705+
var source = null;
2770027706
var owner = null;
2770127707

2770227708
{
27709+
source = element._source;
2770327710
owner = element._owner;
2770427711
}
2770527712

@@ -27710,6 +27717,7 @@ function createFiberFromElement(element, mode, lanes) {
2771027717
type,
2771127718
key,
2771227719
pendingProps,
27720+
source,
2771327721
owner,
2771427722
mode,
2771527723
lanes

compiled/facebook-www/ReactART-prod.classic.js

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1596,6 +1596,7 @@ function createChildReconciler(shouldTrackSideEffects) {
15961596
element.key,
15971597
element.props,
15981598
null,
1599+
null,
15991600
returnFiber.mode,
16001601
lanes
16011602
);
@@ -1658,6 +1659,7 @@ function createChildReconciler(shouldTrackSideEffects) {
16581659
newChild.key,
16591660
newChild.props,
16601661
null,
1662+
null,
16611663
returnFiber.mode,
16621664
lanes
16631665
)),
@@ -2060,6 +2062,7 @@ function createChildReconciler(shouldTrackSideEffects) {
20602062
newChild.key,
20612063
newChild.props,
20622064
null,
2065+
null,
20632066
returnFiber.mode,
20642067
lanes
20652068
)),
@@ -4016,6 +4019,7 @@ function updateMemoComponent(
40164019
Component.type,
40174020
null,
40184021
nextProps,
4022+
null,
40194023
workInProgress,
40204024
workInProgress.mode,
40214025
renderLanes
@@ -9701,20 +9705,21 @@ function createFiberFromTypeAndProps(
97019705
type,
97029706
key,
97039707
pendingProps,
9708+
source,
97049709
owner,
97059710
mode,
97069711
lanes
97079712
) {
9708-
var fiberTag = 2;
9709-
owner = type;
9710-
if ("function" === typeof type) shouldConstruct(type) && (fiberTag = 1);
9711-
else if ("string" === typeof type) fiberTag = 5;
9713+
owner = 2;
9714+
source = type;
9715+
if ("function" === typeof type) shouldConstruct(type) && (owner = 1);
9716+
else if ("string" === typeof type) owner = 5;
97129717
else
97139718
a: switch (type) {
97149719
case REACT_FRAGMENT_TYPE:
97159720
return createFiberFromFragment(pendingProps.children, mode, lanes, key);
97169721
case REACT_STRICT_MODE_TYPE:
9717-
fiberTag = 8;
9722+
owner = 8;
97189723
mode |= 8;
97199724
0 !== (mode & 1) &&
97209725
((mode |= 16),
@@ -9779,37 +9784,37 @@ function createFiberFromTypeAndProps(
97799784
);
97809785
case REACT_DEBUG_TRACING_MODE_TYPE:
97819786
if (enableDebugTracing) {
9782-
fiberTag = 8;
9787+
owner = 8;
97839788
mode |= 4;
97849789
break;
97859790
}
97869791
default:
97879792
if ("object" === typeof type && null !== type)
97889793
switch (type.$$typeof) {
97899794
case REACT_PROVIDER_TYPE:
9790-
fiberTag = 10;
9795+
owner = 10;
97919796
break a;
97929797
case REACT_CONTEXT_TYPE:
9793-
fiberTag = 9;
9798+
owner = 9;
97949799
break a;
97959800
case REACT_FORWARD_REF_TYPE:
9796-
fiberTag = 11;
9801+
owner = 11;
97979802
break a;
97989803
case REACT_MEMO_TYPE:
9799-
fiberTag = 14;
9804+
owner = 14;
98009805
break a;
98019806
case REACT_LAZY_TYPE:
9802-
fiberTag = 16;
9803-
owner = null;
9807+
owner = 16;
9808+
source = null;
98049809
break a;
98059810
}
98069811
throw Error(
98079812
formatProdErrorMessage(130, null == type ? type : typeof type, "")
98089813
);
98099814
}
9810-
pendingProps = createFiber(fiberTag, pendingProps, key, mode);
9815+
pendingProps = createFiber(owner, pendingProps, key, mode);
98119816
pendingProps.elementType = type;
9812-
pendingProps.type = owner;
9817+
pendingProps.type = source;
98139818
pendingProps.lanes = lanes;
98149819
return pendingProps;
98159820
}
@@ -10110,7 +10115,7 @@ var slice = Array.prototype.slice,
1011010115
return null;
1011110116
},
1011210117
bundleType: 0,
10113-
version: "18.3.0-www-classic-44782c01",
10118+
version: "18.3.0-www-classic-06724970",
1011410119
rendererPackageName: "react-art"
1011510120
};
1011610121
var internals$jscomp$inline_1302 = {
@@ -10141,7 +10146,7 @@ var internals$jscomp$inline_1302 = {
1014110146
scheduleRoot: null,
1014210147
setRefreshHandler: null,
1014310148
getCurrentFiber: null,
10144-
reconcilerVersion: "18.3.0-www-classic-44782c01"
10149+
reconcilerVersion: "18.3.0-www-classic-06724970"
1014510150
};
1014610151
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1014710152
var hook$jscomp$inline_1303 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

0 commit comments

Comments
 (0)