Skip to content

Commit eaa6968

Browse files
authored
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
1 parent 4129ea8 commit eaa6968

File tree

3 files changed

+9
-1
lines changed

3 files changed

+9
-1
lines changed

packages/react-reconciler/src/ReactFiber.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @flow
88
*/
99

10-
import type {ReactElement} from 'shared/ReactElementType';
10+
import type {ReactElement, Source} from 'shared/ReactElementType';
1111
import type {ReactFragment, ReactPortal, ReactScope} from 'shared/ReactTypes';
1212
import type {Fiber} from './ReactInternalTypes';
1313
import type {RootTag} from './ReactRootTags';
@@ -490,6 +490,7 @@ export function createFiberFromTypeAndProps(
490490
type: any, // React$ElementType
491491
key: null | string,
492492
pendingProps: any,
493+
source: null | Source,
493494
owner: null | Fiber,
494495
mode: TypeOfMode,
495496
lanes: Lanes,
@@ -643,6 +644,7 @@ export function createFiberFromTypeAndProps(
643644
fiber.lanes = lanes;
644645

645646
if (__DEV__) {
647+
fiber._debugSource = source;
646648
fiber._debugOwner = owner;
647649
}
648650

@@ -654,8 +656,10 @@ export function createFiberFromElement(
654656
mode: TypeOfMode,
655657
lanes: Lanes,
656658
): Fiber {
659+
let source = null;
657660
let owner = null;
658661
if (__DEV__) {
662+
source = element._source;
659663
owner = element._owner;
660664
}
661665
const type = element.type;
@@ -665,6 +669,7 @@ export function createFiberFromElement(
665669
type,
666670
key,
667671
pendingProps,
672+
source,
668673
owner,
669674
mode,
670675
lanes,

packages/react-reconciler/src/ReactFiberBeginWork.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,7 @@ function updateMemoComponent(
531531
Component.type,
532532
null,
533533
nextProps,
534+
null,
534535
workInProgress,
535536
workInProgress.mode,
536537
renderLanes,
@@ -4013,6 +4014,7 @@ function beginWork(
40134014
workInProgress.type,
40144015
workInProgress.key,
40154016
workInProgress.pendingProps,
4017+
workInProgress._debugSource || null,
40164018
workInProgress._debugOwner || null,
40174019
workInProgress.mode,
40184020
workInProgress.lanes,

packages/react-reconciler/src/ReactFiberCommitWork.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1697,6 +1697,7 @@ function detachFiberAfterEffects(fiber: Fiber) {
16971697
fiber.stateNode = null;
16981698

16991699
if (__DEV__) {
1700+
fiber._debugSource = null;
17001701
fiber._debugOwner = null;
17011702
}
17021703

0 commit comments

Comments
 (0)