Skip to content

Commit

Permalink
fix: devtools source field disappears after component remount (facebo…
Browse files Browse the repository at this point in the history
…ok#27297)

## Summary

Fixes: facebook#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
  • Loading branch information
idango10 authored and AndyPengc12 committed Apr 15, 2024
1 parent d8ea260 commit 6fe78f4
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 1 deletion.
7 changes: 6 additions & 1 deletion packages/react-reconciler/src/ReactFiber.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @flow
*/

import type {ReactElement} from 'shared/ReactElementType';
import type {ReactElement, Source} from 'shared/ReactElementType';
import type {ReactFragment, ReactPortal, ReactScope} from 'shared/ReactTypes';
import type {Fiber} from './ReactInternalTypes';
import type {RootTag} from './ReactRootTags';
Expand Down Expand Up @@ -490,6 +490,7 @@ export function createFiberFromTypeAndProps(
type: any, // React$ElementType
key: null | string,
pendingProps: any,
source: null | Source,
owner: null | Fiber,
mode: TypeOfMode,
lanes: Lanes,
Expand Down Expand Up @@ -643,6 +644,7 @@ export function createFiberFromTypeAndProps(
fiber.lanes = lanes;

if (__DEV__) {
fiber._debugSource = source;
fiber._debugOwner = owner;
}

Expand All @@ -654,8 +656,10 @@ export function createFiberFromElement(
mode: TypeOfMode,
lanes: Lanes,
): Fiber {
let source = null;
let owner = null;
if (__DEV__) {
source = element._source;
owner = element._owner;
}
const type = element.type;
Expand All @@ -665,6 +669,7 @@ export function createFiberFromElement(
type,
key,
pendingProps,
source,
owner,
mode,
lanes,
Expand Down
2 changes: 2 additions & 0 deletions packages/react-reconciler/src/ReactFiberBeginWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -531,6 +531,7 @@ function updateMemoComponent(
Component.type,
null,
nextProps,
null,
workInProgress,
workInProgress.mode,
renderLanes,
Expand Down Expand Up @@ -4014,6 +4015,7 @@ function beginWork(
workInProgress.type,
workInProgress.key,
workInProgress.pendingProps,
workInProgress._debugSource || null,
workInProgress._debugOwner || null,
workInProgress.mode,
workInProgress.lanes,
Expand Down
1 change: 1 addition & 0 deletions packages/react-reconciler/src/ReactFiberCommitWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -1697,6 +1697,7 @@ function detachFiberAfterEffects(fiber: Fiber) {
fiber.stateNode = null;

if (__DEV__) {
fiber._debugSource = null;
fiber._debugOwner = null;
}

Expand Down

0 comments on commit 6fe78f4

Please sign in to comment.