JS Event Loop
js-event-loop
Code Snippets
React useEventListener Hook
Manually attaching DOM event listeners inside useEffect is repetitive and easy to misuse: forgotten cleanups leak handlers, and stale callbacks see old state. The useEventListener hook centralises the pattern so consumers just declare which event they care about. This snippet covers the basic window listener, a target-aware variant that supports any element ref, and a typed signature that picks the right event payload.
React useClickOutside Hook
Dropdowns, popovers, and modals all need to dismiss when the user clicks outside their wrapper. The useClickOutside hook centralises the listener wiring so feature components stay declarative. This snippet covers the pointerdown-based version, an ignore-list variant for portal triggers, and the keyboard escape sibling that completes the dismissal pattern.
Question Banks
Event Loop Trace Challenge
Mid-tier traces of the JavaScript event loop covering microtasks, macrotasks, and the interleaving of `setTimeout`, `Promise.then`, and `queueMicrotask`. Predict every line.
JavaScript Promise, async/await, and Event Loop Traces
Six traces emphasizing microtask vs macrotask ordering, `Promise.all` timing, `await`-as-microtask sequencing, and the classic `var` + `setTimeout` loop pitfall.
Debounce, Throttle, and Rate Limiting Quiz
Implement the rate-limiting primitives that ship in every UI codebase: debounce, throttle, leading-edge debounce, and `requestAnimationFrame`-paced throttling.
Community
JS Questions I Ask Senior Frontend Candidates
A 5-question screen I run on every senior frontend candidate. Each one has a junior answer that passes, a mid-level answer that almost passes, and a senior answer I am actually looking for.
Promises, await, and the Microtask Queue
What a microtask actually is, why Promise.resolve().then never runs synchronously, how await schedules continuations as microtasks, and the four-column trace I run when ordering surprises me.
The JavaScript Event Loop: Tasks, Microtasks, and Rendering
A trace-by-hand walkthrough of the event loop: pick a macrotask, drain microtasks to empty, then optionally render. Worked example interleaves setTimeout, Promise, queueMicrotask, await, and requestAnimationFrame.