Section "Queueing a Series of State Updates": await in event handler cause immediate rerender

Signed-off-by: jzz <[email protected]>

Author: JZZICK

package.json

@@ -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",

src/content/learn/queueing-a-series-of-state-updates.md

@@ -67,17 +67,19 @@ But there is one other factor at play here. **React waits until *all* code in th
 >   before the handler completes.
 >
 > - This behavior differs from synchronous event handlers, where React waits until the entire handler
->   finishes.
+>    finishes.
 >
 > - Any state updates after the `await` will be treated as a separate batch,potentially causing multiple 
->   renders.
+>    renders.
 > 
-> To avoid this behavior, keep all state updates within a single synchronous batch, or avoid using `await`
->  inside event handlers when possible.
+> To avoid this behavior, keep all state updates within a single synchronous 
+> batch, or avoid using `await` inside event handlers when possible.
 
 ---
 
 
+-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.
+
 <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." />
 
 This lets you update multiple state variables--even from multiple components--without triggering too many [re-renders.](/learn/render-and-commit#re-renders-when-state-updates) But this also means that the UI won't be updated until _after_ your event handler, and any code in it, completes. This behavior, also known as **batching,** makes your React app run much faster. It also avoids dealing with confusing "half-finished" renders where only some of the variables have been updated.