Suggest an edit

Improve this article

Refine the answer for “What are microtasks (microtasks)?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Microtasks** are small tasks that run **right after** the current code (the current macrotask), **before** the next macrotask from the queue starts.
They form a separate structure, the **Microtask Queue**.

---

## The key idea

JavaScript has two levels of tasks:

| Type | Examples | When it runs |
|---|---|---|
| **Macrotasks (Tasks)** | `setTimeout`, `setInterval`, DOM events, `fetch` callbacks | After the stack is cleared |
| **Microtasks** | `Promise.then`, `Promise.catch`, `queueMicrotask`, `MutationObserver` | Right after the current task, **before** the next macrotask |

That is, after the current code (for example, a function) finishes, the **Event Loop** first checks the **microtask queue**. If there are tasks in it, they all run **one after another** until the queue is empty.

---

## Example

```javascript
console.log('1');

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

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

console.log('4');
```

### Step by step:

1. `console.log('1')` -> runs immediately
**Output:** `1`
2. `setTimeout(..., 0)` -> the callback goes into the **macrotask queue** (task queue)
3. `Promise.then(...)` -> the callback goes into the **microtask queue**
4. `console.log('4')` -> runs immediately
**Output:** `4`
5. The current stack is empty -> **all microtasks** run -> `console.log('3')`
6. Only after that do macrotasks run -> `console.log('2')`

**Final output order:**

```javascript
1
4
3
2
```

---

## What creates microtasks

| Source | Example |
|---|---|
| **Promise** | `Promise.resolve().then(...)` |
| **queueMicrotask()** | `queueMicrotask(() => { ... })` |
| **MutationObserver** | Tracking DOM changes |

---

## Difference between microtasks and macrotasks

| Property | Microtasks | Macrotasks |
|---|---|---|
| Queue | Microtask Queue | Task Queue |
| Examples | `Promise.then`, `queueMicrotask` | `setTimeout`, `fetch`, `click` |
| Priority | **Higher**, run first | Lower |
| When they run | After the current code, but before the next event | After all microtasks |

---

## Be careful with microtasks

If you keep adding new microtasks from inside a `then` handler forever, the engine will **never reach** the next macrotask - you get a **"frozen" Event Loop**:

```javascript
function loop() {
  Promise.resolve().then(loop);
}
loop(); // the browser will hang
```

---

## Summary

| Term | Description |
|---|---|
| **Microtask** | A small task that runs after the current code and before the next macrotask |
| **Microtask Queue** | Holds callbacks from `Promise.then`, `queueMicrotask`, etc. |
| **Priority** | Higher than macrotasks |
| **Event Loop order** | Stack -> all microtasks -> the next macrotask |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts406 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.