JS Microtasks vs Macrotasks: A Complete Guide

// Microtask example: Promise.then
Promise.resolve().then(() => console.log("Microtask"));
 
// Macrotask example: setTimeout
setTimeout(() => console.log("Macrotask"), 0);
 
console.log("Synchronous");
 
// Output:
// Synchronous
// Microtask   <-- Always before macrotask
// Macrotask

console.log("1");
 
setTimeout(() => console.log("2: setTimeout"), 0);
 
Promise.resolve()
  .then(() => {
    console.log("3: Promise 1");
    return Promise.resolve(); // Wrapping in a resolved promise adds another microtask tick
  })
  .then(() => console.log("4: Promise 2"));
 
queueMicrotask(() => console.log("5: queueMicrotask"));
 
setTimeout(() => console.log("6: setTimeout 2"), 0);
 
console.log("7");
 
// Output:
// 1
// 7
// 3: Promise 1      (microtask)
// 5: queueMicrotask (microtask)
// 4: Promise 2      (microtask -- added when Promise 1's then resolved)
// 2: setTimeout     (macrotask -- first task)
// 6: setTimeout 2   (macrotask -- second task, next iteration)

// Task: synchronous script
console.log("Task start");
 
Promise.resolve()
  .then(() => {
    console.log("Microtask 1");
    Promise.resolve().then(() => {
      console.log("Microtask 1.1 (added during drain)");
      Promise.resolve().then(() => {
        console.log("Microtask 1.1.1 (nested further)");
      });
    });
  });
 
Promise.resolve().then(() => console.log("Microtask 2"));
 
console.log("Task end");
 
// Output:
// Task start
// Task end
// Microtask 1
// Microtask 2          (parallel microtask, runs after Microtask 1)
// Microtask 1.1        (added by Microtask 1, runs before any macrotask)
// Microtask 1.1.1      (added by Microtask 1.1)
// (only NOW would a setTimeout callback run)

// DANGEROUS: Infinite microtask chain
function addInfiniteMicrotasks() {
  Promise.resolve().then(addInfiniteMicrotasks);
}
addInfiniteMicrotasks();
// setTimeout NEVER fires:
setTimeout(() => console.log("Never"), 0);
// Page never re-renders (if in browser)

// NOT dangerous (but still burns CPU)
function scheduleMacrotask() {
  setTimeout(scheduleMacrotask, 0);
}
scheduleMacrotask();
// Page CAN re-render between each task iteration

// Similar behavior, different APIs:
queueMicrotask(() => console.log("Via queueMicrotask"));
Promise.resolve().then(() => console.log("Via Promise.resolve()"));
 
// Both run as microtasks in definition order:
// "Via queueMicrotask"
// "Via Promise.resolve()"

// Use case: Defer a callback to after current sync code without creating a Promise
class EventEmitter {
  constructor() {
    this.listeners = new Map();
    this._pendingEvents = [];
  }
 
  emit(event, data) {
    const handlers = this.listeners.get(event) || [];
 
    // Queue all handlers as microtasks
    // They run after current sync code but before any macrotask
    handlers.forEach((handler) => {
      queueMicrotask(() => handler(data));
    });
  }
 
  on(event, handler) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, []);
    }
    this.listeners.get(event).push(handler);
  }
}
 
const emitter = new EventEmitter();
emitter.on("data", (d) => console.log("Handler:", d));
emitter.emit("data", 42);
console.log("After emit");
 
// Output:
// After emit
// Handler: 42

async function a() {
  console.log("a start");
  await Promise.resolve(); // Yield -- continuation is a microtask
  console.log("a after await");
}
 
async function b() {
  console.log("b start");
  await Promise.resolve(); // Yield
  console.log("b after await");
}
 
a();
b();
console.log("sync");
 
// Output:
// a start
// b start
// sync
// a after await   (a resumed first, since it awaited first)
// b after await

async function multi() {
  console.log("1");
  await null; // One microtask tick
  console.log("3");
  await null; // Another microtask tick
  console.log("5");
}
 
multi(); // Starts synchronously
console.log("2"); // Sync code runs before async continuations
 
setTimeout(() => console.log("6 (task)"), 0); // Macrotask
 
Promise.resolve().then(() => console.log("4 (microtask)"));
 
// Output: 1, 2, 3, 4, 5, 6
// 1: multi() starts sync
// 2: sync continues
// 3: first await resolves (microtask)
// 4: queueing microtask runs
// 5: second await resolves (microtask)
// 6: setTimeout fires (macrotask)

// Both mutations happen before the browser repaints
Promise.resolve()
  .then(() => {
    element.style.opacity = "0";
    element.style.transform = "translateY(-10px)";
  })
  .then(() => {
    // Still a microtask -- still before render
    element.classList.add("hidden");
  });
 
// Browser renders once after both microtasks finish

function timedComparison() {
  const results = [];
 
  setTimeout(() => results.push("setTimeout"), 0);
  Promise.resolve().then(() => results.push("Promise.then"));
  queueMicrotask(() => results.push("queueMicrotask"));
 
  // At this point, synchronous code is done
  // Microtask queue will drain first, then setTimeout fires
 
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(results);
    }, 10);
  });
}
 
timedComparison().then((r) => console.log(r));
// ["Promise.then", "queueMicrotask", "setTimeout"]