Frontend Mastery
Lesson 2 of 30 7% of course

Asynchronous JS: Event Loop, Microtasks, and Promises

17 · 8 min · 5/23/2026

Sign in to track progress and bookmarks.

The JavaScript Event Loop

JavaScript is Single-Threaded. Yet, it can handle thousands of concurrent API calls. How? By using the Event Loop. Understanding the priority of tasks is the difference between a smooth UI and a frozen browser.

1. Macrotasks vs Microtasks

  • Microtasks (VIP): Promises (.then, async/await). These run *immediately* after the current script finishes, before the browser renders anything.
  • Macrotasks (Standard): setTimeout, setInterval, fetch callbacks. These wait for the next turn of the event loop.

2. Blocking the Main Thread

If you run a heavy calculation (like sorting 1 million items) directly in your code, the Event Loop stops. The browser cannot paint, and the user cannot click. Architect Rule: Always offload heavy tasks to a Web Worker or break them into small chunks using requestIdleCallback.

4. Interview Mastery

Q: "What happens if an infinite loop occurs in a Microtask?"

Architect Answer: "The browser will **Freeze** and eventually crash. Because the Event Loop will keep processing the Microtask queue until it is empty *before* moving to the next task or rendering the UI. If you recursively call a Promise, the Macrotask queue (and the UI) will never get a turn. This is why you should be even more careful with async recursion than with standard loops."

Test your knowledge

Quizzes linked to this course—pass to earn certificates.

Browse all quizzes
Frontend Mastery

On this page

1. Macrotasks vs Microtasks 2. Blocking the Main Thread 4. Interview Mastery
1. Core Foundation & Modern JS
ES6+ for Architects: Closures, Generators, and Symbols Asynchronous JS: Event Loop, Microtasks, and Promises TypeScript Mastery: Advanced Types, Generics, and Utility Types
2. React Internals & Core Hooks
Virtual DOM vs Reconciliation: The Fiber Architecture Effective useState & useEffect: Avoiding infinite loops useMemo vs useCallback: When optimization becomes a bottleneck useContext + useReducer: Building a built-in state manager Custom Hooks: Extracting business logic for reusability
3. Professional State Management
Redux Toolkit (RTK): Slices, Selectors, and Thunks RTK Query: Automating API caching and synchronization Zustand: The lightweight alternative to Redux Signal-based State: The future of fine-grained reactivity
4. Performance & Rendering
Component Re-rendering: How to profile and fix slow UIs Lazy Loading & Code Splitting: Shrinking your bundle size Virtualization: Rendering million-row lists efficiently Web Workers: Offloading heavy calculations to background threads
5. Design Systems & CSS
Modern CSS: Grid, Flexbox, and Container Queries CSS-in-JS vs TailWindCSS: Choosing the right styling strategy Storybook: Building a shared component library Accessibility (a11y): Building inclusive web interfaces
6. Next.js & Modern Frameworks
Next.js App Router: SSR vs SSG vs ISR React Server Components (RSC): The end of the Waterfall Data Fetching Patterns: Streaming and Suspense SEO for Frontend: Meta Tags, JSON-LD, and Core Web Vitals
7. Testing & Security
Unit Testing: Vitest and React Testing Library E2E Testing: Playwright for mission-critical flows Frontend Security: XSS, CSRF, and Content Security Policy State Synchronization: Optimistic UI & WebSockets
8. Final Polish & Interview
Micro-Frontends: Scalable architecture for enterprise teams Frontend Architect Interview: System Design & Performance