--- title: queueMicrotask() vs Promise.resolve().then(): Same... description: Both `queueMicrotask()` and `Promise.resolve().then()` schedule callbacks in JavaScript's microtask queue, executing after synchronous code but before... canonical: https://daily.dev/posts/queuemicrotask-vs-promise-resolve-then-same-queue-different-intent-7rgyfdzp7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: queueMicrotask() vs Promise.resolve().then(): Same Queue, Different Intent | daily.dev og:description: Both `queueMicrotask()` and `Promise.resolve().then()` schedule callbacks in JavaScript's microtask queue, executing after synchronous code but before... og:url: https://daily.dev/posts/queuemicrotask-vs-promise-resolve-then-same-queue-different-intent-7rgyfdzp7 og:image: https://api.daily.dev/og/posts/7rGYFdzp7.png og:image:alt: queueMicrotask() vs Promise.resolve().then(): Same Queue, Different Intent og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # queueMicrotask() vs Promise.resolve().then(): Same Queue, Different Intent **[MD. Abdur Rahman](https://daily.dev/sources/tydr94mxq8zhgecr8aqgu)** · [@rahmandevbd](https://daily.dev/rahmandevbd) · 2 min read · 0 upvotes · 0 comments ## Summary Both `queueMicrotask()` and `Promise.resolve().then()` schedule callbacks in JavaScript's microtask queue, executing after synchronous code but before macrotasks. While they share the same timing slot, their intent differs: `queueMicrotask` is a lightweight, semantically clear way to defer pure scheduling tasks (DOM batching, recursion yielding, custom elements), while `Promise.resolve().then()` suits async orchestration, error chaining, and Promise-based workflows. Key pitfalls include infinite loop risk from unbounded nesting and the need to polyfill `queueMicrotask` in older browsers. ## Content JavaScript's event loop relies on task queues to handle asynchronous code smoothly. Two popular methods—`queueMicrotask()` and `Promise.resolve().then()`—both push callbacks into the **microtask queue**, which runs right after synchronous code finishes, but before macrotasks like `setTimeout`. They feel similar, but their intent and use cases set them apart. ## The Microtask Queue Basics The event loop processes tasks in phases: first synchronous code, then **microtasks** (Promises, `queueMicrotask`), and finally **macrotasks** (timers, I/O). Both methods schedule in microtasks, so `queueMicrotask(fn)` `Promise.resolve().then(fn)` execute in the same timing slot—super fast, before the next paint or render. This FIFO queue drains completely before moving on, making nested calls predictably sequential. ### Example 1: Simple Yielding ``` // Both defer console.log until after sync code console.log('Sync first'); queueMicrotask(() => console.log('Microtask A')); Promise.resolve().then(() => console.log('Microtask B')); console.log('Sync last'); // Output: Sync first → Sync last → Microtask A → Microtask B ``` ### Example 2: DOM Updates (queueMicrotask Wins) For batched style changes without reflows: ``` queueMicrotask(() => { element.style.display = 'block'; element.textContent = 'Updated!'; // Single reflow after both }); ``` No Promise baggage—ideal for micro-optimizations. ### Example 3: Error-Prone Chains (Promise Shines) ``` Promise.resolve() .then(() => { throw new Error('Oops'); }) .catch(err => console.error('Handled:', err.message)); ``` Chaining handles failures gracefully. `queueMicrotask` can't do this natively. ## When to Choose What - **Pick **`queueMicrotask()` for explicit, lightweight deferrals: cleanup, yielding to browser (e.g., custom elements, animations), or avoiding stack overflows in recursion. It's semantically clearer—"I just need a tick." - **Stick to **`Promise.resolve().then()` for async patterns, testing Promise code, or when you might extend to real Promises later. It's more flexible but signals "Promise work." Pro tip: In libraries like React or Inertia.js, `queueMicrotask` reduces Promise allocations for perf gains. ## Common Pitfalls - **Not Instant**: Neither blocks sync code—don't use for sync-like needs. - **Infinite Loops**: Nesting without yielding crashes the tab (use sparingly). - **Older Browsers**: Polyfill `queueMicrotask` with `Promise` if needed. ## Wrapping Up They share the microtask queue but differ in intent: `queueMicrotask` for pure scheduling, Promises for async orchestration. Use the right tool to keep code readable and efficient—your future self (and browser) will thank you. Experiment in the console to feel the nuance! Got questions? Happy coding! 🚀 ## Similar posts on daily.dev - [How the JavaScript Runtime Schedules Callbacks: A Look at the Event Loop](https://daily.dev/posts/how-the-javascript-runtime-schedules-callbacks-a-look-at-the-event-loop-qkr1ufg7o) · Medium · 4 upvotes · 0 comments - [Rendering Is a Browser Decision, Not a JavaScript One](https://daily.dev/posts/rendering-is-a-browser-decision-not-a-javascript-one-ukimtnhiq) · Code Like A Girl · 3 upvotes · 0 comments - [Stop Calling Node.js “Single-Threaded”: A Look Under the Hood](https://daily.dev/posts/stop-calling-node-js-single-threaded-a-look-under-the-hood-ofsmhbjmm) · Medium · 6 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript) [View this post on daily.dev](https://daily.dev/posts/queuemicrotask-vs-promise-resolve-then-same-queue-different-intent-7rgyfdzp7) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/queuemicrotask-vs-promise-resolve-then-same-queue-different-intent-7rgyfdzp7","headline":"queueMicrotask() vs Promise.resolve().then(): Same Queue, Different Intent","text":"Both `queueMicrotask()` and `Promise.resolve().then()` schedule callbacks in JavaScript's microtask queue, executing after synchronous code but before macrotasks. While they share the same timing slot, their intent differs: `queueMicrotask` is a lightweight, semantically clear way to defer pure scheduling tasks (DOM batching, recursion yielding, custom elements), while `Promise.resolve().then()` suits async orchestration, error chaining, and Promise-based workflows. Key pitfalls include infinite loop risk from unbounded nesting and the need to polyfill `queueMicrotask` in older browsers.","url":"https://daily.dev/posts/queuemicrotask-vs-promise-resolve-then-same-queue-different-intent-7rgyfdzp7","datePublished":"2026-04-15T04:30:30.371Z","dateModified":"2026-04-15T04:32:35.011Z","author":{"@type":"Person","name":"MD. Abdur Rahman","url":"https://daily.dev/rahmandevbd","image":"https://lh3.googleusercontent.com/a/AEdFTp5yZevNGsQgWAYkDHEsvQH8iSc0-NO27rWG5TLh=s96-c","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":530}},"image":"https://media.daily.dev/image/upload/s--9-U4dRyL--/f_auto/v1776227431/posts/7rGYFdzp7?_a=BAMAMiWQ0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/tydr94mxq8zhgecr8aqgu","name":"MD. Abdur Rahman"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"MD. Abdur Rahman","item":"https://daily.dev/sources/tydr94mxq8zhgecr8aqgu"},{"@type":"ListItem","position":3,"name":"queueMicrotask() vs Promise.resolve().then(): Same Queue, Different Intent"}]} ```