diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 8ba19280fd1..c5a676ab12f 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -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 ( +
+ {isPending && } + +
+ ); +} +``` + +> 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} diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md index db1eea55d55..6284bb8ff67 100644 --- a/content/docs/reference-react.md +++ b/content/docs/reference-react.md @@ -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).