Frontend Developer Interview Questions (2026)

React & frameworks

What triggers a re-render, and how do you prevent unnecessary ones?
useEffect dependency array — explain a bug you've hit with it.
What problem do keys solve in lists?
Controlled vs uncontrolled components — trade-offs?
How does the virtual DOM actually help performance?

CSS & layout

Flexbox vs Grid — when do you reach for each?
How does specificity work? Resolve a conflict between three selectors.
Explain the box model and box-sizing: border-box.
How would you build a responsive layout without media queries?

Performance & system design

Design the frontend for a feed (e.g., Twitter). How do you handle infinite scroll and image loading?
How do you reduce time-to-interactive on a slow connection?
Explain code splitting and when it hurts more than it helps.
How would you make a component accessible to screen readers?

How to approach: tie every answer to something you've shipped. Interviewers trust "I did this" far more than "you could do this."

What the loop is testing beyond syntax

Strong frontend interviews probe four areas: JavaScript depth (closures, the event loop, async), framework reasoning (why a re-render happens, not just how to stop it), CSS and layout fundamentals, and a frontend system design round that mixes performance, accessibility, and state management. Increasingly, accessibility is a scored axis, not a nice-to-have.

How to approach the build/system-design round

Clarify requirements and scale — how many items, what devices, offline support?
Sketch the component tree and where state lives.
Talk through data fetching, caching, and loading/error states.
Address performance: code splitting, virtualization for long lists, image strategy.
Cover accessibility: semantic markup, focus management, keyboard navigation.

Mistakes that fail frontend candidates

Explaining the virtual DOM as "fast" without explaining reconciliation.
Ignoring loading and error states in a UI build.
Forgetting accessibility entirely until prompted.
Memorizing useEffect rules without understanding the dependency array.

Tie answers to things you've shipped. "I debugged a re-render storm by memoizing X" lands far harder than reciting documentation.

Worked answers to the questions that trip people up

"Explain the event loop." Walk through a snippet out loud: "Synchronous code runs first on the call stack. setTimeout callbacks go to the macrotask queue; Promise callbacks go to the microtask queue. After each synchronous run, the engine drains all microtasks before the next macrotask. So a Promise.then logs before a setTimeout(0), even though both look 'async'." Tracing a real snippet beats reciting the definition.

"What triggers a re-render in React, and how do you prevent unnecessary ones?" Be precise: "A component re-renders when its state changes, its parent re-renders, or its context value changes. To prevent wasted renders I'd memoize expensive children with React.memo, stabilize callbacks with useCallback and values with useMemo, and split state so unrelated updates don't cascade. But I'd profile first — premature memoization adds complexity for no gain."

"How would you make a component accessible to screen readers?" Show it's not an afterthought: "I'd use semantic elements — a real button, not a div with an onClick — so keyboard and screen-reader behavior come for free. I'd manage focus on route changes and in modals, label inputs and icon buttons with aria where needed, and test with keyboard-only navigation and a screen reader. Accessibility is part of 'done,' not a follow-up ticket."

Round-by-round: the frontend loop

A typical loop is a recruiter screen, a technical screen (a JS coding problem or a small UI build), and an onsite with a UI build round (build a component or small app live), a JavaScript/DOM fundamentals round, sometimes a general algorithms round, a frontend system design round, and a behavioral round. Senior loops weight architecture, performance, and accessibility; junior loops weight fundamentals and the build round.

What separates a strong frontend answer

Strong candidates reason about the user and the browser, not just the framework. They handle loading and error states without being reminded, they reach for semantic HTML and accessibility by default, and they can explain why a re-render happens rather than just how to stop it. In the build round, they write small, composable components and talk through state ownership.

Weak candidates memorize framework APIs without understanding the model, ignore edge states, and treat accessibility and performance as someone else's job. The build round exposes this fast.

How expectations differ by company

Product companies with design-heavy UIs probe CSS, layout, and interaction depth. Companies with large apps probe state management, performance, and architecture. Startups probe whether you can ship a working feature end to end, including the unglamorous error handling. Increasingly, every serious frontend loop scores accessibility — treat it as a first-class requirement.

Frequently asked questions

Do I need to grind algorithms? Some loops still include a general algorithms round, so don't skip it entirely — but frontend-specific rounds (UI build, JS fundamentals, frontend system design) usually carry more weight.

Which framework should I prep in? The one in the job description. Concepts transfer, but you'll be far smoother answering in the framework the team uses daily.

How do I prep for the build round? Build small components under time pressure — an autocomplete, a modal, a paginated list — and practice narrating state and accessibility as you go.

What's the most overlooked skill? Talking while you build. A correct component built in silence scores far lower than a slightly messier one where you explained your trade-offs.

An expanded question bank by theme

Broaden your reps with these frequently asked prompts. Tie each answer to something you've shipped where you can.

JavaScript: Explain prototypal inheritance. What's the difference between var, let, and const? How does hoisting work? Implement a deep clone. What is currying, and when is it useful? Explain async/await versus promises. What's the difference between map, forEach, and reduce?

React and state: What problem do hooks solve? Explain the rules of hooks and why they exist. When would you use context versus a state library? How do you handle data fetching and caching? What is a controlled component? How do you avoid prop drilling?

CSS and layout: Center an element three different ways. Explain stacking context and z-index gotchas. What's the difference between em, rem, and px? How does position: sticky work? Build a responsive grid without a framework.

Performance and web fundamentals: What is the critical rendering path? How do you reduce bundle size? Explain lazy loading and when to use it. What are Core Web Vitals, and how do you improve them? How does browser caching work? What's the difference between debounce and throttle in a real UI?

Follow-up questions interviewers love

After your first answer, expect: "How would you test this component?" "What happens on a slow network?" "How does this behave with a screen reader?" "What if there are ten thousand items in the list?" "How would you handle an error from this API call?" The follow-ups push on the real-world concerns — performance, accessibility, and resilience — that separate a demo from production code.

A realistic two-week study plan

Days 1–3: JavaScript fundamentals — the event loop, closures, this, async — until you can explain each with a snippet.
Days 4–6: Your target framework's model: re-renders, hooks or equivalents, state management, and data fetching.
Days 7–8: CSS and layout, plus accessibility basics — semantic HTML, focus management, and keyboard navigation.
Days 9–10: Build rounds. Build an autocomplete, a modal, and a paginated list under time, narrating state and accessibility.
Days 11–12: Frontend system design and performance — code splitting, virtualization, image strategy, caching.
Days 13–14: Mock interviews with feedback, plus a refresher on any general algorithms the loop includes.

The day before and the day of

The night before, review fundamentals and re-run one small build so the muscle memory is fresh. On the day, in the build round, clarify requirements first, talk through where state lives, and handle loading, error, and empty states without being prompted. Mention accessibility proactively. A component built while narrating trade-offs scores far higher than a silently perfect one.

How to turn this question list into real readiness

A list of questions is raw material, not preparation. The candidates who convert practice deliberately, and the method is the same regardless of role: focus on JavaScript depth, framework reasoning, and accessible, resilient UI.

Start by answering out loud, never silently. Comprehension and recall under pressure are different skills, and only spoken practice builds the second. Record yourself so you can hear the filler words, the hedging, and the moments where your structure falls apart — things you never notice while speaking.

Then score yourself against a simple rubric: was the answer structured, specific, and relevant to what was asked? Did it land on a concrete result or trade-off? Rebuild the weakest answers and run them again. A useful daily rep is to build a small component under time while narrating state ownership and accessibility.

Use spaced repetition rather than a single cram. Three short sessions across a week beat one long session the night before, because the goal is durable recall under stress, not short-term familiarity. Finally, simulate pressure with at least two timed mock interviews before the real thing — pressure changes how you think, and you want to have felt it before it counts.

A final pre-interview checklist

Run through this the day before:

Can you trace the event loop through a mixed sync/async snippet?
Can you explain why a re-render happens, not just how to stop it?
Do you handle loading, error, and empty states without being reminded?
Do you reach for semantic HTML and accessibility by default?
Have you researched the company, the team, and the specific role enough to tailor your answers and ask sharp questions of your own?
Have you prepared two or three genuine questions to ask the interviewer that show you understand the role?

If you can answer yes to each, you're ready. Get a good night's sleep — being rested will do more for your performance than one more hour of practice.

The mindset that wins frontend loops

The strongest frontend candidates think like users and like browser engineers at the same time. They care how a feature feels on a slow phone, how it behaves for someone using a keyboard or screen reader, and what happens when the network fails — not just whether it works on their fast laptop. In the interview, surface those concerns proactively: mention the loading state, the empty state, the accessibility implication, the performance cost. Engineers who only build the happy path read as junior; engineers who anticipate the messy reality of real users and real devices read as people you can trust with production.

One last thing: ship something small and explain it

Before any frontend loop, build one small thing end to end and be ready to talk through it — a component with real loading and error states, accessible markup, and a deliberate performance choice. Interviewers trust "here's something I built and why I made these calls" far more than recited theory. Walk through where state lives, how you handled the edge cases, what you'd improve with more time, and how you'd test it. That concrete narrative answers half the questions before they're asked and signals that you think about real users on real devices, not just the happy path on a fast laptop. It's the most efficient prep you can do.

Practice these questions with AI

Reading questions is step one. The candidates who convert are the ones who rehearse out loud and iterate on feedback. Paste your target job description into ClavePrep to generate role-specific questions, run a free AI mock interview (text or voice), and get structured feedback on each answer. Build your behavioral stories first with the free STAR Answer Builder.

JavaScript fundamentals