Skip to content

Commit d51a22a

Browse files
committed
Add startTranstion API
1 parent a4f87b4 commit d51a22a

File tree

2 files changed

+8
-6
lines changed

2 files changed

+8
-6
lines changed

src/content/reference/react/startTransition.md

Lines changed: 7 additions & 5 deletions
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 update without blocking the UI.
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 immediately calls `action` 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 request 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,7 +53,9 @@ 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`, 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

src/content/reference/react/useTransition.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ function SubmitButton({ submitAction }) {
107107

108108
* 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 value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead.
109109

110-
* 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, they won't be marked as Transitions.
110+
* 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`, they won't be marked as Transitions.
111111

112112
* 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)).
113113

0 commit comments

Comments
 (0)