Skip to content

Commit 14232d2

Browse files
committed
[18] Add start/useTransition docs
1 parent 514195c commit 14232d2

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
@@ -529,7 +529,43 @@ TODO: description
529529
const [isPending, startTransition] = useTransition();
530530
```
531531

532-
TODO: description
532+
Returns a stateful value for the pending state of the transition, and a function to start it.
533+
534+
`startTransition` lets you mark updates in the provided callback as transitions:
535+
536+
```js
537+
startTransition(() => {
538+
setCount(count + 1);
539+
})
540+
```
541+
542+
`isPending` indicates when a transition is active to show a pending state:
543+
544+
```js
545+
function App() {
546+
const [isPending, startTransition] = useTransition();
547+
const [count, setCount] = useState(0);
548+
549+
function handleClick() {
550+
startTransition(() => {
551+
setCount(c => c + 1);
552+
})
553+
}
554+
555+
return (
556+
<div>
557+
{isPending && <Spinner />}
558+
<button onClick={handleClick}>{count}</button>
559+
</div>
560+
);
561+
}
562+
```
563+
564+
> Note:
565+
>
566+
> Updates in a transition yield to more urgent updates such as clicks.
567+
>
568+
> Updates in a transitions will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.
533569
534570
## Library Hooks {#library-hooks}
535571

content/docs/reference-react.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -379,9 +379,12 @@ While this is not supported today, in the future we plan to let `Suspense` handl
379379
```js
380380
React.startTransition(callback)
381381
```
382-
383-
TODO: description
382+
`React.startTransition` lets you mark updates inside the provided callback as transitions. This method is designed to be used outside a hook context when [`React.useTransition`](/docs/hooks-reference.html#usetransition) is not available.
384383

385384
> Note:
386-
>
387-
> TODO: useTransition
385+
>
386+
> Updates in a transition yield to more urgent updates such as clicks.
387+
>
388+
> Updates in a transitions will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.
389+
>
390+
> `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)