Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"debounce": "^1.2.1",
"github-slugger": "^1.3.0",
"next": "^13.4.1",
"next-remote-watch": "^1.0.0",
"next-remote-watch": "1.0.0",
"parse-numeric-range": "^1.2.0",
"react": "^0.0.0-experimental-16d053d59-20230506",
"react-collapsed": "4.0.4",
Expand Down
21 changes: 20 additions & 1 deletion src/content/learn/queueing-a-series-of-state-updates.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,26 @@ setNumber(0 + 1);

But there is one other factor at play here. **React waits until *all* code in the event handlers has run before processing your state updates.** This is why the re-render only happens *after* all these `setNumber()` calls.

This might remind you of a waiter taking an order at the restaurant. A waiter doesn't run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table.
---

### Important Caveat on Using `await` in Event Handlers {/*async-await-state-updates*/}

> **Note:** When using `await` inside an event handler:
>
> - React processes all state updates made before the `await` immediately,which triggers a rerender
> before the handler completes.
>
> - This behavior differs from synchronous event handlers, where React waits until the entire handler
> finishes.
>
> - Any state updates after the `await` will be treated as a separate batch,potentially causing multiple
> renders.
>
> To avoid this behavior, keep all state updates within a single synchronous batch, or avoid using `await`
> inside event handlers when possible.

---


<Illustration src="/images/docs/illustrations/i_react-batching.png" alt="An elegant cursor at a restaurant places and order multiple times with React, playing the part of the waiter. After she calls setState() multiple times, the waiter writes down the last one she requested as her final order." />

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/useMemo.md
Original file line number Diff line number Diff line change
Expand Up @@ -1105,7 +1105,7 @@ function ChatRoom({ roomId }) {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [options]); // ✅ Only changes when createOptions changes
}, [options]); // ✅ Only changes when createOption changes
// ...
```

Expand Down
Loading
Loading