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:

start
end
microtask
promise
timeout

---

🚨 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.