Microtasks in depth

Microtasks: small jobs that wait for your code to finish

In the last lesson you met the event loop. Here is a short reminder:

• A task is one piece of work, like running your script or running a timer callback.
• JavaScript runs one task at a time, from start to end.
• The call stack is the list of functions that are running right now. When a task ends, the call stack is empty.

This lesson is about the short gap between one task and the next.

A microtask is a small job that waits for the current code to finish. It runs after the current task, but before the next task, such as a timer callback. Three things make microtasks:

• the callback you pass to .then on a promise,
• the callback you pass to queueMicrotask,
• the rest of an async function after await.

This lesson uses only a few facts about promises and await. The next lessons cover them in full. For now you need two facts:

• When a promise is settled (finished), its .then callback is added as a microtask.
• await x pauses an async function. The rest of the function runs later, as a microtask.

A promise is an object that will hold a result. A promise job is a microtask that calls a .then callback with that result. In the code below, Promise.resolve() makes a promise that already has its result. Even so, the .then callback does not run right away. JavaScript adds a job to the microtask queue that says: "call this callback with the result."

1console.log("sync A");2Promise.resolve().then(() => console.log("promise job"));3console.log("sync B");4// sync A, sync B, promise job

In plain words, line by line:

1. Line 1 prints sync A right away.
2. Line 2 adds the .then callback to the microtask queue. Nothing prints yet.
3. Line 3 prints sync B right away.
4. The script ends. Now the microtask runs and prints promise job.

1console.log("start");2Promise.resolve().then(() => console.log("first reaction"));3Promise.resolve().then(() => console.log("second reaction"));4console.log("end");5// start, end, first reaction, second reaction

Lines 2 and 3 each add one .then callback to the microtask queue. Lines 1 and 4 are ordinary code, so they print first: start, then end. Then the two callbacks run in the order they were added. So a .then callback runs after the ordinary lines, but before a timer callback.

queueMicrotask(fn) adds the function fn to the microtask queue. You call it directly, without a promise. Use it when you want a small follow-up job to run:

• after the current code finishes,
• but before timers, clicks, or the next screen update get a turn.

The table below lists the common ways to make a microtask, plus one way that is not a microtask. Read each row as: "when I write this, this gets added, and this is what to remember."

Promise jobs and queueMicrotask callbacks wait in the same queue. This queue is FIFO, which means "first in, first out", like a line at a shop. Whatever was added first runs first.

A microtask can also add another microtask. The new one goes to the back of the same queue, and it still runs before the next task. The experiment below shows this with a timer that is already waiting.

1console.log("task start");2setTimeout(() => console.log("timeout"), 0);3queueMicrotask(() => {4  console.log("micro 1");5  queueMicrotask(() => console.log("micro 2"));6});7Promise.resolve().then(() => console.log("promise"));8console.log("task end");

Next, see what happens when a .then callback throws an error.

1Promise.resolve()2  .then(() => {3    console.log("then A");4    throw new Error("boom");5  })6  .catch(() => console.log("caught rejection"));7queueMicrotask(() => console.log("queued microtask"));8console.log("sync");

Some browser callbacks look alike but run at different times. A MutationObserver watches part of the page, called the DOM, and calls you back when it changes. Read each row of the table as: "this callback waits here, and this is when it runs."

1const box = document.createElement("div");2const observer = new MutationObserver(() => console.log("mutation"));3observer.observe(box, { childList: true });4box.append("done");5console.log("sync");6// sync, mutation

In plain words, line by line:

1. Line 1 makes an empty div called box.
2. Line 2 makes an observer whose callback prints mutation.
3. Line 3 tells the observer to watch box for new children.
4. Line 4 adds the text done to the box. The callback does not run yet.
5. Line 5 prints sync.

The browser reports the change at the microtask checkpoint, so mutation prints after sync. This is one reason microtasks matter outside promise code.

An async function is a function written with the async keyword. Inside it you can use await. When you call one, this happens:

1. The function starts right away, like any other function.
2. When it reaches await x, it pauses.
3. The code that called it keeps running.
4. Later, the rest of the function runs as a microtask.

JavaScript engines have changed how many inner steps await takes, so don't try to count them. Predict the order from real runs, like the ones in this lesson.

1async function demo() {2  console.log("before await");3  await null;4  console.log("after await");5}6demo();7console.log("outside");8// before await, outside, after await

In plain words, in the order things happen:

1. Line 6 calls demo().
2. Line 2 prints before await right away.
3. Line 3 pauses demo.
4. Line 7 prints outside.
5. The script ends. The rest of demo runs as a microtask: line 4 prints after await.

1async function readValue() {2  console.log("before");3  const value = await 3;4  console.log("value", value);5}6readValue();7console.log("outside");8// before, outside, value 3

await does not need a promise. Line 3 waits for the number 3. JavaScript treats 3 like a promise that already has its result. The rest of the function still waits for a microtask. So before and outside print first, then value 3.

The puzzle gallery below has three await puzzles:

• a basic pause,
• two async functions that take turns,
• a thenable: a plain object that has its own then method.

Awaiting a thenable adds an extra step. JavaScript first calls the object's then method in a microtask. For that puzzle, this lesson states only the order that the real run shows.

Now practice the main skill: predict the order of the printed lines. For each puzzle, pick the lines one by one, in the order you think they print. Then run the puzzle for real in your browser and compare. The lesson tests also run every puzzle in Node 22, so every answer is checked.

1console.log("script");2Promise.resolve().then(() => console.log("promise"));3queueMicrotask(() => console.log("queueMicrotask"));4setTimeout(() => console.log("timeout"), 0);5console.log("end");

The player below steps through the second puzzle, the one that prints A to F. It shows what has printed, what waits in the microtask queue, and what waits as the next task. It is a teaching model, not a real debugger, but its final order comes from a real run. Each step shows one of these events:

• a promise job is added,
• a microtask is added with queueMicrotask,
• a timer task is added,
• a microtask runs,
• the timer task runs.

1console.log("A");Run2Promise.resolve().then(() => {3  console.log("B");4  Promise.resolve().then(() => console.log("D"));5});6queueMicrotask(() => console.log("C"));7setTimeout(() => console.log("E"), 0);8console.log("F");

Where you'll use microtasks

You won't often call queueMicrotask yourself. But promises and async functions are everywhere: loading data, updating the page, and testing. Knowing the order helps you fix bugs like "why did this print first?"

1let queued = false;2const pending = [];3 4function scheduleMessage(message) {5  pending.push(message);6  if (queued) return;7  queued = true;8  queueMicrotask(() => {9    queued = false;10    console.log(pending.join(", "));11    pending.length = 0;12  });13}14 15scheduleMessage("first");16scheduleMessage("second");17// first, second

This pattern is called batching: collect several small jobs, then handle them together. In plain words, line by line:

1. Line 1: queued remembers whether a microtask is already waiting.
2. Line 2: pending is a list that collects the messages.
3. Line 5 adds the message to the list.
4. Line 6: if a microtask is already waiting, the function stops here.
5. Lines 7 and 8: otherwise, it sets queued to true and adds one microtask.
6. Lines 9 to 11 run later: they reset queued, print every message, and empty the list.
7. Lines 15 and 16 call the function twice. Only the first call adds a microtask.

So the output is one line: first, second.

Keep the microtask short. If the work could take a long time, split it into tasks, such as timer callbacks, so the page can still respond.

1process.nextTick(() => console.log("nextTick"));2Promise.resolve().then(() => console.log("promise"));3queueMicrotask(() => console.log("queueMicrotask"));4console.log("sync");5// sync, nextTick, promise, queueMicrotask

In Node.js, process.nextTick adds a callback to a special Node queue. That queue runs before promise jobs and queueMicrotask callbacks. So this code prints sync, nextTick, promise, queueMicrotask. Don't use it in browser code: browsers have no process object and no nextTick queue.

Common misconceptions

Key takeaways

• A .then callback runs as a microtask, after the current code finishes.
• queueMicrotask adds a microtask directly. Keep that job small.
• await runs the code before it now, and the code after it later, as a microtask.
• All microtasks run before the next task, even ones added by other microtasks.
• Microtasks that keep adding more microtasks can block timers, clicks, and screen updates.

Up next: Callbacks.