The Frontend Engineering Interview

Closures

A closure is a function that retains access to its outer scope even after the outer function has returned. This is one of the most common interview topics — not as a trivia question, but as a practical debugging and design concept.

• Know how closures create data privacy (module pattern, factory functions)
• The classic loop + closure bug: var in a loop with a timeout. Why it happens. How let fixes it. How an IIFE fixes it.
• Closures in React: why stale closures happen in useEffect and how to avoid them

The Event Loop

Understanding the event loop is what separates developers who guess at async behaviour from those who reason about it.

• Call stack → Web APIs → Callback queue → Event loop
• Microtasks (Promises, queueMicrotask) run before macrotasks (setTimeout, setInterval)
• Why Promise.resolve().then() runs before setTimeout(fn, 0)
• How this affects rendering: the browser paints between tasks, not between microtasks

Async/Await & Promises

• How Promises work under the hood — states: pending, fulfilled, rejected
• async/await is syntactic sugar over Promises — know what the compiled code looks like
• Error handling: try/catch with async/await vs .catch() on Promises
• Promise.all vs Promise.allSettled vs Promise.race — know when to use each
• Implement Promise.all from scratch — a classic interview task

this binding

• Regular functions: this depends on how the function is called
• Arrow functions: this is lexically bound — it takes this from the enclosing scope at definition time
• call, apply, bind — when and why you'd use each
• Class methods and losing this when passing them as callbacks

Essential array methods — implement from scratch

Interviewers often ask you to implement map, filter, or reduce to test whether you understand what they actually do.

• Array.prototype.map — returns a new array, same length, each element transformed
• Array.prototype.filter — returns a new array with only elements that pass the predicate
• Array.prototype.reduce — accumulates a single value. The most powerful, the least understood.
• debounce and throttle — implement both. Understand the difference: debounce delays until quiet, throttle limits frequency.

Hooks in depth

• useState — updates are asynchronous and batched in React 18. Never mutate state directly.
• useEffect — runs after render. The dependency array controls when. An empty array means "on mount only." No array means "after every render."
• useRef — persists a value across renders without triggering re-renders. Two use cases: DOM access and mutable values.
• useMemo — memoises a computed value. Use when the computation is expensive. Don't use it by default — there's overhead.
• useCallback — memoises a function reference. Useful when passing callbacks to child components that are wrapped in React.memo.
• useContext — reads from context. Know its limitations: all consumers re-render when the context value changes.

Reconciliation & the Virtual DOM

• React builds a Virtual DOM tree and diffs it against the previous tree on each render
• The key prop tells React how to match old and new elements. Wrong or missing keys cause unnecessary re-mounts.
• When a parent re-renders, all children re-render by default — unless wrapped in React.memo
• React 18 concurrent features: startTransition, automatic batching — know what they solve, even if you haven't used them

State management patterns

• Lifting state — move state to the nearest common ancestor of components that need it
• Prop drilling — passing props through many layers. The smell that leads to context or a state library.
• Context API — good for low-frequency updates (theme, auth user, language). Bad for high-frequency updates (every keystroke).
• External state (Redux, Zustand, Jotai) — know the tradeoffs. Zustand is simple; Redux is verbose but predictable at scale.
• Server state (React Query, SWR) — separate server-fetching concerns from UI state. Know why this matters.

Core concepts

• Box model — content → padding → border → margin. Know the difference between box-sizing: content-box and box-sizing: border-box. Use border-box and know why.
• Specificity — calculated as (inline, IDs, classes/attributes, elements). Higher specificity wins regardless of source order. !important overrides all — treat it as a last resort.
• Stacking context — z-index only works within the same stacking context. Elements with position, opacity < 1, or transform create new contexts.
• BEM — Block, Element, Modifier. A naming convention that prevents specificity wars and makes component styles self-documenting.

Flexbox & Grid

• Flexbox — one-dimensional layout. Know justify-content, align-items, flex-grow, flex-shrink, flex-basis. Understand the difference between main axis and cross axis.
• CSS Grid — two-dimensional layout. grid-template-columns, grid-template-rows, grid-area. auto-fill vs auto-fit with minmax for responsive grids without media queries.
• Know when to use Flexbox vs Grid: Flexbox for component-level layout, Grid for page-level layout.

Core Web Vitals

• LCP (Largest Contentful Paint) — how fast the main content loads. Target: under 2.5s. Fix by optimising images, preloading key resources, eliminating render-blocking scripts.
• INP (Interaction to Next Paint) — responsiveness. Fix by keeping the main thread unblocked — defer non-critical JS, use web workers for heavy computation.
• CLS (Cumulative Layout Shift) — visual stability. Fix by giving images explicit dimensions, avoiding injecting content above existing content.

Practical optimisation techniques

• Code splitting — split your bundle and load only what's needed for the current route. React.lazy + Suspense for component-level splitting.
• Tree shaking — dead code elimination at build time. Requires ES modules (import/export, not require).
• Image optimisation — modern formats (WebP, AVIF), responsive images with srcset, lazy loading with loading="lazy".
• Debounce & throttle — prevent expensive handlers from firing too frequently (scroll, resize, input).
• Memoisation — cache the results of expensive computations. In React: useMemo for values, useCallback for functions.

What to know

• Semantic HTML first — use <button>, <nav>, <main>, <article>. ARIA is for when semantic HTML isn't enough — not as a replacement.
• ARIA roles & attributes — aria-label, aria-expanded, aria-live, aria-hidden. Know when each is needed.
• Keyboard navigation — every interactive element must be reachable and operable with a keyboard. Focus order must make logical sense.
• Focus management in SPAs — when navigating between routes, move focus to the new page heading. When opening modals, trap focus inside. When closing, return focus to the trigger.
• Colour contrast — WCAG AA requires 4.5:1 for normal text. Know how to check it (browser DevTools, axe extension).