Frontend interviews in 2026 test more than "do you know React." They probe whether you understand the runtime under the framework, can reason about performance and accessibility, and can build a non-trivial UI under time pressure while talking through your decisions.
This guide gives you the 40 questions you're most likely to face across five rounds — JavaScript core, framework, CSS/HTML, browser/performance, and frontend system design — plus what a senior interviewer is actually grading for in each.
Practice frontend interview questions out loud at interview-prep.academy — AI voice mocks, free, no card.
How frontend interviews are structured in 2026
| Round | What's tested | Format |
|---|---|---|
| JavaScript fundamentals | Closures, async, the event loop, this | Verbal + small coding |
| Coding / DOM | Build a component or utility live | 45–60 min, real editor |
| Framework (React/Vue/etc.) | State, rendering, hooks, performance | Verbal + code |
| CSS / HTML / a11y | Layout, responsive, accessibility | Verbal + small build |
| Frontend system design | Architect a feature/app at scale | 45 min, whiteboard |
Most companies weight JavaScript fundamentals and the live coding round most heavily. Senior loops add a frontend system design round.
Part 1: JavaScript fundamentals (12 questions)
1. Explain closures and give a real use case. Grading: Can you explain lexical scope clearly AND name a real use (data privacy, memoization, event handlers in loops)? Bonus: a closure-related memory-leak example.
2. Walk me through the event loop. The single most common frontend question. Call stack → Web APIs → task queue vs. microtask queue → render. Know that Promises (microtasks) run before setTimeout (macrotasks). Be ready to predict the output order of an interleaved snippet.
3. What's the difference between == and ===? Quick filter. Type coercion vs. strict equality. Have one gotcha ready (null == undefined is true; NaN === NaN is false).
4. How does this binding work? Default, implicit, explicit (call/apply/bind), and new. Arrow functions inherit this lexically. Be ready for a "what does this refer to here" trick question.
5. Explain var, let, and const and hoisting. Function-scope vs. block-scope, the temporal dead zone, and why const doesn't make objects immutable.
6. What is event delegation and why use it? Attach one listener to a parent, use event.target. Why: fewer listeners, works for dynamically added elements. A real performance pattern.
7. Explain debounce vs. throttle. Debounce = run after activity stops (search input). Throttle = run at most once per interval (scroll/resize). Be ready to implement one live.
8. What are Promises, and how does async/await relate? States (pending/fulfilled/rejected), chaining, Promise.all vs. allSettled vs. race. async/await is syntactic sugar over Promises; know error handling with try/catch.
9. Explain the prototype chain. How property lookup walks the chain, Object.create, and how class is sugar over prototypes.
10. What is the difference between null and undefined? undefined = not assigned; null = intentional absence. Plus how each behaves in coercion.
11. How does JavaScript handle memory and garbage collection? Reachability, common leak sources (detached DOM nodes, forgotten timers, closures holding references), and how to spot them in DevTools.
12. Implement a deep clone (and explain its limits). structuredClone now exists; know why JSON.parse(JSON.stringify()) fails on functions, dates, undefined, circular refs.
Part 2: Live coding / DOM (8 common tasks)
These are build-it-now tasks. Interviewers grade working code, edge-case handling, and whether you narrate your approach.
13. Build an autocomplete/typeahead component — debounced input, async fetch, keyboard navigation, race-condition handling (cancel stale requests).
14. Implement a "todo list" with add/remove/toggle — state management, controlled inputs, immutable updates.
15. Build a tabs / accordion component — accessibility (ARIA roles, keyboard support) is what separates senior answers.
16. Implement debounce / throttle from scratch — closures + timers; handle leading/trailing edge.
17. Build a star-rating or carousel widget — state + events; handle edge cases (empty, single item).
18. Implement an event emitter (pub/sub) — on, off, emit; handle multiple subscribers.
19. Flatten a nested array / deep-traverse a tree — recursion vs. iteration; mention stack depth.
20. Implement a simple virtual-list / infinite scroll — render only visible rows; IntersectionObserver.
Part 3: Framework — React (and transferable concepts) (8 questions)
21. How does React's reconciliation / virtual DOM work? Diffing, keys, why stable keys matter, when re-renders happen.
22. Explain useEffect and its dependency array. When it runs, cleanup functions, the stale-closure trap, and why missing deps cause bugs. A top source of real React bugs.
23. useMemo vs. useCallback vs. React.memo — when do you actually use them? Don't over-memoize. Use when there's a measured performance problem or referential-stability requirement. Senior answers resist premature optimization.
24. How do you manage state at scale? Local vs. lifted vs. context vs. external store (Redux/Zustand/Jotai). When context causes unnecessary re-renders.
25. What causes unnecessary re-renders, and how do you fix them? New object/array/function references each render, context value changes, unstable keys. Tools: React DevTools Profiler.
26. Controlled vs. uncontrolled components — trade-offs? Source of truth, validation timing, performance with large forms.
27. How does data fetching work in modern React (Server Components, Suspense)? 2026-relevant: RSC boundaries, streaming, use(), and where data fetching lives.
28. How would you handle error boundaries and loading states? Error boundaries, Suspense fallbacks, optimistic UI.
Part 4: CSS, HTML & accessibility (6 questions)
29. Explain the box model and box-sizing. Content/padding/border/margin; why border-box is the sane default.
30. Flexbox vs. Grid — when do you use each? 1D vs. 2D layout; real scenarios for each.
31. How does CSS specificity work? Inline > ID > class > element; !important as a last resort; why specificity wars happen.
32. What makes a page accessible? Semantic HTML, ARIA only when needed, keyboard navigation, focus management, color contrast, alt text. Accessibility questions increasingly appear in senior loops.
33. How do you make a layout responsive? Mobile-first, relative units, media/container queries, fluid type.
34. Explain position values and stacking context. static/relative/absolute/fixed/sticky; how z-index and stacking contexts interact.
Part 5: Frontend system design (6 questions)
Senior loops include a frontend-specific system design round. Frame around: requirements → component architecture → state/data flow → performance → accessibility → trade-offs.
35. Design a component library / design system — theming, composition, API design, versioning, accessibility baked in.
36. Design an infinite-scrolling feed (like Twitter/Instagram) — virtualization, pagination/cursors, caching, optimistic updates, image lazy-loading.
37. Design an autocomplete at scale — debouncing, caching, request cancellation, ranking, keyboard a11y.
38. Design a real-time collaborative editor (like Google Docs) — conflict resolution (OT/CRDT at a high level), WebSocket connection management, offline handling.
39. Design the frontend for a dashboard with live data — data fetching/polling vs. WebSocket, state management, render performance with many widgets.
40. How would you improve the performance of a slow page? Measure first (Lighthouse, Web Vitals: LCP/INP/CLS). Then: code splitting, lazy loading, image optimization, reducing re-renders, caching, reducing bundle size. Always measure before and after.
The biggest frontend interview mistakes
- Knowing the framework but not the fundamentals. When the interviewer asks how the event loop works and you can only talk about
useEffect, that's a red flag. - Coding silently. The live round grades communication. Narrate your plan, name your edge cases.
- Over-engineering. Reaching for Redux or memoization without a reason signals poor judgment. Start simple.
- Ignoring accessibility. In 2026, a11y is a baseline expectation, not a bonus — especially at senior level.
- Not measuring in performance questions. "I'd add
useMemoeverywhere" loses to "I'd profile first, find the actual bottleneck, then fix it."
FAQ
Do I need to know a specific framework for a frontend interview? Know one deeply (usually React) and understand the underlying concepts (rendering, state, reconciliation) so you can transfer them. Many interviews allow vanilla JS for the coding round.
How much JavaScript fundamentals vs. framework knowledge is tested? Fundamentals are weighted heavily — closures, the event loop, async, and this come up in almost every loop. Framework questions assume you already have the fundamentals.
Is frontend system design really asked? Yes, at mid and senior levels. It's distinct from backend system design — the focus is component architecture, state management, rendering performance, and accessibility, not databases and load balancers.
How long should I prepare for a frontend interview? With daily out-loud practice: 2–4 weeks for most candidates. Spend the most time on JavaScript fundamentals and the live coding round, since those carry the most weight.
What's the most common frontend interview question? "Explain the event loop" and "explain closures" are the two most frequently reported. Both test whether you understand JavaScript's runtime, not just framework APIs.