diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index ac5e291738e..378a86cff32 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -79,7 +79,7 @@ Finally, we'll use it inside the `App` component: ```js{3-5} function App() { const [resource, setResource] = useState(initialResource); - const [startTransition, isPending] = useTransition({ + const [isPending, startTransition] = useTransition({ timeoutMs: 3000 }); // ... @@ -87,8 +87,8 @@ function App() { **By itself, this code doesn't do anything yet.** We will need to use this Hook's return values to set up our state transition. There are two values returned from `useTransition`: -* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer. * `isPending` is a boolean. It's React telling us whether that transition is ongoing at the moment. +* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer. We will use them right below. @@ -130,10 +130,10 @@ If we make our API responses take 5 seconds, [we can confirm](https://codesandbo There's still something that feels broken about [our last example](https://codesandbox.io/s/musing-driscoll-6nkie). Sure, it's nice not to see a "bad" loading state. **But having no indication of progress at all feels even worse!** When we click "Next", nothing happens and it feels like the app is broken. -Our `useTransition()` call returns two values: `startTransition` and `isPending`. +Our `useTransition()` call returns two values: `isPending` and `startTransition`. ```js - const [startTransition, isPending] = useTransition({ timeoutMs: 3000 }); + const [isPending, startTransition] = useTransition({ timeoutMs: 3000 }); ``` We've already used `startTransition` to wrap the state update. Now we're going to use `isPending` too. React gives this boolean to us so we can tell whether **we're currently waiting for this transition to finish**. We'll use it to indicate that something is happening: @@ -169,7 +169,7 @@ Let's take another look at all the changes we've made since the [original exampl ```js{3-5,9,11,14,19} function App() { const [resource, setResource] = useState(initialResource); - const [startTransition, isPending] = useTransition({ + const [isPending, startTransition] = useTransition({ timeoutMs: 3000 }); return ( @@ -261,7 +261,7 @@ However, the experience feels really jarring. We were browsing a page, but it go ```js{2-5,9-11,21} function ProfilePage() { - const [startTransition, isPending] = useTransition({ + const [isPending, startTransition] = useTransition({ // Wait 10 seconds before fallback timeoutMs: 10000 }); @@ -302,7 +302,7 @@ This can lead to a lot of repetitive code across components. This is why **we ge ```js{7-9,20,24} function Button({ children, onClick }) { - const [startTransition, isPending] = useTransition({ + const [isPending, startTransition] = useTransition({ timeoutMs: 10000 }); @@ -550,7 +550,7 @@ Our `Button` component will immediately show the Pending state indicator on clic ```js{2,13} function Button({ children, onClick }) { - const [startTransition, isPending] = useTransition({ + const [isPending, startTransition] = useTransition({ timeoutMs: 10000 }); @@ -681,7 +681,7 @@ As we mentioned earlier, if some state update causes a component to suspend, tha function App() { const [query, setQuery] = useState(initialQuery); const [resource, setResource] = useState(initialResource); - const [startTransition, isPending] = useTransition({ + const [isPending, startTransition] = useTransition({ timeoutMs: 5000 });