react

mirror of https://github.com/facebook/react.git synced 2026-02-23 20:23:02 +00:00

Files

Luna Ruan c3b18571db [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**
![image](https://user-images.githubusercontent.com/2735514/177655428-774ee306-0568-49ce-987e-b5213b613265.png)

**After**
![image](https://user-images.githubusercontent.com/2735514/177655604-a217583f-787e-438e-b6f9-18953fe32444.png)

2022-07-07 10:43:25 -04:00

src

[DevTools][Bugfix] Fix DevTools Perf Issue When Unmounting Large React Subtrees (#24863 )

2022-07-07 10:43:25 -04:00

babel.config.js

DevTools: Drop IE 11 support (#19875 )

2020-09-21 11:07:45 -04:00

buildUtils.js

added react native feature flags (#22199 )