Search for a command to run...
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
This microtask vs macrotask priority is something I ran into the hard way building an async agent orchestration system on Node.js. I had a chain of Promise.resolve() callbacks coordinating sub-processes, and a setTimeout(0) health check that kept getting starved because the microtask queue never fully drained between cycles.
Ended up refactoring the health checks to use setImmediate() on the I/O callback phase instead, which gave them a more predictable slot in the loop.
One thing I am curious about — have you noticed any practical difference in how queueMicrotask() behaves vs Promise.resolve().then() in terms of ordering? In theory they both hit the microtask queue, but I have seen some edge cases with nested microtasks where the scheduling felt slightly different.
Tidbits are small bites, yet yummy. Get programming insights from crisp articles brought to you by the tapaScript community.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
Ever wondered how JavaScript knows when to run your .then() block? Or why your console.log("done") appear before a resolved promise result? Let’s break it down in this quick TidBit!
A Promise is JavaScript’s way of saying:
“I’ll give you a value… eventually!”
It’s a placeholder for a result that’s either:
Fulfilled (Success)
Rejected (Failure)
Or still Pending
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data loaded!");
}, 1000);
});
promise.then((data) => console.log(data));
When resolve("Data loaded!") is called, the .then() block waits to execute — but where does it go meanwhile?
JavaScript is single-threaded. That means it can do one thing at a time. So how does it handle waiting, timers, and promises without freezing the app?
Enter the Event Loop.
It’s like a traffic controller — coordinating between:
Call Stack (where code runs)
Web APIs (like setTimeout, DOM)
Callback Queue
Microtask Queue (where .then() of Promises go)
Let’s see the order of execution:
console.log("Start");
Promise.resolve("Resolved").then((msg) => console.log(msg));
console.log("End");
Output:
Start
End
Resolved
But, Why?
Here’s how it plays out:
console.log("Start") ➝ runs immediately (Call Stack)
Promise.resolve(...).then(...) ➝ .then() is scheduled (Microtask Queue)
console.log("End") ➝ also runs immediately
After the current stack is empty, Event Loop picks microtasks → .then() runs
This is why Resolved appears after End, even though the promise is already resolved!
Let’s spice it up with a setTimeout:
console.log("Start");
setTimeout(() => {
console.log("From setTimeout");
}, 0);
Promise.resolve().then(() => {
console.log("From Promise");
});
console.log("End");
Output:
Start
End
From Promise
From setTimeout
Here, Microtasks (Promises) are given priority over macrotasks (setTimeout, etc.).
Promises don’t run instantly — their .then() goes to the microtask queue.
The Event Loop picks microtasks before other callbacks once the call stack is clear.
Even a setTimeout(..., 0) will wait behind a resolved Promise!
So next time your Promise resolves “later,” remember — it’s not late. It’s just politely waiting its turn in the queue.
That’s all for now. This article was originally published on tapaScript.io. Thank you for your time reading through it.
Learn about Event Loop along with JavaScript Promises, Call Stack, Task Queue Visually.
Day 27: How Your Async Code Works | JavaScript Event Loop Simplified! 🤩 - In this session, we’ll learn about how JavaScript executes code internally. This session uses visualizations to demonstrate the working of Call Stack, Event Loop, Promises, Web APIs, and more. Let's learn.