setTimeout(cb, 0): Why It Does Not Run Immediately in JavaScript

setTimeout(cb, 0): Why It Does Not Run Immediately

setTimeout(callback, 0) is a common pattern, but it does not run the callback immediately. Here is why and what it is actually useful for.

What Happens

setTimeout(() => console.log("later"), 0);
console.log("now");

Output: now, later.

1. The callback goes to the macrotask queue.
2. Synchronous code continues ("now" logs).
3. After the stack is empty and microtasks are done, the event loop moves the callback to the stack.
4. "later" logs.

Why It Does Not Run Immediately

setTimeout always goes through the Web API and the macrotask queue. The event loop only runs macrotasks when the call stack is empty. Even with 0 delay, the callback waits for synchronous code to finish.

Microtasks Run First

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

Output: promise, timeout. The promise callback (microtask) runs before the timer callback (macrotask).

What setTimeout(cb, 0) Is Useful For

1. Deferring work: let the browser render before a heavy task.
2. Breaking long tasks: process in chunks, yielding between them.
3. Allowing the browser to paint: show a loading state before blocking.

Better Alternatives

• queueMicrotask(fn): runs as a microtask (before the next macrotask).
• requestAnimationFrame(fn): runs before the next paint (for visual updates).
• requestIdleCallback(fn): runs when the browser is idle.

The Takeaway

setTimeout(cb, 0) does not run immediately. It goes to the macrotask queue and runs after the stack is empty and microtasks are done. It is useful for deferring work and breaking long tasks. For better alternatives, use queueMicrotask, requestAnimationFrame, or requestIdleCallback.