What is the "microtask queue"?

JavaScriptJunior~2 min read

1. What the microtask queue is

The microtask queue is a queue of tasks that must run right after the current code, but before the next macrotask (for example, setTimeout, click, load, and so on).

In other words:

JavaScript runs your main code (the main script);
then it runs all microtasks (for example, .then() from a Promise);
and only then moves on to the next macrotask (for example, setTimeout).

2. Example (pay attention to the order)

javascript

console.log('1');

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

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

console.log('4');

Console output:

javascript

1
4
3 - Promise
2 - setTimeout

Why:

First, all synchronous code runs (1, 4);
Then - the microtasks (Promise.then);
And only then - the macrotasks (setTimeout).

3. Which operations create microtasks

Microtask source	Example
Promises	`Promise.resolve().then(...)`
MutationObserver	observing the DOM
queueMicrotask()	manually creating a microtask
async/await	a microtask is created inside `await`

4. Example with `queueMicrotask`

javascript

console.log('A');

queueMicrotask(() => console.log('B - microtask'));

console.log('C');

Output:

javascript

A
C
B - microtask

Microtask B runs after the current code finishes, but before any other events (setTimeout, and so on).

5. Example with Promises and setTimeout

javascript

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

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

queueMicrotask(() => console.log('microtask'));

Output:

javascript

promise
microtask
timeout

All microtasks run before setTimeout.

6. Execution order in the Event Loop (simplified)

javascript

Run all synchronous code (script)
Run all microtasks (Promise, queueMicrotask)
Move to the next macrotask (setTimeout, DOM events, etc.)
Repeat the cycle

7. Example with async/await

javascript

async function example() {
  console.log('start');
  await null; // creates a microtask
  console.log('end');
}

example();
console.log('after');

Output:

javascript

start
after
end

Why:

await pauses the function;
the code "after it" goes into the microtask queue;
after the current code finishes (after) - end runs.

8. Microtask vs macrotask

Type	Examples	When it runs
Microtask	`Promise.then`, `queueMicrotask`, `await`, `MutationObserver`	Right after the current code, before macrotasks
Macrotask	`setTimeout`, `setInterval`, `I/O`, `click`, `load`	After all microtasks, in the next Event Loop cycle

9. Example of the full picture

javascript

console.log('1');

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

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

queueMicrotask(() => console.log('4 - microtask'));

console.log('5');

Result:

javascript

1
5
3 - microtask
4 - microtask
2 - macrotask

Summary

Concept	What it is
Microtask queue	Queue of tasks that run after the current code, but before the next macrotask
Example sources	Promises, `queueMicrotask`, `await`, `MutationObserver`
When they run	After the main code and before `setTimeout`
Why they're needed	To handle asynchronous code quickly, without delays (for example, Promise results)

A simple way to remember it:

Microtasks run "between the lines" - right after your code.

Macrotasks (setTimeout, click) run "later", on the next step of the Event Loop.

Or in short: Promises -> microtasks -> faster than setTimeout.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.