Frontend developer interview questions tied to the role you applied for

By role - Guide

UI engineers and frontend specialists preparing for product companies, agencies, and design-forward teams where the posting mentions specific frameworks and user-facing quality bars. Samples below are illustrative. Your kit is traced to the posting you paste.

Overview

  1. Frontend interviews mix UI engineering craft with product judgment.

    The job description decides the weights: a design-system role will probe components and accessibility - a growth team may care about performance and experimentation hooks - an agency-like posting may emphasize pixel fidelity and turnaround.

  2. Underline framework/versions, state management, testing, design-system mentions, performance budgets, and collaboration with design.

    That underline is more important than grinding trivia from a different stack.

  3. Use this guide to build a JD-tied rehearsal plan for coding, component design, and collaboration rounds.

Trivia vs product UI judgment

  1. Trivia: obscure API gotchas disconnected from their app.

  2. Judgment: how you structure components, manage state, prevent layout thrash, handle loading/error/empty states, and keep accessibility intact under deadline.

  3. When time is short, practice judgment with one small feature walkthrough from their domain (checkout step, dashboard widget, editor) using the framework they named.

Perf and a11y as interview signals

  1. If the JD mentions Core Web Vitals, large tables, or mobile, prepare one story with a measurement (LCP/INP/CLS or bundle size) and the fix.

  2. If it mentions accessibility or inclusive design, prepare one concrete fix (focus order, names, contrast, keyboard paths) - not a slogan about caring.

What interviewers usually test

  1. Component design, state management, and rendering performance

  2. Accessibility, responsive layout, and design system usage

  3. Network efficiency, caching, and perceived performance

  4. Working with designers and backend contracts

Signals to read in your job description

  1. Framework requirements (React, Vue, Angular, Svelte)

  2. Design system, Storybook, or Figma handoff mentions

  3. Core Web Vitals, SEO, or mobile-first language

  4. TypeScript and testing library expectations

How rounds differ

  1. Screen

    Stack fit, product surface area, and collaboration with design/product.

  2. Live coding / pair

    Component structure, state, edge cases, and communication while building.

  3. UI architecture / practical

    Data fetching, caching, performance, a11y, and testing strategy for a realistic screen.

  4. HM

    Trade-offs under deadline, design pushback, and ownership of quality.

Common prep mistakes

  1. Preparing a different framework than the one required

  2. Building UI with no loading/error/empty states

  3. Ignoring accessibility when the JD explicitly requires it

  4. Optimizing prematurely without a measurement story

  5. Cannot explain CSS layout or rendering performance in plain language

Last-hour prep playbook

  1. Stack lock

    Confirm framework, routing, data layer, and test tools from the JD.

  2. One feature walkthrough

    Narrate component tree, state, fetching, and failure states for a screen like theirs.

  3. One perf or a11y card

    Problem -> measure -> fix -> regression guard - matched to JD signals.

  4. Design collaboration story

    A time you negotiated scope or quality with design/product.

  5. Last-hour pass

    JD stack list + walkthrough bullets + kit outlines.

20 interview questions with answer outlines

Practice set for this path: question, round, short answer outline, and a follow-up. Your kit is generated from the posting you paste - not copied from this list.

  1. How do you structure a React application so state stays predictable as the product grows?

    • Round: Technical / role-core. Answer outline: Colocate UI state in components - lift shared domain state into stores or context.
    • Route updates through reducers or query caches so ownership and write frequency stay explicit.
    • Uncontrolled derived state and prop-drilled mutations cause stale UI and untestable data flow. Follow-up: If that approach hit a hard limit, what would you change first?

  2. A page feels slow on mobile. How do you find and fix the bottleneck?

    • Round: Technical / role-core. Answer outline: Rank LCP, INP, and CLS from RUM plus lab traces before changing code.
    • Split TTFB, JS parse, long tasks, and layout thrash with Performance panel and Web Vitals.
    • Code-split the critical route - confirm field p75 LCP and INP moved, not Lighthouse alone. Follow-up: If that approach hit a hard limit, what would you change first?

  3. Describe a time you pushed back on a design that would hurt accessibility or usability.

    • Round: Phone / early round. Answer outline: Flagged missing keyboard focus order and 4.5:1 contrast on the primary checkout CTA.
    • Proposed visible labels, 44px hit targets, and a skip-link instead of icon-only controls.
    • Shipped the WCAG 2.2 AA path - conversion held while screen-reader task success rose. Follow-up: What would you do differently if you faced the same situation again?

  4. Product wants a complex interaction shipped this sprint. How do you scope a safe MVP?

    • Round: Phone / early round. Answer outline: Ship the happy path with keyboard, focus trap, and error states - defer motion polish.
    • Cut hover-only gestures, nested animations, and unused variants that miss the core job.
    • Gate on INP budget and axe-core - park progressive enhancement behind a follow-up ticket. Follow-up: What would you do differently if you faced the same situation again?

  5. What is the virtual DOM, and why do modern frameworks still care about re-render cost?

    • Round: Hiring manager / final. Answer outline: Virtual DOM diffs a tree of descriptors then patches real DOM nodes, not a free lunch.
    • Reconciliation still executes JS, allocates fibers, and can commit expensive layout-thrashing DOM updates.
    • Memo, stable keys, and state locality cut wasted renders - index keys still remount rows. Follow-up: How would you prove it worked in the first 30 days?

  6. How would you virtualize a table of 100,000 rows without breaking keyboard navigation?

    • Round: Hiring manager / final. Answer outline: I render visible rows plus overscan while mapping scroll position to logical indices.
    • I preserve focus and aria-rowindex on logical rows despite recycled DOM nodes.
    • Variable heights require measurement
    • I validate keyboard navigation and scroll performance. Follow-up: How would you prove it worked in the first 30 days?

  7. Design the caching and CDN strategy for a logged-in dashboard that still needs to feel instant.

    • Round: Technical / role-core. Answer outline: I cache the public shell at the CDN and keep personalized responses private.
    • Client query caching uses stale-while-revalidate, ETags, and targeted invalidation.
    • Shared-cache mistakes leak tenant data
    • I verify headers and authorization boundaries. Follow-up: If that approach hit a hard limit, what would you change first?

  8. Implement debounce and throttle and say which you would use for typeahead vs resize.

    • Round: Hiring manager / final. Answer outline: Debounce waits for quiet - throttle limits emission frequency during continuous activity.
    • I use trailing debounce for typeahead and throttle or rAF for resize handling.
    • I cancel timers on cleanup and validate responsiveness under bursty event streams. Follow-up: How would you prove it worked in the first 30 days?

  9. What is the JavaScript event loop, and how do microtasks differ from macrotasks?

    • Round: Technical / role-core. Answer outline: The event loop runs stack work, drains microtasks, then processes tasks such as timers.
    • Promises and queueMicrotask run before the next macrotask and can drain repeatedly.
    • An endless microtask chain starves rendering - batching and yielding preserve responsiveness. Follow-up: If that approach hit a hard limit, what would you change first?

  10. How does CSS specificity work, and when is !important the wrong fix?

    • Round: Technical / role-core. Answer outline: Cascade precedence compares origin, importance, layers, specificity, and source order. - !important overrides normal declarations but creates escalation debt and hides ownership.
    • I fix layering or component selectors before adding importance. Follow-up: If that approach hit a hard limit, what would you change first?

  11. What is the CSS box model, and when do you set box-sizing: border-box?

    • Round: Technical / role-core. Answer outline: Content-box excludes padding and border from width - border-box includes them.
    • I set border-box globally so declared dimensions match layout geometry.
    • Mixed models can create overflow, especially inside percentage-based flex layouts. Follow-up: If that approach hit a hard limit, what would you change first?

  12. When do you choose Flexbox over CSS Grid, and the reverse?

    • Round: Technical / role-core. Answer outline: Flexbox arranges items primarily along one axis with flexible distribution.
    • Grid controls rows and columns together, making it better for page-level two-dimensional layouts.
    • I combine them: Grid for structure, Flexbox for component-level alignment. Follow-up: If that approach hit a hard limit, what would you change first?

  13. How do cookies, localStorage, sessionStorage, and IndexedDB differ for client data?

    • Round: Technical / role-core. Answer outline: Cookies accompany matching requests
    • HttpOnly blocks JavaScript access and size is limited. - localStorage is synchronous string storage - sessionStorage is scoped to a tab session.
    • IndexedDB is asynchronous and structured
    • XSS-sensitive tokens should not live in web storage. Follow-up: If that approach hit a hard limit, what would you change first?

  14. What triggers a CORS preflight, and what must the server return?

    • Round: Technical / role-core. Answer outline: Preflight occurs for non-simple methods, headers, or content types before the actual request.
    • The server returns matching Origin, Methods, and Headers, with explicit origins for credentials.
    • Cached preflight responses can preserve stale policy, so invalidate or shorten max-age during changes. Follow-up: If that approach hit a hard limit, what would you change first?

  15. What do SameSite=Lax, Strict, and None mean on cookies?

    • Round: Technical / role-core. Answer outline: Strict blocks cross-site cookie sending
    • Lax permits selected top-level safe navigations.
    • None permits cross-site use only with Secure and is intended for embedded or cross-site flows.
    • Cookies do not replace CSRF defenses - state changes need safe methods and request tokens. Follow-up: If that approach hit a hard limit, what would you change first?

  16. How do Cache-Control and ETag work together on static assets?

    • Round: Technical / role-core. Answer outline: Hashed assets use long immutable caching
    • HTML revalidates so deployments become visible.
    • ETag or Last-Modified enables 304 responses when cached content remains current.
    • Long-cache unhashed bundles create stale HTML-to-JavaScript mismatches after deployment. Follow-up: If that approach hit a hard limit, what would you change first?

  17. What is the critical rendering path from HTML bytes to first pixels?

    • Round: Technical / role-core. Answer outline: HTML builds the DOM
    • CSS builds CSSOM - together they form the render tree.
    • Layout calculates geometry, paint draws pixels, and compositing assembles layers.
    • Render-blocking CSS and synchronous scripts delay first paint - critical CSS reduces blocking. Follow-up: If that approach hit a hard limit, what would you change first?

  18. Why are React list keys required, and why are array indexes usually wrong?

    • Round: Technical / role-core. Answer outline: Keys give sibling elements stable identity so React can preserve or replace instances correctly.
    • Index keys change identity after insertion or sorting, moving state between rows.
    • I use stable data IDs - random keys force remounts and discard local state. Follow-up: If that approach hit a hard limit, what would you change first?

  19. What is a stale closure in useEffect, and how do you fix it?

    • Round: Technical / role-core. Answer outline: An effect closes over values from the render that created its callback.
    • Missing dependencies preserve stale values - unstable dependencies can retrigger work repeatedly.
    • I use functional updates, refs, or abortable cleanup according to the synchronization need. Follow-up: If that approach hit a hard limit, what would you change first?

  20. When should a form input be controlled versus uncontrolled in React?

    • Round: Technical / role-core. Answer outline: Controlled inputs store value in React and update it on every change.
    • Uncontrolled inputs keep DOM state and are read through refs or form submission.
    • Live validation favors controlled state - mixing modes causes warnings and ambiguous ownership. Follow-up: If that approach hit a hard limit, what would you change first?

FAQ

  1. Will they ask CSS theory?

    Sometimes. More often they watch whether you can build a resilient UI. Skim layout fundamentals - spend more time on a feature walkthrough in their stack.

  2. Do I need system design as a frontend engineer?

    If the JD implies complex client state, offline, or microfrontends, yes at an appropriate altitude. Otherwise focus on UI architecture for product screens.

  3. Short prep window?

    Stack lock, one feature walkthrough, one perf/a11y card.

  4. Guide vs kit?

    Guide = frontend interview craft from a JD. Kit = your traced questions and outlines.

  5. Next?

    Paste the posting on the homepage for a free preview.

Related guides

  1. Full-Stack Developer Interview Questions

  2. UX Designer Interview Questions

  3. Technology Industry Interview Prep

When you have a posting

  1. Get the right interview questions for the job you applied for by pasting the complete job description from the company's careers page - free preview, $2 for the full kit. No account needed. Paste the job description.