Section "Queueing a Series of State Updates": await in event handler …

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

@@ -56,6 +56,25 @@ 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.
+---
+
+### 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.
+
+---
 
 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.