@samitouri / QOS-React-1 / commits / eaa696876e

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

## Summary Fixes: https://github.com/facebook/react/issues/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

idango10 committed Aug 29, 2023 at 18:42 UTC eaa696876ee40bb048727aefe995be1bbb7384a8

3 files changed +9 -1

packages/react-reconciler/src/ReactFiber.js

+6 -1

@@ -7,7 +7,7 @@

7 * @flow

8 */

10 -import type {ReactElement} from 'shared/ReactElementType';

10 +import type {ReactElement, Source} from 'shared/ReactElementType';

11 import type {ReactFragment, ReactPortal, ReactScope} from 'shared/ReactTypes';

12 import type {Fiber} from './ReactInternalTypes';

13 import type {RootTag} from './ReactRootTags';

@@ -490,6 +490,7 @@ export function createFiberFromTypeAndProps(

490 type: any, // React$ElementType

491 key: null | string,

492 pendingProps: any,

493 + source: null | Source,

494 owner: null | Fiber,

495 mode: TypeOfMode,

496 lanes: Lanes,

@@ -643,6 +644,7 @@ export function createFiberFromTypeAndProps(

644 fiber.lanes = lanes;

645

646 if (__DEV__) {

647 + fiber._debugSource = source;

648 fiber._debugOwner = owner;

649 }

650

@@ -654,8 +656,10 @@ export function createFiberFromElement(

656 mode: TypeOfMode,

657 lanes: Lanes,

658 ): Fiber {

659 + let source = null;

660 let owner = null;

661 if (__DEV__) {

662 + source = element._source;

663 owner = element._owner;

664 }

665 const type = element.type;

@@ -665,6 +669,7 @@ export function createFiberFromElement(

669 type,

670 key,

671 pendingProps,

672 + source,

673 owner,

674 mode,

675 lanes,

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -531,6 +531,7 @@ function updateMemoComponent(

531 Component.type,

532 null,

533 nextProps,

534 + null,

535 workInProgress,

536 workInProgress.mode,

537 renderLanes,

@@ -4013,6 +4014,7 @@ function beginWork(

4014 workInProgress.type,

4015 workInProgress.key,

4016 workInProgress.pendingProps,

4017 + workInProgress._debugSource || null,

4018 workInProgress._debugOwner || null,

4019 workInProgress.mode,

4020 workInProgress.lanes,

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -1697,6 +1697,7 @@ function detachFiberAfterEffects(fiber: Fiber) {

1697 fiber.stateNode = null;

1698

1699 if (__DEV__) {

1700 + fiber._debugSource = null;

1701 fiber._debugOwner = null;

1702 }

1703