@samitouri / QOS-React-2 / commits / 997f52fbb3

fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case (#27147)

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

Ruslan Lesiutin committed Aug 3, 2023 at 20:02 UTC 997f52fbb30ec4b777b66edcdd75f594d9fe0c55

2 files changed +13 -1

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

+12

@@ -2345,6 +2345,18 @@ export function attach(

2345 const prevFallbackChildSet = prevFiberChild

2346 ? prevFiberChild.sibling

2347 : 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 +

2360 if (

2361 nextFallbackChildSet != null &&

2362 prevFallbackChildSet != null &&

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

+1 -1

@@ -320,7 +320,7 @@ export function installHook(target: any): DevToolsHook | null {

320

321 let uidCounter = 0;

322

323 - function inject(renderer: ReactRenderer) {

323 + function inject(renderer: ReactRenderer): number {

324 const id = ++uidCounter;

325 renderers.set(id, renderer);

326