Skip to content

Commit 893bee1

Browse files
Update isPending and startTransition
Per [20976](facebook/react#20976), appears that isPending is now the first parameter.
1 parent 71d794d commit 893bee1

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

content/docs/concurrent-mode-patterns.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -79,16 +79,16 @@ Finally, we'll use it inside the `App` component:
7979
```js{3-5}
8080
function App() {
8181
const [resource, setResource] = useState(initialResource);
82-
const [startTransition, isPending] = useTransition({
82+
const [isPending, startTransition] = useTransition({
8383
timeoutMs: 3000
8484
});
8585
// ...
8686
```
8787

8888
**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`:
8989

90-
* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer.
9190
* `isPending` is a boolean. It's React telling us whether that transition is ongoing at the moment.
91+
* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer.
9292

9393
We will use them right below.
9494

@@ -130,10 +130,10 @@ If we make our API responses take 5 seconds, [we can confirm](https://codesandbo
130130

131131
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.
132132

133-
Our `useTransition()` call returns two values: `startTransition` and `isPending`.
133+
Our `useTransition()` call returns two values: `isPending` and `startTransition`.
134134

135135
```js
136-
const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });
136+
const [isPending, startTransition] = useTransition({ timeoutMs: 3000 });
137137
```
138138

139139
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
169169
```js{3-5,9,11,14,19}
170170
function App() {
171171
const [resource, setResource] = useState(initialResource);
172-
const [startTransition, isPending] = useTransition({
172+
const [isPending, startTransition] = useTransition({
173173
timeoutMs: 3000
174174
});
175175
return (
@@ -261,7 +261,7 @@ However, the experience feels really jarring. We were browsing a page, but it go
261261

262262
```js{2-5,9-11,21}
263263
function ProfilePage() {
264-
const [startTransition, isPending] = useTransition({
264+
const [isPending, startTransition] = useTransition({
265265
// Wait 10 seconds before fallback
266266
timeoutMs: 10000
267267
});
@@ -302,7 +302,7 @@ This can lead to a lot of repetitive code across components. This is why **we ge
302302

303303
```js{7-9,20,24}
304304
function Button({ children, onClick }) {
305-
const [startTransition, isPending] = useTransition({
305+
const [isPending, startTransition] = useTransition({
306306
timeoutMs: 10000
307307
});
308308
@@ -550,7 +550,7 @@ Our `Button` component will immediately show the Pending state indicator on clic
550550

551551
```js{2,13}
552552
function Button({ children, onClick }) {
553-
const [startTransition, isPending] = useTransition({
553+
const [isPending, startTransition] = useTransition({
554554
timeoutMs: 10000
555555
});
556556
@@ -681,7 +681,7 @@ As we mentioned earlier, if some state update causes a component to suspend, tha
681681
function App() {
682682
const [query, setQuery] = useState(initialQuery);
683683
const [resource, setResource] = useState(initialResource);
684-
const [startTransition, isPending] = useTransition({
684+
const [isPending, startTransition] = useTransition({
685685
timeoutMs: 5000
686686
});
687687

0 commit comments

Comments
 (0)