Q265 — How Many Times Does a Component Re-render When We Update State Multiple Times in One Go?

React batches multiple state updates into ONE re-render

(as long as the updates happen inside the same event loop — like inside a click handler, input handler, etc.)

---

✅ Example

const handleClick = () => {
  setCount(count + 1);
  setName("Teekam");
  setAge(25);
};

❓ How many re-renders occur?

👉 Only ONE re-render.
React batches them automatically.

---

🧠 BUT — There are two important exceptions:

---

✅ 1. Inside async code → multiple updates → NOT batched in old React (<18)

setTimeout(() => {
  setCount(c + 1);
  setName("TS");
}, 0);

Older React:

❌ Causes two re-renders

React 18+:

✔ React automatically batches async updates also
→ ONE re-render

---

✅ 2. If you manually force flush using flushSync

flushSync(() => setCount(count + 1));
flushSync(() => setName("TS"));

👉 This causes multiple re-renders (one per call)

---

⭐ Final Interview Answer

In React (18+), if you set state multiple times in the same event or function, React batches them and performs only one re-render.
Exceptions: using flushSync or some older versions of React where async updates were not batched.