@samitouri / QOS-React-2 / commits / d1bb1c5861

Fix memory leak after repeated setState bailouts (#25309)

There's a global queue (`concurrentQueues` in the ReactFiberConcurrentUpdates module) that is cleared at the beginning of each render phase. However, in the case of an eager `setState` bailout where the state is updated to same value as the current one, we add the update to the queue without scheduling a render. So the render phase never removes it from the queue. This can lead to a memory leak if it happens repeatedly without any other updates. There's only one place where this ever happens, so the fix was pretty straightforward. Currently there's no great way to test this from a Jest test, so I confirmed locally by checking in an existing test whether the array gets reset. @sompylasar had an interesting suggestion for how to catch these in the future: in the development build (perhaps behind a flag), use a Babel plugin to instrument all module-level variables. Then periodically sweep to confirm if something has leaked. The logic is that if there's no React work scheduled, and a module-level variable points to an object, it very likely indicates a memory leak.

Andrew Clark committed Sep 22, 2022 at 11:19 UTC d1bb1c586117df11123859d1ef59228bbf7c750a
4 files changed +38
packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+13
@@ -32,6 +32,7 @@ import {
32 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
33 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
34 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
35 +import {getWorkInProgressRoot} from './ReactFiberWorkLoop.new';
36
37 export type ConcurrentUpdate = {
38 next: ConcurrentUpdate,
@@ -139,6 +140,18 @@ export function enqueueConcurrentHookUpdateAndEagerlyBailout<S, A>(
140 const concurrentQueue: ConcurrentQueue = (queue: any);
141 const concurrentUpdate: ConcurrentUpdate = (update: any);
142 enqueueUpdate(fiber, concurrentQueue, concurrentUpdate, lane);
143 +
144 + // Usually we can rely on the upcoming render phase to process the concurrent
145 + // queue. However, since this is a bail out, we're not scheduling any work
146 + // here. So the update we just queued will leak until something else happens
147 + // to schedule work (if ever).
148 + //
149 + // Check if we're currently in the middle of rendering a tree, and if not,
150 + // process the queue immediately to prevent a leak.
151 + const isConcurrentlyRendering = getWorkInProgressRoot() !== null;
152 + if (!isConcurrentlyRendering) {
153 + finishQueueingConcurrentUpdates();
154 + }
155 }
156
157 export function enqueueConcurrentClassUpdate<State>(
packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+13
@@ -32,6 +32,7 @@ import {
32 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
33 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
34 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
35 +import {getWorkInProgressRoot} from './ReactFiberWorkLoop.old';
36
37 export type ConcurrentUpdate = {
38 next: ConcurrentUpdate,
@@ -139,6 +140,18 @@ export function enqueueConcurrentHookUpdateAndEagerlyBailout<S, A>(
140 const concurrentQueue: ConcurrentQueue = (queue: any);
141 const concurrentUpdate: ConcurrentUpdate = (update: any);
142 enqueueUpdate(fiber, concurrentQueue, concurrentUpdate, lane);
143 +
144 + // Usually we can rely on the upcoming render phase to process the concurrent
145 + // queue. However, since this is a bail out, we're not scheduling any work
146 + // here. So the update we just queued will leak until something else happens
147 + // to schedule work (if ever).
148 + //
149 + // Check if we're currently in the middle of rendering a tree, and if not,
150 + // process the queue immediately to prevent a leak.
151 + const isConcurrentlyRendering = getWorkInProgressRoot() !== null;
152 + if (!isConcurrentlyRendering) {
153 + finishQueueingConcurrentUpdates();
154 + }
155 }
156
157 export function enqueueConcurrentClassUpdate<State>(
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+6
@@ -1912,6 +1912,9 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
1912 workInProgressRoot = null;
1913 workInProgressRootRenderLanes = NoLanes;
1914
1915 + // It's safe to process the queue now that the render phase is complete.
1916 + finishQueueingConcurrentUpdates();
1917 +
1918 return workInProgressRootExitStatus;
1919 }
1920
@@ -2017,6 +2020,9 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
2020 workInProgressRoot = null;
2021 workInProgressRootRenderLanes = NoLanes;
2022
2023 + // It's safe to process the queue now that the render phase is complete.
2024 + finishQueueingConcurrentUpdates();
2025 +
2026 // Return the final exit status.
2027 return workInProgressRootExitStatus;
2028 }
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+6
@@ -1912,6 +1912,9 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
1912 workInProgressRoot = null;
1913 workInProgressRootRenderLanes = NoLanes;
1914
1915 + // It's safe to process the queue now that the render phase is complete.
1916 + finishQueueingConcurrentUpdates();
1917 +
1918 return workInProgressRootExitStatus;
1919 }
1920
@@ -2017,6 +2020,9 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
2020 workInProgressRoot = null;
2021 workInProgressRootRenderLanes = NoLanes;
2022
2023 + // It's safe to process the queue now that the render phase is complete.
2024 + finishQueueingConcurrentUpdates();
2025 +
2026 // Return the final exit status.
2027 return workInProgressRootExitStatus;
2028 }