All 10 Event Loop & Concurrency questions
More in Event Loop & Concurrency
Is JavaScript single-threaded, and what does that mean in practice? What is the call stack? What is the difference between the microtask queue and the macrotask (task) queue? Why does a long synchronous function block UI updates and event handling? Why does Promise.resolve().then(cb) run before setTimeout(cb, 0), even with a 0ms delay? How would you break a large synchronous task into chunks to keep the UI responsive? What is 'starvation' of the macrotask queue, and how can recursive microtasks cause it? How does async/await map onto the microtask queue under the hood? What's the relationship between requestAnimationFrame and the event loop's rendering step?
Advertisement
Back to results for “Event Loop & Concurrency”
JavaScript › Event Loop & Concurrency

How does the event loop decide what to run next?

Intermediate

Answer

After each synchronous script (or a single macrotask) finishes, the event loop first fully drains the microtask queue, then renders any pending UI updates, then picks up the next macrotask from the queue — repeating this cycle continuously.
// Simplified loop:
// while (true) {
//   runOneMacrotask();
//   drainAllMicrotasks();
//   renderIfNeeded();
// }
Real-world example Explaining why UI updates can appear to 'batch' after several synchronous state changes but before the next repaint.

Common follow-ups: Where do requestAnimationFrame callbacks fit into this cycle?

Async Iterators & Streams
All 10 Event Loop & Concurrency questions