Skip to content

Commit d8b20a9

Browse files
hoxyqAndyPengc12
authored andcommitted
fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case (facebook#27147)
Fixes facebook#26793. I have received a constantly reproducible example of the error, that is mentioned in the issue above. When starting `Reload and Profile` in DevTools, React reports an unmount of a functional component inside Suspense's fallback via [`onCommitFiberUnmount`](https://github.com/facebook/react/blob/3ff846d106de9273f59d1e4457793a5fcf625aef/packages/react-devtools-shared/src/hook.js#L408-L413) in [`commitDeletionEffectsOnFiber`](https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberCommitWork.js#L2025), but this fiber was never registered as mounted in DevTools. While debugging, I've noticed that in timed-out case for Suspense trees we only check if both previous fallback child set and next fiber fallback child set are non-null, but in these recursive calls there is also a case when previous fallback child set is null and next set is non-null, so we were skipping the branch. <img width="1746" alt="Screenshot 2023-07-25 at 15 26 07" src="https://github.com/facebook/react/assets/28902667/da21a682-9973-43ec-9653-254ba98a0a3f"> After these changes, the issue is no longer reproducible, but I am not sure if this is the right solution, since I don't know if this case is correct from reconciler perspective.
1 parent 16d08d5 commit d8b20a9

File tree

2 files changed

+13
-1
lines changed

2 files changed

+13
-1
lines changed

packages/react-devtools-shared/src/backend/renderer.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2345,6 +2345,18 @@ export function attach(
23452345
const prevFallbackChildSet = prevFiberChild
23462346
? prevFiberChild.sibling
23472347
: null;
2348+
2349+
if (prevFallbackChildSet == null && nextFallbackChildSet != null) {
2350+
mountFiberRecursively(
2351+
nextFallbackChildSet,
2352+
shouldIncludeInTree ? nextFiber : parentFiber,
2353+
true,
2354+
traceNearestHostComponentUpdate,
2355+
);
2356+
2357+
shouldResetChildren = true;
2358+
}
2359+
23482360
if (
23492361
nextFallbackChildSet != null &&
23502362
prevFallbackChildSet != null &&

packages/react-devtools-shared/src/hook.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ export function installHook(target: any): DevToolsHook | null {
320320

321321
let uidCounter = 0;
322322

323-
function inject(renderer: ReactRenderer) {
323+
function inject(renderer: ReactRenderer): number {
324324
const id = ++uidCounter;
325325
renderers.set(id, renderer);
326326

0 commit comments

Comments
 (0)