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.

35 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

2 questions

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

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

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

2 questions

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

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

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