queueMicrotask Explained: The Smallest Async Queue in JavaScript

queueMicrotask Explained

queueMicrotask is a low-level JavaScript API that lets you schedule a function to run in the microtask queue.

It runs:

• After the current synchronous code
• Before any macrotasks (setTimeout, setInterval, requestAnimationFrame)
• Before rendering

🧠 What Is a Microtask?#

JavaScript has two main async queues:

JavaScript always drains the microtask queue fully before moving on.

⚙️ Basic Usage#

queueMicrotask(() => {
  console.log("microtask");
});

console.log("sync");

Output:

sync
microtask

🔍 queueMicrotask vs Promise.then#

⚠️ Error Behavior#

queueMicrotask(() => {
  throw new Error("boom");
});

This becomes a global error, not a rejected Promise.

🔁 Execution Order Example#

console.log("start");

setTimeout(() => console.log("timeout"), 0);
queueMicrotask(() => console.log("microtask"));
Promise.resolve().then(() => console.log("promise"));

console.log("end");

Output:

🚨 Microtask Starvation#

function loop() {
  queueMicrotask(loop);
}
loop();

This freezes the page because microtasks never finish.

🧩 When to Use#

✅ Precise scheduling
✅ Libraries / frameworks
❌ Delays or animations

✅ Summary#

✨ Final Takeaway#

queueMicrotask is powerful but sharp — use it only when you need microtask precision.