You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Update useDeferredValue.md
change text from "re-render in background" to "re-render in the background"
* Update useDeferredValue.md
Change instances of "in background" to "in the background".
Copy file name to clipboardExpand all lines: src/content/reference/react/useDeferredValue.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -40,7 +40,7 @@ function SearchPage() {
40
40
41
41
#### Returns {/*returns*/}
42
42
43
-
During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in background with the new value (so it will return the updated value).
43
+
During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value).
44
44
45
45
#### Caveats {/*caveats*/}
46
46
@@ -76,7 +76,7 @@ function SearchPage() {
76
76
77
77
During the initial render, the <CodeStepstep={2}>deferred value</CodeStep> will be the same as the <CodeStepstep={1}>value</CodeStep> you provided.
78
78
79
-
During updates, the <CodeStepstep={2}>deferred value</CodeStep> will "lag behind" the latest <CodeStepstep={1}>value</CodeStep>. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in background.
79
+
During updates, the <CodeStepstep={2}>deferred value</CodeStep> will "lag behind" the latest <CodeStepstep={1}>value</CodeStep>. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in the background.
80
80
81
81
**Let's walk through an example to see when this is useful.**
82
82
@@ -508,7 +508,7 @@ You can think of it as happening in two steps:
508
508
509
509
1.**First, React re-renders with the new `query` (`"ab"`) but with the old `deferredQuery` (still `"a")`.** The `deferredQuery` value, which you pass to the result list, is *deferred:* it "lags behind" the `query` value.
510
510
511
-
2.**In background, React tries to re-render with *both*`query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready.
511
+
2.**In the background, React tries to re-render with *both*`query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready.
512
512
513
513
The deferred "background" rendering is interruptible. For example, if you type into the input again, React will abandon it and restart with the new value. React will always use the latest provided value.
514
514
@@ -952,7 +952,7 @@ While these techniques are helpful in some cases, `useDeferredValue` is better s
952
952
953
953
Unlike debouncing or throttling, it doesn't require choosing any fixed delay. If the user's device is fast (e.g. powerful laptop), the deferred re-render would happen almost immediately and wouldn't be noticeable. If the user's device is slow, the list would "lag behind" the input proportionally to how slow the device is.
954
954
955
-
Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
955
+
Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in the background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
956
956
957
957
If the work you're optimizing doesn't happen during rendering, debouncing and throttling are still useful. For example, they can let you fire fewer network requests. You can also use these techniques together.
0 commit comments