Q305- What is concurrent rendering and batching in React?

Concurrent rendering is a React 18 feature that lets React prepare UI updates in the background, pause, resume, or discard work to keep the app responsive.

What it enables:

• Interruptible rendering
• Update prioritization (urgent vs non-urgent)
• Smooth user interactions during heavy updates

How it works (conceptually):

• React may start rendering an update
• If a higher-priority update occurs (e.g., typing), React pauses the low-priority work
• React commits only the latest, most relevant render

APIs that use concurrency:

• createRoot
• startTransition
• useTransition
• Suspense

Example: Marking non-urgent updates

import { startTransition } from "react";

startTransition(() => {
  setResults(expensiveFilter(data));
});

✔ Keeps typing responsive while filtering runs in the background

---

✅ Batching

Batching means React groups multiple state updates into a single re-render for better performance.

Before React 18:

• Batching only inside React event handlers

React 18+ (Automatic Batching):

• Batching works everywhere:
  • setTimeout
  • Promises
  • Native events
  • Async/await

Example:

setCount(c => c + 1);
setName("Teekam");
setActive(true);

👉 Only ONE re-render (batched)

---

🔥 Automatic Batching Example (Async)

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(true);
}, 0);

• React < 18 → ❌ 2 re-renders
• React 18+ → ✔ 1 re-render

---

🧠 How They Work Together

• Concurrent rendering decides when and with what priority work happens
• Batching decides how many renders happen

Together they:

• Reduce unnecessary renders
• Keep the UI responsive
• Improve perceived performance

---

🆚 Quick Comparison

Feature	Concurrent Rendering	Batching
Purpose	Responsiveness & prioritization	Fewer renders
Can pause work	✔ Yes	❌ No
Groups updates	❌ No	✔ Yes
React version	18+	All (automatic in 18+)

---

🎯 Short Interview Answer

Concurrent rendering allows React to interrupt and prioritize rendering work so the UI stays responsive, while batching groups multiple state updates into a single re-render.
In React 18, both work together to improve performance and user experience through automatic batching and prioritized rendering.

---

⭐ One-liner

Concurrent rendering keeps the UI responsive; batching keeps renders minimal.