Fix: useDeferredValue should reuse previous value (#24413)
During an urgent update, useDeferredValue should reuse the previous value. The regression test I added shows that it was reverting to the initial value instead. The cause of the bug was trivial: the update path doesn't update the hook's `memoizedState` field. Only the mount path. None of the existing tests happened to catch this because to trigger the bug, you have to do an urgent update that isn't the first update after initial render. In all of the existing tests that included an urgent update, it was the first update, so the "previous" value and the initial value happened to be the same thing.
Andrew Clark committed
Apr 20, 2022 at 23:30 UTC
bd081376665f5f081dcf4bf72f06b7e563c8046d
3 files changed
+77
packages/react-reconciler/src/ReactFiberHooks.new.js
+1
@@ -1993,6 +1993,7 @@ function updateDeferredValueImpl<T>(hook: Hook, prevValue: T, value: T): T {
1993
markWorkInProgressReceivedUpdate();
1994
}
1995
1996
+ hook.memoizedState = value;
1997
return value;
1998
}
1999
}
packages/react-reconciler/src/ReactFiberHooks.old.js
+1
@@ -1993,6 +1993,7 @@ function updateDeferredValueImpl<T>(hook: Hook, prevValue: T, value: T): T {
1993
markWorkInProgressReceivedUpdate();
1994
}
1995
1996
+ hook.memoizedState = value;
1997
return value;
1998
}
1999
}
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
+75
@@ -221,4 +221,79 @@ describe('ReactDeferredValue', () => {
221
</div>,
222
);
223
});
224
+
225
+ it('regression test: during urgent update, reuse previous value, not initial value', async () => {
226
+ function App({value: propValue}) {
227
+ const [value, setValue] = useState(null);
228
+ if (value !== propValue) {
229
+ setValue(propValue);
230
+ }
231
+
232
+ const deferredValue = useDeferredValue(value);
233
+
234
+ const child = useMemo(() => <Text text={'Original: ' + value} />, [
235
+ value,
236
+ ]);
237
+
238
+ const deferredChild = useMemo(
239
+ () => <Text text={'Deferred: ' + deferredValue} />,
240
+ [deferredValue],
241
+ );
242
+
243
+ return (
244
+ <div>
245
+ <div>{child}</div>
246
+ <div>{deferredChild}</div>
247
+ </div>
248
+ );
249
+ }
250
+
251
+ const root = ReactNoop.createRoot();
252
+
253
+ // Initial render
254
+ await act(async () => {
255
+ root.render(<App value={1} />);
256
+ expect(Scheduler).toFlushUntilNextPaint(['Original: 1', 'Deferred: 1']);
257
+ expect(root).toMatchRenderedOutput(
258
+ <div>
259
+ <div>Original: 1</div>
260
+ <div>Deferred: 1</div>
261
+ </div>,
262
+ );
263
+ });
264
+
265
+ await act(async () => {
266
+ startTransition(() => {
267
+ root.render(<App value={2} />);
268
+ });
269
+ expect(Scheduler).toFlushUntilNextPaint(['Original: 2', 'Deferred: 2']);
270
+ expect(root).toMatchRenderedOutput(
271
+ <div>
272
+ <div>Original: 2</div>
273
+ <div>Deferred: 2</div>
274
+ </div>,
275
+ );
276
+ });
277
+
278
+ await act(async () => {
279
+ root.render(<App value={3} />);
280
+ // In the regression, the memoized value was not updated during non-urgent
281
+ // updates, so this would flip the deferred value back to the initial
282
+ // value (1) instead of reusing the current one (2).
283
+ expect(Scheduler).toFlushUntilNextPaint(['Original: 3']);
284
+ expect(root).toMatchRenderedOutput(
285
+ <div>
286
+ <div>Original: 3</div>
287
+ <div>Deferred: 2</div>
288
+ </div>,
289
+ );
290
+ expect(Scheduler).toFlushUntilNextPaint(['Deferred: 3']);
291
+ expect(root).toMatchRenderedOutput(
292
+ <div>
293
+ <div>Original: 3</div>
294
+ <div>Deferred: 3</div>
295
+ </div>,
296
+ );
297
+ });
298
+ });
299
});