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`](3ff846d106/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.
This commit is contained in:
Ruslan Lesiutin
2023-08-03 20:02:18 +01:00
committed by GitHub
parent 493f72b0a7
commit 997f52fbb3
2 changed files with 13 additions and 1 deletions

View File

@@ -2345,6 +2345,18 @@ export function attach(
const prevFallbackChildSet = prevFiberChild
? prevFiberChild.sibling
: null;
if (prevFallbackChildSet == null && nextFallbackChildSet != null) {
mountFiberRecursively(
nextFallbackChildSet,
shouldIncludeInTree ? nextFiber : parentFiber,
true,
traceNearestHostComponentUpdate,
);
shouldResetChildren = true;
}
if (
nextFallbackChildSet != null &&
prevFallbackChildSet != null &&

View File

@@ -320,7 +320,7 @@ export function installHook(target: any): DevToolsHook | null {
let uidCounter = 0;
function inject(renderer: ReactRenderer) {
function inject(renderer: ReactRenderer): number {
const id = ++uidCounter;
renderers.set(id, renderer);