Skip to content

Commit

Permalink
[DevTools][Bug] Fix Race Condition When Unmounting Fibers (#24510)
Browse files Browse the repository at this point in the history
When we delete fibers, we will call onCommitFiberUnmount on every deleted fiber to also remove them from the element tree. However, there are some cases where fibers aren't deleted but we still want to remove them from the element tree (ex. offscreen). In the second case, we recursively remove these children during handleCommitFiberRoot.

When we remove an element, we will untrack its corresponding fiber ID. However, because of fast refresh, we don't do this immediately, opting to instead add the value to a set to process later. However, before the set has been processed, we unmount that fiber again, we will get duplicate unmounts.

To fix this, handleCommitFiberRoot explicitly flushes all the fibers in the set before starting the deletion process. We also need to do this in handleCommitFiberUnmount in case handleCommitFiberRoot gets called first.
  • Loading branch information
lunaruan authored May 6, 2022
1 parent 46a6d77 commit d20c3af
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/react-devtools-shared/src/backend/renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -2630,6 +2630,10 @@ export function attach(
}

function handleCommitFiberUnmount(fiber) {
// Flush any pending Fibers that we are untracking before processing the new commit.
// If we don't do this, we might end up double-deleting Fibers in some cases (like Legacy Suspense).
untrackFibers();

// This is not recursive.
// We can't traverse fibers after unmounting so instead
// we rely on React telling us about each unmount.
Expand Down

0 comments on commit d20c3af

Please sign in to comment.