Skip to content

Commit d46df99

Browse files
committed
fix: correct formatting and improve clarity in useOptimistic.md
1 parent 38b52cf commit d46df99

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

src/content/reference/react/useOptimistic.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1061,7 +1061,7 @@ If the values are not equal, there's a Transition in progress.
10611061
10621062
2. **Add a `useTransition`**
10631063
1064-
```
1064+
```js
10651065
const [isPending, startTransition] = useTransition();
10661066
const [optimistic, setOptimistic] = useOptimistic(value);
10671067

@@ -1073,11 +1073,13 @@ startTransition(() => {
10731073
10741074
Since `useTransition` uses `useOptimsitic` for `isPending` under the hood, this is equivalent to option 1.
10751075
1076-
3**Add a `pending` flag in your reducer**
1076+
3. **Add a `pending` flag in your reducer**
10771077
10781078
```js
10791079
const [optimistic, addOptimistic] = useOptimistic(
10801080
items,
10811081
(state, newItem) => [...state, { ...newItem, isPending: true }]
10821082
);
10831083
```
1084+
1085+
Since each optimistic item has its own flag, you can show loading state for individual items.

0 commit comments

Comments
 (0)