What frontend interviews actually test
A frontend loop usually spans four areas. The weighting shifts with the company — product-heavy teams lean on UI building and framework depth, platform teams lean on JavaScript fundamentals and system design — but you should prepare for all four.
- JavaScript & language fundamentals — closures, the event loop, promises, `this`, prototypes, and async behavior.
- UI coding — build a working, interactive component (autocomplete, tabs, a data table) from scratch, live.
- Frontend system design — architect a feature (a news feed, a design system, an infinite list) with real trade-offs.
- Browser & performance fundamentals — rendering, the critical path, accessibility, and where jank comes from.
JavaScript: know the language, not just the framework
Frameworks change; the language does not. Interviewers probe whether you understand what React or Vue is doing under the hood, because that is what predicts your ability to debug a gnarly production issue. Expect questions on closures, the event loop and microtask queue, promises and async/await, and how `this` binds.
The strongest answers connect the concept to real behavior: why a `setTimeout(…, 0)` still runs after synchronous code, why a stale closure captures the wrong value in a loop, why `Promise.all` short-circuits on the first rejection. Being able to reason about execution order out loud is the signal.
- Explain the event loop, the call stack, and the microtask vs. macrotask queues.
- Handle closures and scope deliberately — stale-closure bugs are a favorite trap.
- Know promise composition (all / race / allSettled) and error propagation.
- Be able to implement debounce, throttle, and a basic event emitter from memory.
The UI coding round: build something that works
This is the round that most reliably separates frontend engineers from generalists. You will be asked to build an interactive component live — commonly an autocomplete, a tabbed interface, a modal, a star rating, or a small data grid. Correctness and interaction quality matter more than a perfect visual.
Structure it: clarify the requirements and states (loading, empty, error, keyboard), sketch the component API, build the happy path first, then handle edge cases and accessibility. Manage state deliberately and explain your re-render boundaries. Narrate as you go — a working component with a clear thought process beats a half-styled one built in silence.
- Enumerate states up front: loading, empty, error, disabled, and keyboard interaction.
- Get a working happy path on screen early, then layer in edge cases.
- Handle accessibility (focus management, ARIA roles, keyboard nav) — it is real signal, not a nicety.
- Watch for unnecessary re-renders and explain how you would avoid them.
Frontend system design
At mid and senior levels you will get an open-ended design prompt — "design a news feed," "design a component library," "design an image carousel that scales." The interviewer wants to see you drive architecture: component decomposition, data fetching and caching, state management, rendering strategy, and performance.
Use a frame: clarify requirements and scale, define the component tree and the data model, choose a rendering and data-fetching strategy (SSR vs. client, pagination vs. infinite scroll, cache invalidation), then go deep on performance and accessibility. Name the trade-offs — bundle size vs. features, optimistic updates vs. consistency, virtualization vs. simplicity.
- Decompose into components with clear responsibilities and data flow.
- Choose a data-fetching and caching strategy and justify it (pagination, prefetch, invalidation).
- Plan for performance: code splitting, virtualization for long lists, image loading.
- Treat accessibility and internationalization as first-class design constraints.
Browser and performance fundamentals
Interviewers probe browser internals because they predict whether you can diagnose a slow or janky page. You do not need to memorize spec details, but you should reason about the rendering pipeline and the common causes of poor performance.
- The critical rendering path, reflow vs. repaint, and what triggers layout thrash.
- Core Web Vitals (LCP, CLS, INP) and the concrete levers that move each.
- Bundle size, code splitting, tree shaking, and lazy loading.
- Caching, CDNs, and the difference between memory, disk, and service-worker caches.
How to prepare
Prioritize the UI coding round and JavaScript fundamentals — they are the highest-frequency, highest-signal rounds. Build components on a timer without reaching for a UI library, and practice explaining execution order aloud, because knowing it silently is a different skill from teaching it under pressure.
- Daily: build one interactive component from scratch, on a timer, no component library.
- Drill JavaScript fundamentals until you can explain the event loop and closures cold.
- Rehearse one frontend system-design prompt per week using the frame above.
- Do full mock interviews and review every follow-up that exposed a gap.