Skip to content

Commit

Permalink
[18] Add start/useTransition docs (#4479)
Browse files Browse the repository at this point in the history
* [18] Add start/useTransition docs

* Updates based on feedback
  • Loading branch information
rickhanlonii authored Mar 29, 2022
1 parent 3d3ccaf commit 5c44cc9
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 5 deletions.
38 changes: 37 additions & 1 deletion content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -565,7 +565,43 @@ Memoizing the children tells React that it only needs to re-render them when `de
const [isPending, startTransition] = useTransition();
```

TODO: description
Returns a stateful value for the pending state of the transition, and a function to start it.

`startTransition` lets you mark updates in the provided callback as transitions:

```js
startTransition(() => {
setCount(count + 1);
})
```

`isPending` indicates when a transition is active to show a pending state:

```js
function App() {
const [isPending, startTransition] = useTransition();
const [count, setCount] = useState(0);

function handleClick() {
startTransition(() => {
setCount(c => c + 1);
})
}

return (
<div>
{isPending && <Spinner />}
<button onClick={handleClick}>{count}</button>
</div>
);
}
```

> Note:
>
> Updates in a transition yield to more urgent updates such as clicks.
>
> 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.
### `useId` {#useid}

Expand Down
11 changes: 7 additions & 4 deletions content/docs/reference-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -383,9 +383,12 @@ a higher priority than neighboring boundaries. [Read more](https://github.com/re
```js
React.startTransition(callback)
```
TODO: description
`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.
> Note:
>
> TODO: useTransition
>
> Updates in a transition yield to more urgent updates such as clicks.
>
> Updates in a transitions will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.
>
> `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 comments on commit 5c44cc9

Please sign in to comment.