Microtasks

The microtask queue is a special queue with higher priority than the macrotask queue. All microtasks are processed before the next macrotask.

Key Characteristics

• Microtasks are processed after the current synchronous code completes
• ALL microtasks in the queue are drained before processing one macrotask
• If a microtask adds another microtask, it's processed in the same cycle

console.log('Start');

Promise.resolve().then(() => {
  console.log('Microtask 1');
}).then(() => {
  console.log('Microtask 2');
});

console.log('End');

// Output:
// Start
// End
// Microtask 1
// Microtask 2

When Microtasks are Created

1. Promise.then(), Promise.catch(), Promise.finally()
2. queueMicrotask()
3. MutationObserver (DOM changes)

// Using queueMicrotask()
console.log('Before');

queueMicrotask(() => {
  console.log('Microtask');
});

console.log('After');
// Output: Before, After, Microtask

Promise callbacks are the most common microtasks. Every .then(), .catch(), and .finally() callback becomes a microtask.

const promise = new Promise((resolve) => {
  resolve(42);
});

// Each .then() creates a new microtask
promise
  .then(value => {
    console.log(value); // 42
    return value * 2;
  })
  .then(value => {
    console.log(value); // 84
  });

// Output: 42, 84 (both are microtasks)

Promise Resolution Order

Promise.resolve()
  .then(() => console.log('1'))
  .then(() => console.log('2'));

Promise.resolve()
  .then(() => console.log('3'))
  .then(() => console.log('4'));

// Output: 1, 3, 2, 4
// First Promise: 1, then 2
// Second Promise: 3, then 4
// They interleave because microtasks are processed in order

Nested Promises

Promise.resolve()
  .then(() => {
    console.log('A');
    // This nested promise also creates a microtask
    return Promise.resolve().then(() => {
      console.log('B');
    });
  })
  .then(() => {
    console.log('C');
  });

// Output: A, B, C

Understanding the difference between microtasks and macrotasks is crucial for predicting async behavior.

Comparison

Feature	Microtask	Macrotask
Priority	High	Low
Processing	ALL before next macro	ONE per cycle
Examples	Promise, queueMicrotask	setTimeout, setInterval
When processed	After sync code, before macros	After microtasks

Execution Order Example

console.log('1 - sync');

setTimeout(() => {
  console.log('2 - macrotask');
}, 0);

Promise.resolve().then(() => {
  console.log('3 - microtask');
});

console.log('4 - sync');

// Output: 1, 4, 3, 2
// 1, 4: synchronous
// 3: microtask (higher priority)
// 2: macrotask (lower priority)

Nested Example

setTimeout(() => console.log('timeout1'), 0);
setTimeout(() => console.log('timeout2'), 0);

Promise.resolve()
  .then(() => console.log('promise1'))
  .then(() => console.log('promise2'));

// Output: promise1, promise2, timeout1, timeout2
// All microtasks process first, then all macrotasks

Common Mistake

// WRONG expectation: setTimeout with 0 runs first
setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

// Actually outputs: Promise, setTimeout
// Microtasks ALWAYS run before macrotasks