Skip to content

Commit 3c6c1fd

Browse files
Update transition docs for React 19 (#6837)
* Add async transitions to React 19 docs * Updates from feedback * tweaks * grammar * Add startTranstion API * Apply suggestions from code review Co-authored-by: Noah Lemen <[email protected]> * Updated * capitalization * grammar --------- Co-authored-by: Noah Lemen <[email protected]>
1 parent ce05e3d commit 3c6c1fd

File tree

2 files changed

+626
-331
lines changed

2 files changed

+626
-331
lines changed

src/content/reference/react/startTransition.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ title: startTransition
44

55
<Intro>
66

7-
`startTransition` lets you update the state without blocking the UI.
7+
`startTransition` lets you render a part of the UI in the background.
88

99
```js
10-
startTransition(scope)
10+
startTransition(action)
1111
```
1212

1313
</Intro>
@@ -18,7 +18,7 @@ startTransition(scope)
1818

1919
## Reference {/*reference*/}
2020

21-
### `startTransition(scope)` {/*starttransitionscope*/}
21+
### `startTransition(action)` {/*starttransition*/}
2222

2323
The `startTransition` function lets you mark a state update as a Transition.
2424

@@ -41,7 +41,7 @@ function TabContainer() {
4141

4242
#### Parameters {/*parameters*/}
4343

44-
* `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no arguments and marks all state updates scheduled synchronously during the `scope` function call as Transitions. They will be [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators)
44+
* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](#preventing-unwanted-loading-indicators).
4545

4646
#### Returns {/*returns*/}
4747

@@ -53,13 +53,15 @@ function TabContainer() {
5353

5454
* You can wrap an update into a Transition only if you have access to the `set` function of that state. If you want to start a Transition in response to some prop or a custom Hook return value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead.
5555

56-
* The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as Transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as Transitions.
56+
* The function you pass to the of `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions.
57+
58+
* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
5759

5860
* A state update marked as a Transition will be interrupted by other state updates. For example, if you update a chart component inside a Transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input state update.
5961

6062
* Transition updates can't be used to control text inputs.
6163

62-
* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that will likely be removed in a future release.
64+
* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release.
6365

6466
---
6567

0 commit comments

Comments
 (0)