Interview guide
Frontend Developer Interview Questions & Answers Guide (2026)
A hiring-manager’s interview kit for frontend developers — with specific “what to look for” notes on every answer, red flags to watch, and a practical test.
Key facts
- Role
- Frontend Developer
- Technical questions
- 15
- Behavioral
- 7
- Role-fit
- 5
- Red flags
- 8
- Practical test
- Included
How to use this guide
Pick 4-6 technical questions across difficulties, 2-3 behavioral, and 1-2 role-fit for a 45-minute interview. For senior roles, weight harder technical and role-fit higher. Always close with the practical test so you are hiring on evidence, not impressions. The “what to look for” notes are a scoring rubric: strong answers touch most points, weak answers miss them or replace them with platitudes.
Technical questions — Easy
1. Explain CSS specificity. Why might !important still lose, and how do you avoid specificity wars?
EasyWhat to look for: Inline > ID > class > element; !important on cascade layer can still lose to a later !important; newer @layer spec, avoiding deep selectors, utility-first approaches.
2. What are Core Web Vitals (LCP, INP, CLS) and how do you measure them in the field, not just in the lab?
EasyWhat to look for: CrUX, Web Vitals JS library, beaconing to analytics, Vercel Speed Insights or SpeedCurve. Lab tools only catch some regressions. Knows 75th percentile is the target.
3. Write (verbally or on paper) a useDebouncedValue(value, delay) hook or a Vue composable equivalent. What edge cases matter?
EasyWhat to look for: Correct effect with cleanup, handles delay changes, cancels previous timer, handles unmount, value identity for objects.
Technical questions — Medium
1. Explain the browser critical rendering path. Where does JavaScript hurt it, and how do you mitigate?
MediumWhat to look for: HTML parse -> CSSOM -> render tree -> layout -> paint. JS blocks parsing unless async/defer, long tasks delay INP. Mitigations: defer non-critical JS, code split, move work to server components or Workers.
2. A page has a 4 MB JS bundle and a Lighthouse performance score of 32. Walk me through diagnosis and fix.
MediumWhat to look for: Bundle analyzer -> identify top offenders -> dynamic imports, route-level splitting, lighter library swaps, removing duplicate copies, tree-shake verification, moving rendering to the server where possible.
3. How do you build an accessible modal from scratch? Walk me through focus management, keyboard, and ARIA.
MediumWhat to look for: Focus trap, initial focus on modal, inert or aria-hidden on background, Escape to close, return focus to trigger, role=dialog + aria-labelledby. Should mention Radix/HeadlessUI and why rolling your own is hard.
4. Walk me through implementing an optimistic UI update with rollback on failure.
MediumWhat to look for: TanStack Query onMutate/onError/onSettled, snapshot previous state, rollback in onError, final invalidation. Discusses race conditions when user fires multiple mutations.
5. A list with 10,000 rows is janky on scroll. What are the options and trade-offs?
MediumWhat to look for: Virtualization (react-window, TanStack Virtual), pagination, infinite scroll. Discusses a11y and CLS implications of virtualized lists. Knows when pagination is just better.
6. Explain Suspense in React or async components in Vue. When do you use them with and without a data library?
MediumWhat to look for: Suspense boundary, fallback UI, streaming SSR, integrating libraries that throw promises or use(). Should not confuse with error boundaries.
7. How do you manage z-index so that modals, toasts, and dropdowns never fight each other in production?
MediumWhat to look for: Stacking contexts, a central z-index scale, portals to document.body for overlays, CSS variables. Has fought this war before and has a playbook.
8. What is the difference between controlled and uncontrolled form inputs, and when does each matter for performance?
MediumWhat to look for: Controlled = re-render on every keystroke; uncontrolled = form refs read on submit. Knows react-hook-form minimizes re-renders. Has debugged a 30-field form lag.
9. Your designer pushed a layout with a new font that is 280 KB and blocks render. How do you negotiate?
MediumWhat to look for: Measures the real cost (LCP impact), proposes font-display:swap, subsetting, variable fonts, preload hero glyphs, or using a system fallback stack. Respects design intent while bringing data.
Technical questions — Hard
1. What causes hydration mismatches, and how have you debugged one in production?
HardWhat to look for: Date.now, random IDs, window access, localStorage read during render, locale differences. Fixes: useEffect for client-only, suppressHydrationWarning sparingly, useId. Should have a real story.
2. How do you design a component library so consuming apps can tree-shake properly?
HardWhat to look for: Named exports, sideEffects:false in package.json, ES modules, per-component entry points, no barrel imports that pull the world. Discusses CSS-in-JS runtime cost.
3. Tell me about a bug that only reproduced in Safari or on a specific iOS version. How did you find it?
HardWhat to look for: Real story. Polyfills, Intersection Observer quirks, 100vh on iOS, backdrop-filter, sticky positioning. Reproduced on a real device or BrowserStack.
Behavioral questions
1. Tell me about a time you disagreed with a designer on a UI pattern. How did you resolve it?
What to look for: Brought data (a11y, performance, usability), proposed alternatives, respected the design craft, landed a decision without ego.
2. Describe the worst frontend bug you shipped to production. What did you learn?
What to look for: Owns it, names the causal chain, ships a guardrail (test, linter rule, CI check) afterward rather than a promise to be careful.
3. How do you keep PR review comments useful without being pedantic?
What to look for: Separates blockers from nits, praises good choices, explains the why, asks rather than decrees.
4. Walk me through how you ramp into an unfamiliar frontend codebase.
What to look for: Reads README, runs it, maps the component tree from a real user flow, opens a small PR to validate. Not months of silent onboarding.
5. What is the most technically ambitious UI you have shipped, and why was it hard?
What to look for: Specific dimensions of hardness: scale, real-time, a11y, animation complexity, deadline. Shows taste.
6. How do you work when you have 4 hours of overlap and 4 hours of async with your team?
What to look for: Long PR descriptions, Looms for complex reviews, batched questions, protects overlap for blockers.
7. Tell me about pushing back on an accessibility or performance corner cut because of a deadline.
What to look for: Offers a scope trade-off, writes a follow-up ticket, fights for a11y hard lines (keyboard, contrast). Not a martyr, not a doormat.
Role-fit questions
1. Why frontend specifically, versus going full-stack or backend?
What to look for: Genuine preference grounded in what they care about (UX, craft, visual polish, accessibility) rather than "I can’t do backend".
2. What does your first 30 days look like to feel productive here?
What to look for: Codebase tour, small PR in week 1, feature ownership by week 2, asks to pair. Red flag: expects weeks of onboarding with no output.
3. Our stack is Next.js App Router + Tailwind + TanStack Query + Zustand. Anything there you haven’t used?
What to look for: Honest gap assessment + concrete ramp plan (docs, side project, pairing). Fakery is a red flag.
4. How do you feel about working with pixel-exact Figma specs vs loose direction?
What to look for: Both are fine. Strong candidates fill in ambiguity with questions, not guesses. Can work from either.
5. Where do you sit on pragmatism vs purism when deadlines hit?
What to look for: Pragmatism with a follow-up ticket for debt. Purism on accessibility and security where it matters.
Red flags
Any one of these alone is usually reason to pass, especially combined with weak answers elsewhere.
- • Cannot articulate why a component re-rendered when shown a DevTools profiler screenshot.
- • Has never audited a page for accessibility or cannot name a single WCAG success criterion.
- • Uses `any` casually in TypeScript and shrugs when asked why.
- • Ships without tests and cannot name a frontend testing library.
- • Blames the framework before suspecting their own code.
- • Cannot explain CSS specificity or stacking contexts.
- • Confuses SSR and CSR, or cannot describe what hydration actually is.
- • Defaults to useEffect for derived state instead of computing it during render.
Practical test
4-hour take-home: build a searchable, sortable, paginated table of 1,000 rows hitting a mock API, using your framework of choice (React/Vue/Svelte) in TypeScript. Requirements: debounced search, URL-synced filter and page state, loading and error states, keyboard-accessible sort headers (role=columnheader, aria-sort), and at least 3 component tests. We grade on: code quality (35%), accessibility (25%), performance (20%), tests (20%). Bonus: Storybook stories and extraction into a reusable DataTable component.
Scoring rubric
Score each answer 1-4: (1) Misses most of the rubric or gives platitudes; (2) Hits some points but cannot go deep when pressed; (3) Covers the rubric and can defend the answer under follow-ups; (4) Adds unprompted nuance, trade-offs, or real examples beyond the rubric. Hire at an average of 3.0+ across technical, behavioral, and role-fit, with zero red flags, and a pass on the practical test.
Related
Written by Syed Ali
Founder, Remoteria
Syed Ali founded Remoteria after a decade building distributed teams across 4 continents. He has helped 500+ companies source, vet, onboard, and scale pre-vetted offshore talent in engineering, design, marketing, and operations.
- • 10+ years building distributed remote teams
- • 500+ successful offshore placements across US, UK, EU, and APAC
- • Specialist in offshore vetting and cross-timezone team integration
Last updated: April 12, 2026