What is queueMicrotask()? How does it differ from Promise.resolve().then()?

Question

Accepted Answer

In JavaScript, `queueMicrotask()` is a standard API (ES2020+) that allows you to schedule a function to run as a microtask. Microtasks are special callbacks that execute after the currently executing script completes but before the browser handles any pending tasks, such as rendering or I/O . Both `queueMicrotask()` and `Promise.resolve().then()` can be used to schedule microtasks, but they differ in their API design, performance characteristics, and error-handling behavior. // Using queueMicrotask
queueMicrotask(() => {
  console.log('This runs as a microtask');
});

// Using Promise.resolve().then()
Promise.resolve().then(() => {
  console.log('This also runs as a microtask');
});

console.log('Synchronous code runs first');

// Output:
// Synchronous code runs first
// This runs as a microtask
// This also runs as a microtask **Semantic Clarity**: `queueMicrotask()` clearly expresses the intent to schedule a microtask, while `Promise.resolve().then()` is a workaround that obscures the actual purpose . **Performance**: `queueMicrotask()` is more lightweight because it doesn't need to create a resolved Promise instance, reducing memory allocation and overhead . **Error Handling**: If the callback in `queueMicrotask()` throws an error, it becomes an unhandled rejection (or triggers the `error` event). In contrast, a `.then()` callback's error is caught and transformed into a rejected Promise, which may lead to silent failures if not explicitly handled . **API Simplicity**: `queueMicrotask()` takes a single function argument and returns nothing, while `Promise.resolve().then()` returns a new Promise, enabling chaining even when not needed . **Standardization**: `queueMicrotask()` is the official standard way to schedule microtasks, recognized by WHATWG and ECMAScript, whereas the Promise-based approach was always a community convention . // queueMicrotask error becomes unhandled rejection
queueMicrotask(() => {
  throw new Error('Failed in microtask');
});
// This triggers the 'error' event or unhandledrejection

// Promise.then error is caught and transformed
Promise.resolve().then(() => {
  throw new Error('Failed in then');
});
// This returns a rejected Promise; if not caught, it becomes unhandled
// But it can be chained with .catch()

// queueMicrotask cannot be chained
const result = queueMicrotask(() => {}); // result is undefined

// Promise.then returns a Promise that can be chained
const promise = Promise.resolve().then(() => {}); // promise is a Promise Before `queueMicrotask()` was standardized, developers commonly used `Promise.resolve().then()` to schedule microtasks. However, this approach had downsides: it created unnecessary Promise objects, had semantic ambiguity, and its error behavior could be confusing . The introduction of `queueMicrotask()` provides a dedicated, clear, and more efficient API for this specific need . It's now supported in all modern browsers and Node.js 11+ . You should prefer `queueMicrotask()` when you need to schedule a microtask for performance-critical code, in libraries, or when you want explicit semantics . Use `Promise.resolve().then()` when you're already working within a Promise chain or when you need the chaining capability that Promises provide . For simple microtask scheduling with no need for chaining, `queueMicrotask()` is the better choice. let updateQueue = [];
let processing = false;

batchUpdate('update 1');
batchUpdate('update 2');
console.log('End of sync code');

// Output:
// End of sync code
// Processing batch: ['update 1', 'update 2']

What is queueMicrotask()? How does it differ from Promise.resolve().then()?

queueMicrotask() is a standard API that directly schedules a microtask, while Promise.resolve().then() is a 'hack' that uses a resolved Promise to achieve the same effect, but with more overhead and different error-handling semantics.

What is queueMicrotask()? How does it differ from Promise.resolve().then()?

queueMicrotask() is a standard API that directly schedules a microtask, while Promise.resolve().then() is a 'hack' that uses a resolved Promise to achieve the same effect, but with more overhead and different error-handling semantics.

Scenario Questions

Follow-up Questions