[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-categories":3,"post-understanding-javascript-event-loop":73,"parsed-post-cc8bd585-3068-4f04-89c3-1d2c1a1f6143":148},{"success":4,"data":5},true,{"items":6,"pagination":70},[7,16,24,32,40,48,56,63],{"id":8,"name":9,"description":10,"parentId":11,"createdAt":12,"updatedAt":12,"parent":11,"children":13,"_count":14},"ai-future","AI & The Future","Artificial intelligence and emerging technology",null,"2026-07-24T06:02:45.990Z",[],{"posts":15},1,{"id":17,"name":18,"description":19,"parentId":11,"createdAt":20,"updatedAt":20,"parent":11,"children":21,"_count":22},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":23},7,{"id":25,"name":26,"description":27,"parentId":11,"createdAt":28,"updatedAt":28,"parent":11,"children":29,"_count":30},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":31},3,{"id":33,"name":34,"description":35,"parentId":11,"createdAt":36,"updatedAt":36,"parent":11,"children":37,"_count":38},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":39},6,{"id":41,"name":42,"description":43,"parentId":11,"createdAt":44,"updatedAt":44,"parent":11,"children":45,"_count":46},"tutorials","Tutorials","Step-by-step learning guides","2026-07-24T06:02:44.965Z",[],{"posts":47},21,{"id":49,"name":50,"description":51,"parentId":11,"createdAt":52,"updatedAt":52,"parent":11,"children":53,"_count":54},"software-engineering","Software Engineering","Best practices, patterns, and principles","2026-07-24T06:02:44.689Z",[],{"posts":55},24,{"id":57,"name":58,"description":59,"parentId":11,"createdAt":60,"updatedAt":60,"parent":11,"children":61,"_count":62},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":39},{"id":64,"name":65,"description":66,"parentId":11,"createdAt":67,"updatedAt":67,"parent":11,"children":68,"_count":69},"web-development","Web Development","Frontend and backend web development tutorials and guides","2026-07-24T06:02:44.169Z",[],{"posts":55},{"page":15,"limit":71,"total":71,"totalPages":15,"hasNext":72,"hasPrev":72},8,false,{"success":4,"data":74},{"id":75,"slug":76,"title":77,"excerpt":78,"content":79,"status":80,"visibility":81,"featuredImage":82,"canonicalUrl":11,"readingTime":83,"viewCount":84,"commentEnabled":4,"publishedAt":85,"scheduledAt":11,"createdAt":86,"updatedAt":87,"seoTitle":88,"seoDescription":78,"seoKeywords":11,"authorId":89,"author":90,"coAuthors":95,"tags":96,"categories":112,"comments":115,"_count":116,"relatedPosts":118},"cc8bd585-3068-4f04-89c3-1d2c1a1f6143","understanding-javascript-event-loop","Understanding JavaScript Event Loop: Beyond the Basics","A deep dive into the JavaScript event loop, microtasks, macrotasks, and how they affect your application's performance.","## The Mental Model\n\nJavaScript is single-threaded, but that doesn't mean it can only do one thing. The event loop is the mechanism that makes asynchronous operations possible without threads.\n\n## The Execution Order\n\n```javascript\nconsole.log('1: Synchronous')\n\nsetTimeout(() => console.log('2: Macrotask'), 0)\n\nPromise.resolve().then(() => console.log('3: Microtask'))\n\nqueueMicrotask(() => console.log('4: Microtask via queueMicrotask'))\n\nconsole.log('5: Synchronous')\n```\n\nOutput:\n```\n1: Synchronous\n5: Synchronous\n3: Microtask\n4: Microtask via queueMicrotask\n2: Macrotask\n```\n\n::callout{icon=\"i-lucide-alert-triangle\" color=\"warning\"}\nMicrotasks (Promises, queueMicrotask) always execute before the next macrotask (setTimeout, setInterval, I\u002FO). This is why a recursive microtask can starve the event loop.\n::\n\n## The Full Picture\n\n1. **Call Stack** — Executes synchronous code\n2. **Microtask Queue** — Promises, MutationObserver, queueMicrotask\n3. **Macrotask Queue** — setTimeout, setInterval, I\u002FO, UI rendering\n4. **Animation Frames** — requestAnimationFrame callbacks\n\nAfter each macrotask completes, the engine drains **all** microtasks before moving to the next macrotask or rendering.\n\n## Real-World Impact: Chunking Heavy Work\n\n```typescript\n\u002F\u002F BAD: Blocks the main thread\nfunction processItems(items: Item[]) {\n  items.forEach(item => heavyComputation(item))\n}\n\n\u002F\u002F GOOD: Yields to the event loop between chunks\nasync function processItemsChunked(items: Item[], chunkSize = 50) {\n  for (let i = 0; i \u003C items.length; i += chunkSize) {\n    const chunk = items.slice(i, i + chunkSize)\n    chunk.forEach(item => heavyComputation(item))\n\n    \u002F\u002F Yield to allow UI updates and other tasks\n    await new Promise(resolve => setTimeout(resolve, 0))\n  }\n}\n```\n\n## Node.js Event Loop Phases\n\nIn Node.js, the event loop has additional phases:\n\n1. **Timers** — setTimeout\u002FsetInterval callbacks\n2. **Pending callbacks** — I\u002FO callbacks deferred from previous cycle\n3. **Idle\u002FPrepare** — Internal use\n4. **Poll** — Retrieve new I\u002FO events\n5. **Check** — setImmediate callbacks\n6. **Close** — Socket close events\n\n```javascript\n\u002F\u002F setImmediate vs setTimeout in Node.js\nsetImmediate(() => console.log('immediate'))\nsetTimeout(() => console.log('timeout'), 0)\n\u002F\u002F Order is non-deterministic at top level!\n\n\u002F\u002F But inside an I\u002FO callback, setImmediate always fires first:\nconst fs = require('fs')\nfs.readFile(__filename, () => {\n  setImmediate(() => console.log('immediate'))  \u002F\u002F Always first\n  setTimeout(() => console.log('timeout'), 0)\n})\n```\n\n## Key Takeaways\n\n- The event loop is **not** just \"callbacks run later\"\n- Microtasks have priority over macrotasks\n- Long synchronous code blocks everything — break it up\n- Understanding phases helps debug timing issues in Node.js\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1504639725590-34d0984388bd?w=1200&q=80",11,1035,"2026-07-15T06:02:56.332Z","2026-07-24T06:02:56.335Z","2026-07-28T17:17:09.662Z","Understanding JavaScript Event Loop: Beyond the Basics | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":91,"bio":92,"id":89,"name":93,"avatarUrl":94},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[97,102,107],{"id":98,"name":99,"color":100,"description":101},"javascript","JavaScript","#f7df1e","The language of the web",{"id":103,"name":104,"color":105,"description":106},"nodejs","Node.js","#339933","JavaScript runtime built on V8",{"id":108,"name":109,"color":110,"description":111},"performance","Performance","#e535ab","Web performance optimization",[113,114],{"id":64,"name":65,"description":66},{"id":49,"name":50,"description":51},[],{"comments":117},0,[119,128,138],{"id":120,"slug":121,"title":122,"excerpt":123,"featuredImage":124,"viewCount":125,"readingTime":71,"publishedAt":126,"author":127},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,"2026-07-23T06:02:46.910Z",{"id":89,"name":93,"avatarUrl":94},{"id":129,"slug":130,"title":131,"excerpt":132,"featuredImage":133,"viewCount":134,"readingTime":135,"publishedAt":136,"author":137},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",257,10,"2026-07-21T06:02:49.268Z",{"id":89,"name":93,"avatarUrl":94},{"id":139,"slug":140,"title":141,"excerpt":142,"featuredImage":143,"viewCount":144,"readingTime":145,"publishedAt":146,"author":147},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",990,12,"2026-07-19T06:02:51.753Z",{"id":89,"name":93,"avatarUrl":94},{"data":149,"body":151,"toc":417},{"title":150,"description":150},"",{"type":152,"children":153},"root",[154,163,169,175,187,192,202,213,219,265,277,283,293,299,304,367,375,381,412],{"type":155,"tag":156,"props":157,"children":159},"element","h2",{"id":158},"the-mental-model",[160],{"type":161,"value":162},"text","The Mental Model",{"type":155,"tag":164,"props":165,"children":166},"p",{},[167],{"type":161,"value":168},"JavaScript is single-threaded, but that doesn't mean it can only do one thing. The event loop is the mechanism that makes asynchronous operations possible without threads.",{"type":155,"tag":156,"props":170,"children":172},{"id":171},"the-execution-order",[173],{"type":161,"value":174},"The Execution Order",{"type":155,"tag":176,"props":177,"children":181},"pre",{"className":178,"code":179,"language":98,"meta":150,"style":180},"language-javascript","console.log('1: Synchronous')\n\nsetTimeout(() => console.log('2: Macrotask'), 0)\n\nPromise.resolve().then(() => console.log('3: Microtask'))\n\nqueueMicrotask(() => console.log('4: Microtask via queueMicrotask'))\n\nconsole.log('5: Synchronous')\n","undefined",[182],{"type":155,"tag":183,"props":184,"children":185},"code",{"__ignoreMap":150},[186],{"type":161,"value":179},{"type":155,"tag":164,"props":188,"children":189},{},[190],{"type":161,"value":191},"Output:",{"type":155,"tag":176,"props":193,"children":197},{"className":194,"code":196,"language":161},[195],"language-text","1: Synchronous\n5: Synchronous\n3: Microtask\n4: Microtask via queueMicrotask\n2: Macrotask\n",[198],{"type":155,"tag":183,"props":199,"children":200},{"__ignoreMap":150},[201],{"type":161,"value":196},{"type":155,"tag":203,"props":204,"children":207},"callout",{"color":205,"icon":206},"warning","i-lucide-alert-triangle",[208],{"type":155,"tag":164,"props":209,"children":210},{},[211],{"type":161,"value":212},"Microtasks (Promises, queueMicrotask) always execute before the next macrotask (setTimeout, setInterval, I\u002FO). This is why a recursive microtask can starve the event loop.",{"type":155,"tag":156,"props":214,"children":216},{"id":215},"the-full-picture",[217],{"type":161,"value":218},"The Full Picture",{"type":155,"tag":220,"props":221,"children":222},"ol",{},[223,235,245,255],{"type":155,"tag":224,"props":225,"children":226},"li",{},[227,233],{"type":155,"tag":228,"props":229,"children":230},"strong",{},[231],{"type":161,"value":232},"Call Stack",{"type":161,"value":234}," — Executes synchronous code",{"type":155,"tag":224,"props":236,"children":237},{},[238,243],{"type":155,"tag":228,"props":239,"children":240},{},[241],{"type":161,"value":242},"Microtask Queue",{"type":161,"value":244}," — Promises, MutationObserver, queueMicrotask",{"type":155,"tag":224,"props":246,"children":247},{},[248,253],{"type":155,"tag":228,"props":249,"children":250},{},[251],{"type":161,"value":252},"Macrotask Queue",{"type":161,"value":254}," — setTimeout, setInterval, I\u002FO, UI rendering",{"type":155,"tag":224,"props":256,"children":257},{},[258,263],{"type":155,"tag":228,"props":259,"children":260},{},[261],{"type":161,"value":262},"Animation Frames",{"type":161,"value":264}," — requestAnimationFrame callbacks",{"type":155,"tag":164,"props":266,"children":267},{},[268,270,275],{"type":161,"value":269},"After each macrotask completes, the engine drains ",{"type":155,"tag":228,"props":271,"children":272},{},[273],{"type":161,"value":274},"all",{"type":161,"value":276}," microtasks before moving to the next macrotask or rendering.",{"type":155,"tag":156,"props":278,"children":280},{"id":279},"real-world-impact-chunking-heavy-work",[281],{"type":161,"value":282},"Real-World Impact: Chunking Heavy Work",{"type":155,"tag":176,"props":284,"children":288},{"className":285,"code":286,"language":287,"meta":150,"style":180},"language-typescript","\u002F\u002F BAD: Blocks the main thread\nfunction processItems(items: Item[]) {\n  items.forEach(item => heavyComputation(item))\n}\n\n\u002F\u002F GOOD: Yields to the event loop between chunks\nasync function processItemsChunked(items: Item[], chunkSize = 50) {\n  for (let i = 0; i \u003C items.length; i += chunkSize) {\n    const chunk = items.slice(i, i + chunkSize)\n    chunk.forEach(item => heavyComputation(item))\n\n    \u002F\u002F Yield to allow UI updates and other tasks\n    await new Promise(resolve => setTimeout(resolve, 0))\n  }\n}\n","typescript",[289],{"type":155,"tag":183,"props":290,"children":291},{"__ignoreMap":150},[292],{"type":161,"value":286},{"type":155,"tag":156,"props":294,"children":296},{"id":295},"nodejs-event-loop-phases",[297],{"type":161,"value":298},"Node.js Event Loop Phases",{"type":155,"tag":164,"props":300,"children":301},{},[302],{"type":161,"value":303},"In Node.js, the event loop has additional phases:",{"type":155,"tag":220,"props":305,"children":306},{},[307,317,327,337,347,357],{"type":155,"tag":224,"props":308,"children":309},{},[310,315],{"type":155,"tag":228,"props":311,"children":312},{},[313],{"type":161,"value":314},"Timers",{"type":161,"value":316}," — setTimeout\u002FsetInterval callbacks",{"type":155,"tag":224,"props":318,"children":319},{},[320,325],{"type":155,"tag":228,"props":321,"children":322},{},[323],{"type":161,"value":324},"Pending callbacks",{"type":161,"value":326}," — I\u002FO callbacks deferred from previous cycle",{"type":155,"tag":224,"props":328,"children":329},{},[330,335],{"type":155,"tag":228,"props":331,"children":332},{},[333],{"type":161,"value":334},"Idle\u002FPrepare",{"type":161,"value":336}," — Internal use",{"type":155,"tag":224,"props":338,"children":339},{},[340,345],{"type":155,"tag":228,"props":341,"children":342},{},[343],{"type":161,"value":344},"Poll",{"type":161,"value":346}," — Retrieve new I\u002FO events",{"type":155,"tag":224,"props":348,"children":349},{},[350,355],{"type":155,"tag":228,"props":351,"children":352},{},[353],{"type":161,"value":354},"Check",{"type":161,"value":356}," — setImmediate callbacks",{"type":155,"tag":224,"props":358,"children":359},{},[360,365],{"type":155,"tag":228,"props":361,"children":362},{},[363],{"type":161,"value":364},"Close",{"type":161,"value":366}," — Socket close events",{"type":155,"tag":176,"props":368,"children":370},{"className":178,"code":369,"language":98,"meta":150,"style":180},"\u002F\u002F setImmediate vs setTimeout in Node.js\nsetImmediate(() => console.log('immediate'))\nsetTimeout(() => console.log('timeout'), 0)\n\u002F\u002F Order is non-deterministic at top level!\n\n\u002F\u002F But inside an I\u002FO callback, setImmediate always fires first:\nconst fs = require('fs')\nfs.readFile(__filename, () => {\n  setImmediate(() => console.log('immediate'))  \u002F\u002F Always first\n  setTimeout(() => console.log('timeout'), 0)\n})\n",[371],{"type":155,"tag":183,"props":372,"children":373},{"__ignoreMap":150},[374],{"type":161,"value":369},{"type":155,"tag":156,"props":376,"children":378},{"id":377},"key-takeaways",[379],{"type":161,"value":380},"Key Takeaways",{"type":155,"tag":382,"props":383,"children":384},"ul",{},[385,397,402,407],{"type":155,"tag":224,"props":386,"children":387},{},[388,390,395],{"type":161,"value":389},"The event loop is ",{"type":155,"tag":228,"props":391,"children":392},{},[393],{"type":161,"value":394},"not",{"type":161,"value":396}," just \"callbacks run later\"",{"type":155,"tag":224,"props":398,"children":399},{},[400],{"type":161,"value":401},"Microtasks have priority over macrotasks",{"type":155,"tag":224,"props":403,"children":404},{},[405],{"type":161,"value":406},"Long synchronous code blocks everything — break it up",{"type":155,"tag":224,"props":408,"children":409},{},[410],{"type":161,"value":411},"Understanding phases helps debug timing issues in Node.js",{"type":155,"tag":413,"props":414,"children":415},"style",{},[416],{"type":161,"value":150},{"title":150,"searchDepth":418,"depth":418,"links":419},2,[420,421,422,423,424,425],{"id":158,"depth":418,"text":162},{"id":171,"depth":418,"text":174},{"id":215,"depth":418,"text":218},{"id":279,"depth":418,"text":282},{"id":295,"depth":418,"text":298},{"id":377,"depth":418,"text":380}]