Skip to content

Commit 5c44cc9

Browse files
authored
[18] Add start/useTransition docs (#4479)
* [18] Add start/useTransition docs * Updates based on feedback
1 parent 3d3ccaf commit 5c44cc9

File tree

2 files changed

+44
-5
lines changed

2 files changed

+44
-5
lines changed

content/docs/hooks-reference.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -565,7 +565,43 @@ Memoizing the children tells React that it only needs to re-render them when `de
565565
const [isPending, startTransition] = useTransition();
566566
```
567567

568-
TODO: description
568+
Returns a stateful value for the pending state of the transition, and a function to start it.
569+
570+
`startTransition` lets you mark updates in the provided callback as transitions:
571+
572+
```js
573+
startTransition(() => {
574+
setCount(count + 1);
575+
})
576+
```
577+
578+
`isPending` indicates when a transition is active to show a pending state:
579+
580+
```js
581+
function App() {
582+
const [isPending, startTransition] = useTransition();
583+
const [count, setCount] = useState(0);
584+
585+
function handleClick() {
586+
startTransition(() => {
587+
setCount(c => c + 1);
588+
})
589+
}
590+
591+
return (
592+
<div>
593+
{isPending && <Spinner />}
594+
<button onClick={handleClick}>{count}</button>
595+
</div>
596+
);
597+
}
598+
```
599+
600+
> Note:
601+
>
602+
> Updates in a transition yield to more urgent updates such as clicks.
603+
>
604+
> Updates in a transitions will not show a fallback for re-suspended content. This allows the user to continue interacting with the current content while rendering the update.
569605
570606
### `useId` {#useid}
571607

content/docs/reference-react.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -383,9 +383,12 @@ a higher priority than neighboring boundaries. [Read more](https://github.com/re
383383
```js
384384
React.startTransition(callback)
385385
```
386-
387-
TODO: description
386+
`React.startTransition` lets you mark updates inside the provided callback as transitions. This method is designed to be used when [`React.useTransition`](/docs/hooks-reference.html#usetransition) is not available.
388387
389388
> Note:
390-
>
391-
> TODO: useTransition
389+
>
390+
> Updates in a transition yield to more urgent updates such as clicks.
391+
>
392+
> Updates in a transitions will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.
393+
>
394+
> `React.startTransition` does not provide an `isPending` flag. To track the pending status of a transition see [`React.useTransition`](/docs/hooks-reference.html#usetransition).

0 commit comments

Comments
 (0)