Difference between microtasks and macrotasks in JavaScript

Question

What’s the difference between microtasks and macrotasks in JavaScript?

Answer

The event loop handles tasks in two phases:

• Macrotasks: from callbacks like setTimeout, setInterval, I/O.
• Microtasks: from Promises, queueMicrotask, and async/await resolution.

Order of execution:

1. Execute one macrotask (main script)
2. Run all queued microtasks before the next macrotask

setTimeout(() => console.log('Macrotask'), 0);
Promise.resolve().then(() => console.log('Microtask'));
console.log('Main');

// Output:
// Main
// Microtask
// Macrotask

Real-World Example

Understanding task queues helps debug React batching, async race conditions, and rendering delays.

Quick Practice

Predict output order for setTimeout, Promise, and queueMicrotask together.

Summary

Microtasks are prioritized — they always run before the next macrotask cycle.