dillon1000/react
Commit
Browse files [DevTools][Bugfix] Fix DevTools Perf Issue When Unmounting Large React Subtrees (#24863)
We've recently had multiple reports where, if React DevTools was installed, unmounting large React subtrees would take a huge performance hit (ex. from 50ms to 7 seconds). Digging in more, we realized for every fiber that unmounts, we called `untrackFibers`, which calls `clearTimeout` (and does some work manipulating a set, but this wasn't the bulk of the time). We ten call `recordUnmount`, which adds the timer back. Adding and removing the timer so many times was taking upwards of 50ms per timer add/remove call, which was resulting in exorbitant amounts of time spent in DevTools deleting subtrees. It looks like we are calling `untrackFibers` so many times to avoid a race condition with Suspense children where we unmount them twice (first a "virtual" unmount when the suspense boundary is toggled from visible to invisible, and then an actual unmount when the new children are rendered) without modifying `fiberIDMap`. We can fix this race condition by using the `untrackFibersSet` as a lock and not calling `recordUnmount` if the fiber is in the set and hasn't been processed yet. This works because the only way fibers are added in the set is via `recordUnmount` anyway. This PR also adds a test to make sure this change doesn't regress the previous behavior. **Before**  **After** 
Changed paths2 files
First-parent comparisonpackages/react-devtools-shared/src/__tests__/store-test.js ModifiedM packages/react-devtools-shared/src/backend/renderer.js ModifiedPatch
Files changed
Rendering syntax-highlighted changes…