Frontend Engineer Interview Questions — React, Browser Internals, and Frontend System Design

A frontend engineer interview in 2026 is no longer just a JavaScript trivia round plus a React component. The modern frontend surface is large: product UX, performance, accessibility, design systems, client-server rendering, state management, testing, observability, and increasingly AI-assisted developer workflows. Companies want engineers who can build interfaces that are fast, correct, accessible, maintainable, and aligned with product goals.

The senior frontend bar is especially practical. You should be able to implement a component, explain browser behavior, reason about rendering performance, design a frontend architecture, debug production issues, and work with design and product without turning every tradeoff into a framework debate. The interview loop is looking for that combination of craft and judgment.

What the frontend loop usually tests

| Round | What they test | Strong signal | |---|---|---| | JavaScript / TypeScript | Language fundamentals and correctness | Closures, async, types, edge cases | | React or framework coding | Component design and state management | Clean composition, effects discipline, accessibility | | Browser internals | Rendering, networking, storage, security | Event loop, layout, paint, caching, CORS, XSS | | Frontend system design | Can you architect a large UI surface? | Data flow, boundaries, performance, ownership | | Product / UX collaboration | Can you make tradeoffs with design? | User-centered reasoning, accessibility, polish | | Behavioral | Can you lead frontend quality? | Mentorship, standards, incident ownership |

Expect a mix of hands-on coding and verbal design. Senior candidates should not sound like library tourists. It is fine to know React deeply, but you need to explain the underlying tradeoffs.

JavaScript and TypeScript questions

Common prompts include:

• Explain closures and write a function that uses one.
• Implement debounce or throttle.
• Flatten a nested array or object.
• Write a promise pool with concurrency limits.
• Explain the event loop, microtasks, and macrotasks.
• Implement a simple pub/sub or observable.
• Type a generic function in TypeScript.
• Debug this, hoisting, equality, or mutation behavior.

For senior roles, the interviewer cares about clarity. If implementing debounce, discuss leading versus trailing calls, cancellation, and preserving arguments and this. If implementing a promise pool, discuss concurrency, failure behavior, ordering of results, and whether tasks start lazily. These details show production thinking.

TypeScript questions often test whether you use types to express intent rather than decorate code. Know generics, discriminated unions, type narrowing, mapped types, utility types, and when not to overcomplicate a type. A strong answer might say, "I would use a discriminated union for async state so loading, success, and error states cannot be represented incorrectly." That is more valuable than showing off type gymnastics.

React questions

React interviews usually include component implementation and conceptual questions.

"Build an autocomplete." This classic prompt tests state, async requests, debouncing, keyboard navigation, loading and empty states, accessibility, caching, and race conditions. A senior answer includes aria-expanded, role="combobox", keyboard support, cancellation or request IDs to avoid stale results, and clear separation between input state and selected value.

"Explain useEffect." The senior answer is not "it runs after render." Explain synchronization with external systems: subscriptions, timers, network requests, imperative APIs. Mention cleanup, dependency arrays, stale closures, and why derived state often should not be in an effect. Many React bugs come from using effects as a general state machine.

"How do you manage state?" Avoid one-size-fits-all answers. Local UI state belongs near the component. Server state usually belongs in a data-fetching cache such as React Query, Relay, Apollo, or framework loaders. Cross-cutting client state may use context, Zustand, Redux, or another store. URL state is useful for shareable filters and navigation. Senior frontend engineers choose state location by ownership, lifetime, sharing, and persistence.

"How do you optimize React performance?" Start by measuring. Use React Profiler, browser performance tools, and production metrics. Then discuss reducing unnecessary renders, memoization where it matters, stable props, virtualization for long lists, code splitting, image optimization, server rendering, and reducing JS payload. Warn that premature memoization can make code harder without improving user experience.

Live coding checklist

In live component rounds, narrate the product states before typing: default, loading, success, empty, error, disabled, and slow network. Then name the interaction contract: mouse, keyboard, screen reader, mobile, and whether the component is controlled or uncontrolled. This sounds simple, but it prevents many junior mistakes. If time is short, ship the core behavior first, then call out the gaps you would close in production: tests, accessibility review, request cancellation, analytics events, and visual polish. Interviewers give senior candidates credit for knowing the difference between interview code and production code.

Browser internals questions

Browser knowledge separates strong frontend engineers from component assemblers.

Event loop. Explain call stack, task queue, microtask queue, rendering opportunity, and how promises differ from timers. If asked what logs first, reason step by step. In production, this knowledge helps with input responsiveness, long tasks, and race conditions.

Rendering pipeline. Know style calculation, layout, paint, and compositing. Changing layout-affecting properties like width or top can trigger layout; transforms and opacity are often cheaper. But do not oversimplify: real performance depends on DOM size, CSS complexity, device, and browser.

Networking. Understand caching headers, ETags, CDN behavior, preloading, lazy loading, HTTP/2 or HTTP/3 basics, and bundle delivery. For web apps, initial JS payload is often the biggest performance tax. Talk about route-based code splitting, tree shaking, server components or SSR when relevant, and avoiding duplicate dependencies.

Security. Expect questions about XSS, CSRF, CORS, Content Security Policy, secure cookies, localStorage risks, and dependency supply-chain risk. A practical XSS answer includes escaping, avoiding unsafe HTML, sanitizing rich text, CSP, and treating user-generated content as hostile.

Storage. Know cookies, localStorage, sessionStorage, IndexedDB, and Cache API. Cookies are sent with requests and need SameSite/Secure/HttpOnly choices. localStorage is simple but synchronous and accessible to injected scripts. IndexedDB is better for larger structured client storage.

Frontend system design questions

Frontend system design prompts might ask you to design a dashboard builder, collaborative editor, design system, analytics-heavy admin console, checkout flow, notification center, or microfrontend architecture. The expected answer is not just "React plus Redux." It is an architecture that supports product requirements.

Use this structure:

1. Clarify users and workflows. Who uses it, how often, on what devices, under what constraints?
2. Define core states and data flows. Server state, local UI state, URL state, optimistic updates, offline needs.
3. Choose boundaries. Components, routes, packages, design system, API contracts, ownership.
4. Performance plan. Initial load, interaction latency, rendering cost, list virtualization, caching.
5. Accessibility and internationalization. Keyboard, screen readers, contrast, focus, text expansion, locale formats.
6. Testing and release. Unit, integration, visual regression, E2E, feature flags, monitoring.
7. Migration or scale plan. How the system evolves without freezing product work.

For a dashboard builder, discuss drag-and-drop accessibility, chart rendering, query performance, saved layouts, permissions, undo/redo, collaboration, and loading states. For checkout, discuss reliability, validation, fraud, payment errors, idempotency, accessibility, and conversion. The best frontend designs connect UI choices to user and business outcomes.

Accessibility questions

Accessibility is now a mainstream interview signal. Be ready for:

• Semantic HTML and why buttons should be buttons.
• Keyboard navigation and visible focus states.
• ARIA roles and when not to use ARIA.
• Form labels, errors, and descriptions.
• Color contrast and reduced motion.
• Screen reader behavior for dynamic content.
• Testing with browser tools and manual keyboard flows.

A strong answer says accessibility starts in design and component primitives, not at the end. If your design system ships accessible modals, menus, forms, and tooltips, product teams inherit quality. If every team hand-rolls interactions, accessibility regresses.

Testing questions

Frontend testing discussions often reveal maturity. Know the testing pyramid, but adapt it. Unit tests are good for pure logic. Component tests verify rendering and interaction. Integration tests cover data flow and edge states. E2E tests catch critical user journeys but are slower and more brittle. Visual regression tests help design systems and marketing pages.

For React, testing user behavior is usually better than testing implementation details. Prefer queries that match accessible names. Mock network boundaries intentionally. Test loading, error, empty, permission, and slow states. Senior engineers also discuss flake management, test data, CI time, and which bugs are worth preventing with automation.

Behavioral questions

Prepare stories for:

• Improving performance with measured user impact
• Leading a design system or component migration
• Resolving conflict with design or product
• Debugging a production frontend incident
• Raising accessibility quality
• Migrating framework, routing, state, or build tooling
• Mentoring engineers on frontend standards

A strong performance story includes metrics. "We reduced JS shipped on the dashboard route from 1.2MB to 540KB, cut LCP from 4.1s to 2.3s on mid-tier Android, and saw a 6% lift in successful report creation." That is much stronger than "I optimized the bundle."

For design conflict, avoid saying design wanted something impossible. Explain the constraint and the compromise. Maybe a motion-heavy interaction hurt low-end devices, so you proposed a reduced-motion variant and a simpler default while preserving the design intent.

Senior-level signals

At senior level, interviewers look for leverage:

• You build reusable patterns without over-abstracting.
• You know when product polish matters and when speed matters.
• You can debug across client, API, CDN, and build pipeline.
• You make accessibility and performance part of normal development.
• You help teams avoid state-management and component sprawl.
• You can migrate old frontend code while product work continues.
• You communicate tradeoffs in user terms, not only framework terms.

The biggest anti-signal is framework absolutism. React, Vue, Svelte, Next.js, Remix, Astro, and plain web platform APIs all have contexts where they make sense. Senior engineers explain constraints and tradeoffs rather than declaring one tool morally superior.

Questions to ask the company

Ask:

• What are the biggest frontend quality problems today: performance, accessibility, reliability, velocity, design consistency?
• How are frontend decisions made across teams?
• Is there a design system, and who owns it?
• What performance metrics are tracked in production?
• How much autonomy do frontend engineers have in product and UX decisions?
• What is the testing strategy for critical flows?
• Are there major migrations planned in the next year?

These answers reveal whether the role is feature delivery, platform work, design-system leadership, or a rescue mission.

Final prep checklist

Practice JavaScript fundamentals, TypeScript types, and two or three component builds such as autocomplete, modal, data table, and infinite list. Review browser rendering, event loop, caching, accessibility, and security. Prepare stories with metrics for performance, migration, design collaboration, and production debugging.

In the interview, narrate tradeoffs like a product engineer. Build the component, but also mention loading states, keyboard support, slow networks, error handling, and measurement. The 2026 frontend bar rewards engineers who can connect pixels to systems. Show that, and you will stand out.

Related guides

• Android Engineer Interview Questions in 2026 — Kotlin, Jetpack Compose, and Android System Design — Android interviews in 2026 test Kotlin, coroutines, Jetpack Compose, lifecycle, offline behavior, and release judgment. This guide gives the questions and answer patterns that show native Android production maturity.
• Frontend System Design Mock Interview Questions in 2026 — Practice Prompts, Answer Structure, and Scoring Rubric — Frontend system design practice for 2026: component architecture prompts, answer structure, performance and accessibility rubric, drills, and strong/weak examples.
• iOS Engineer Interview Questions in 2026 — Swift, UIKit, SwiftUI, and Mobile System Design — iOS interviews in 2026 combine Swift depth, UIKit maintenance, SwiftUI judgment, concurrency, and mobile system design. This guide gives practical questions, strong-answer patterns, and prep steps for native app roles.
• Backend System Design Mock Interview Questions in 2026 — Practice Prompts, Answer Structure, and Scoring Rubric — Backend system design practice for 2026 with API, data, consistency, queueing, reliability, and operations prompts plus a senior-level scoring rubric.
• Data Engineer Interview Questions — Pipelines, SQL Optimization, and Warehouse Design — Data engineer interviews test practical judgment: modeling data, moving it reliably, optimizing SQL, and designing warehouses that analysts and products can trust. This guide covers the 2026 questions, answer patterns, and senior-level signals.