mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
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:
@@ -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 &&
|
||||
|
||||
2
packages/react-devtools-shared/src/hook.js
vendored
2
packages/react-devtools-shared/src/hook.js
vendored
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user