Frontend Engineering interview questions and answers

Browser-platform depth, framework reasoning, and the frontend-specific design round that full-stack candidates are least prepared for.

39 published across 9 topics.

Frontend EngineeringA 22-minute read on how the topic fits together, before the questions.Frontend fundamentals57 short answers on one page, for revising rather than studying.

JavaScript Core

4 questions

Closures, the event loop, prototypes, coercion, and the async semantics in every frontend screen.

mediumConceptScenario

A save button calls an API, the request fails, the error appears in the console - and the UI still shows 'Saved'. Walk me through what is actually happening in that promise chain.

A catch handler that returns normally converts a rejected promise into a fulfilled one, so every then after it runs as though nothing failed. Combined with fetch, which only rejects on network errors and resolves happily on a 500, the chain reports success twice over. Fix by re-throwing from catch, checking response.ok, and modelling UI state as a machine.

4 minentry, mid, senior

mediumConceptCoding

How is `this` determined in JavaScript, and why does a method lose it when you pass it as a callback?

JavaScript `this` binding is decided by the call site: method calls bind the receiver, constructors bind the new object, bind/call/apply bind explicitly, and callbacks often lose the receiver because the method was passed as a plain function. It also connects arrow functions to the point an interviewer is testing.

4 minentry, mid, senior

mediumCodingConcept

Here is a script mixing setTimeout, a promise chain and an await. Tell me the order the logs come out in, and why.

The engine finishes the current task, then drains the whole microtask queue before taking another task, so every promise callback and await resumption runs before a zero-delay timeout, in the order each was queued. Use this event loop answer to show the decision, trade-off, and evidence rather than a memorised definition. It also connects microtasks to the point an interviewer is testing.

4 minmid, senior

mediumConceptCoding

What is a closure, and how does one end up leaking memory?

A closure is a function plus the scope it was created in, held by reference rather than copied. It leaks when something long-lived keeps the function alive, because everything the captured scope can reach stays reachable with it.

4 minentry, mid, senior

All 4 in JavaScript Core

TypeScript

3 questions

Structural typing, generics, narrowing, utility types, and typing component contracts.

mediumCodingConcept

How do you make the compiler fail when somebody adds a new variant to a union you switch on?

A TypeScript exhaustive switch uses a discriminated union and a never check so the compiler fails when a new variant is added but not handled. This turns future union growth into a compile-time error. It also connects discriminated unions to the point an interviewer is testing.

5 minmid, senior, staff

mediumConceptCoding

How do you use TypeScript to make a component's props hard to misuse?

A safe TypeScript component props API models legal states with discriminated unions, ties related props together with generics and keeps any out of the public surface.

4 minmid, senior, staff

hardConcept

Where does TypeScript stop protecting you, and what do you do at those points?

TypeScript stops protecting you at runtime boundaries such as JSON, HTTP requests, local storage and third-party packages. Validate untrusted input at the boundary, then let static types carry the trusted shape inside the app. It also connects type soundness to the point an interviewer is testing.

4 minmid, senior, staff

All 3 in TypeScript

React

5 questions

Reconciliation, hook rules and dependency correctness, server components, and state management.

hardScenarioDesign

How do you implement local-first collaborative editing without the unbounded memory growth inherent to CRDTs crashing the client?

Assess the candidate's expertise in distributed systems within the browser, focusing on Conflict-free Replicated Data Types, memory optimisation, and peer-to-peer state synchronisation. Use this frontend answer to show the decision, trade-off, and evidence rather than a memorised definition. It also connects architecture to the point an interviewer is testing.

2 minsenior, staff

mediumScenarioConcept

A user deletes the second row of an editable list and the wrong row now shows the text they typed. What is going on?

A React index key bug happens when list positions are used as identity. Deleting, sorting or filtering shifts positions, so React reuses the wrong component instance and local state appears beside the wrong row.

5 minmid, senior

hardScenarioDesign

How do you architect a React Server Components migration without accidentally forcing the entire component tree back to the client?

React Server Components differ from SSR because they keep server-only work out of the client bundle instead of only rendering HTML on the server. The migration works when the use client boundary stays low and data fetching stays on the server.

2 minsenior, staff

mediumConceptCoding

You wrapped the component in React.memo and it still re-renders on every keystroke. Why?

React.memo still re-renders when shallow prop comparison fails because parents recreate objects, callbacks or children, or when context and local state update. Stabilise references with useMemo/useCallback only where it removes real render cost.

4 minmid, senior, staff

easyConcept

Why does my useEffect run twice on mount?

React useEffect runs twice on mount in development when Strict Mode deliberately runs one extra setup-cleanup-setup cycle. It does not happen in production builds, and the fix is to write the cleanup the effect was missing rather than to guard the effect or remove Strict Mode.

5 minentry, mid

All 5 in React

Angular & Vue

2 questions

Change detection, reactivity models, DI and modules, and framework-specific lifecycle questions.

mediumConcept

An Angular component with OnPush change detection has stopped updating when its data changes. Walk me through why, and how Vue avoids the same problem.

OnPush checks a component only when an input arrives with a new reference, a template event fires, an async pipe or signal it reads emits, or you mark it. Mutating an object in place satisfies none of those, so the view never gets checked.

4 minmid, senior

hardConceptDesign

Angular, Vue and React are answers to the same problems. Compare how each handles change detection, reactivity and dependency injection.

Each must decide what to re-render when data changes, how derived values stay correct, and how a component gets a dependency it did not create. Angular answers with dirty checking now moving to signals plus a hierarchical injector, Vue with proxy-based per-property tracking, React with convention plus memoisation.

6 minmid, senior, staff

Browser & Rendering

4 questions

The critical rendering path, reflow and repaint, event delegation, and storage and cookie mechanics.

mediumConceptScenario

A third-party script in the head delays your first paint by a second. What do async, defer and type="module" each change about parsing and execution order?

A plain script in the head stops the parser until it is fetched and run. defer fetches in parallel and runs after parsing, in document order, before DOMContentLoaded. async runs as soon as it arrives, in no guaranteed order. Module scripts are deferred by default and also accept async.

5 minentry, mid, senior

mediumScenarioConcept

Someone added will-change: transform to every card to make scrolling smooth, and the page got slower on phones. What happened?

Each will-change: transform requests its own compositor layer, a raster in memory sized by area and device pixel ratio. Hundreds of idle layers exhaust a phone's GPU memory and add compositing work, and scrolling was never limited by the cards. Remove the blanket rule, find the real jank, promote only what animates.

4 minmid, senior

mediumConceptScenario

Walk me through what the browser does between receiving the HTML and the first paint, and tell me why layout thrashing is expensive

The browser parses HTML into the DOM and CSS into the CSSOM, combines them into a layout tree, then runs style, layout, paint and composite. Reading a geometry property after a write forces the browser to flush layout early, so a loop that interleaves reads and writes pays for a full layout every iteration.

6 minmid, senior, staff

mediumConcept

Why is animating transform cheaper than animating top, and when does promoting an element to its own compositor layer make things worse?

Transform and opacity can be applied by the compositor to an already-rasterised layer, skipping style, layout and paint, and running off the main thread. Promotion buys that at the cost of memory, extra rasterisation and layers you forgot to retire.

5 minmid, senior, staff

All 4 in Browser & Rendering

Web Performance

5 questions

Core Web Vitals, bundle splitting, image strategy, and measuring rather than guessing.

hardScenarioConceptDesign

INP went from 150ms to 400ms the week a marketing tag was added. Marketing says the script is async and cannot be the cause. How do you prove it either way and fix it?

Async controls when a script downloads, not what it does to the main thread once it executes, so an async tag can still block interaction handling. Prove it with field data attributed to the interaction: INP breaks into input delay, processing and presentation, and each points elsewhere. Then move the work off the critical path.

4 minmid, senior, staff

hardConceptScenario

A page has a poor Largest Contentful Paint. How do you diagnose it and what do you actually change?

Split the LCP into TTFB, resource load delay, resource load time and render delay, use field attribution rather than a single lab run to see which part dominates, then fix that part specifically - prioritise the hero image, stop lazy-loading it, and remove render-blocking work.

7 minmid, senior, staff

hardScenarioDesign

How do you resolve unacceptable INP degradation caused by massive, synchronous JavaScript execution blocking the main thread?

Evaluate the candidate's understanding of the JavaScript event loop, rendering pipeline, and modern techniques for yielding to the main thread to improve INP. Use this frontend answer to show the decision, trade-off, and evidence rather than a memorised definition. It also connects performance to the point an interviewer is testing.

3 minsenior, staff

hardConceptScenario

Field data says your page has an INP of 400 ms. How do you find the cause and fix it?

Split the interaction into input delay, processing time and presentation delay, then attribute a real interaction from the field rather than guessing. Most of the budget is usually spent before your handler runs or after it returns, so yielding and cutting rendering cost beats optimising the handler.

4 minmid, senior, staff

hardScenarioDesign

Users say the page jumps around while it loads, but your synthetic audit reports no layout shift at all. How do you find it and fix it?

Layout shift is a field problem: it depends on network speed, consent banners, ads and personalisation that a lab run never sees. Collect layout-shift entries from real sessions with their source nodes, then reserve space for whatever moved.

6 minmid, senior, staff

All 5 in Web Performance

CSS & Layout

4 questions

The cascade and specificity, flexbox and grid, stacking contexts, and responsive strategy.

mediumConceptScenario

A flex item with a long URL in it pushes past its container instead of shrinking. Why does flex-shrink not save you?

Flex items default to min-width: auto, which stops them shrinking below their min-content width, and an unbroken URL makes that width the whole URL. flex-shrink only shares out space above that floor. Set min-width: 0 on the item and give the text a break point with overflow-wrap: anywhere; in grid, use minmax(0, 1fr).

4 minentry, mid, senior

mediumConcept

What is cascading about Cascading Style Sheets, and which everyday CSS bugs does that one word explain?

The CSS cascade is the algorithm that picks one winning declaration per property per element: origin and importance first, then cascade layers, then specificity, then source order. Inheritance only fills in when nothing wins, which is why a rule on the parent never beats a declaration on the child.

4 minentry, mid, senior

mediumConcept

How do you decide between flexbox and grid, and why does z-index so often not do what you expect?

Flexbox distributes items along one axis and lets content decide the sizes; grid defines tracks up front and places items into them, aligning in both axes. z-index looks broken because it only orders siblings inside one stacking context, and ordinary properties like transform and opacity create new ones. It also connects css grid to the point an interviewer is testing.

5 minentry, mid, senior

mediumConcept

A fixed header starts scrolling away with the page after someone adds an animation to a wrapper div. What happened, and how would you track it down?

A transform, filter, perspective or containment on an ancestor makes that ancestor the containing block for fixed-position descendants, so the header is now positioned and clipped relative to the wrapper instead of the viewport. Use this CSS answer to show the decision, trade-off, and evidence rather than a memorised definition. It also connects positioning to the point an interviewer is testing.

4 minmid, senior

All 4 in CSS & Layout

Accessibility

5 questions

Semantics, keyboard interaction, ARIA use and misuse, and WCAG criteria raised in review.

hardScenarioConceptCoding

A modal passed design and QA review, but keyboard users report they can tab out of it into the page behind, and once they do they cannot get back or close it. Diagnose it and tell me what a correct dialog does.

The dialog was built as a styled div, so nothing marks the rest of the page inert. Focus was never moved in, never constrained, never restored on close, and Escape was never wired. A correct dialog moves focus in, keeps it in, restores it, marks background inert and is labelled - which native dialog with showModal gives you almost for free.

4 minmid, senior, staff

mediumScenarioConcept

A toast pops up saying the changes were saved, and a screen reader user hears nothing. Why, and what do you change?

Toast notifications are announced to screen readers only when the message is inserted into an existing live region with the right politeness and without hiding it from the accessibility tree.

5 minmid, senior

hardScenarioDesign

How do you implement a scalable architecture and tooling to automatically enforce strict WCAG 2.1 AA compliance across dozens of autonomous frontend teams without crippling developer velocity?

Assess the candidate's capability to shift accessibility left through automated enforcement pipelines, inherently accessible design systems, and systemic remediation strategies at scale.

3 minsenior, staff

mediumConceptCodingScenario

This form marks invalid fields with red text and a red border. What has to change?

Accessible form errors need visible text, programmatic association with the field using aria-describedby, aria-invalid for state and deliberate focus handling after submit. Use this accessibility answer to show the decision, trade-off, and evidence rather than a memorised definition. It also connects FORMS to the point an interviewer is testing.

4 minentry, mid, senior

hardConceptCodingScenario

Design rejected the native control, so you are building a custom one. How do you make it accessible?

An accessible custom interactive component should start from the nearest native element, preserve keyboard and focus behavior, and use ARIA only for state that HTML cannot express.

5 minmid, senior, staff

All 5 in Accessibility

Frontend System Design

7 questions

Component architecture, data-fetching and caching layers, and designing autocomplete or a feed client-side.

hardDesignCase Study

Design the frontend for a data-heavy operational dashboard with live updates.

Stream a server-rendered shell, virtualise the dense views and draw high-density charts to canvas, keep server cache separate from UI and URL state, coalesce socket messages into one commit per frame, give every widget its own empty, error and stale states, and enforce a byte budget per pull request.

7 minsenior, staff, lead

hardScenarioDesign

How do you architect and implement Dynamic Feature Modules in an Android application to reduce initial download size and deliver features on demand?

Evaluate the candidate's ability to reduce Android app size and optimise delivery using Dynamic Feature Modules, the Play Core Library, and reversed dependency injection structures. Use this MOBILE answer to show the decision, trade-off, and evidence rather than a memorised definition.

3 minsenior, staff

hardScenarioDesign

How do you design the dependency graph, handle shared resources, and optimise build times when breaking down a massive iOS monolithic application into a modular architecture using Tuist?

Assess the candidate's ability to migrate a large-scale iOS application to a modular architecture using Tuist, managing dependency graphs, enforcing architectural boundaries, and optimising build times. Use this MOBILE answer to show the decision, trade-off, and evidence rather than a memorised definition.

3 minsenior, staff

hardScenarioDesign

How do you leverage WorkManager to guarantee execution, handle conflict resolution, and optimise battery usage in an offline-first Android application requiring bidirectional synchronisation?

Evaluate the candidate's understanding of offline-first principles, background processing using Android's WorkManager, conflict resolution strategies, and battery optimization techniques. Use this MOBILE answer to show the decision, trade-off, and evidence rather than a memorised definition.

3 minsenior, staff

hardScenarioDesign

How do you resolve severe performance bottlenecks in a complex React Native application caused by heavy bridge traffic, and how do you evaluate a migration to the JavaScript Interface (JSI)?

Assess the candidate's understanding of the React Native architecture, bridge performance limitations, profiling techniques, and modern solutions like JSI and the New Architecture. Use this MOBILE answer to show the decision, trade-off, and evidence rather than a memorised definition. It also connects cross platform to the point an interviewer is testing.

3 minsenior, staff

hardScenarioDesign

How do you prevent a distributed frontend from becoming a single point of failure when remote modules inevitably crash or timeout?

Assess candidate's ability to architect fault-tolerant micro-frontends, manage distributed dependencies, and implement robust error handling in a Module Federation setup.

3 minsenior, staff

hardDesignCase Study

Design the asset delivery and deploy strategy for a large single-page app. What happens to a user who has the tab open when you ship?

Cache hashed assets for a year and never cache the entry document, retain several previous builds so a stale tab can still fetch its chunks, and treat a failed dynamic import as the signal to prompt a reload rather than as an error to swallow.

6 minmid, senior, staff

All 7 in Frontend System Design