Q266- What is the behaviour when we use async keyword in front of handleChange function with multiple setState statements?

Adding async to a React event handler does NOT change React’s rendering behavior.

React still batches state updates and triggers only one re-render — as long as the updates happen inside the same synchronous event loop.

---

✅ Example

const handleChange = async (e) => {
  setName(e.target.value);
  setCount(prev => prev + 1);
  setActive(true);
};

❓ What happens?

👉 Only ONE re-render
Because even with async, all state updates are still inside the same React-controlled event handler.

---

⭐ HOWEVER — Here’s the important part:

Using async does NOT break batching, but using await does.

---

❗ Case 1: async WITHOUT await

✔ Still batched
✔ Only one re-render

const handleChange = async () => {
  setA(1);
  setB(2);
};

👉 ONE re-render 🎉

---

❗ Case 2: async WITH await

❗ Behavior changes because await creates a microtask → breaking the event loop

const handleChange = async () => {
  setA(1);     // batched
  await Promise.resolve(); // breaks batching
  setB(2);     // causes a separate re-render (React < 18)
};

React < 18:

❌ Results in two re-renders
1 → for setA
2 → for setB after await

React 18+ (Automatic Batching Enabled):

✔ Still ONE re-render
React batches across async boundaries.

---

⭐ Summary Table

Scenario	React <18	React 18+
Multiple setState in sync handler	1 render	1 render
Async function without await	1 render	1 render
Async function with await	2 renders ❌	1 render ✔

---

🎯 Final Interview Answer

Simply marking a handler as async does nothing special in React.
React still batches multiple setState calls and performs only one re-render.
Only when you use await inside the function (React <18) batching breaks, causing multiple re-renders.
In React 18+, automatic batching works even with async/await, so only one re-render occurs.