All interview prep guidesInterview Prep · 6 Questions

Frontend Engineer interview questions

Frontend interviews in 2026 cover the same ground they always have — HTML, CSS, JavaScript, React, performance — but the bar for accessibility, web vitals, and reasoning about hydration and edge rendering has gone up sharply. Junior-passing answers from 2022 will not land a senior offer today.

What interviewers look for
  • Deep JavaScript fundamentals (closures, async, prototypes)
  • Practical CSS: flexbox, grid, modern layout, container queries
  • React internals: reconciliation, memo, suspense, server components
  • Performance: Core Web Vitals, bundle analysis, rendering strategies
  • Accessibility as a first-class concern, not an afterthought

Real questions with model answers

JavaScript

1. Explain the event loop, microtasks, and macrotasks.

Synchronous code runs first. Then the microtask queue drains completely (promises, queueMicrotask), then one macrotask runs (setTimeout, I/O). Repeat. This is why a Promise.resolve().then() runs before a setTimeout(_, 0).

React

2. What is the difference between useMemo, useCallback, and React.memo?

useMemo caches a computed value, useCallback caches a function reference, React.memo skips re-rendering a component when props are referentially equal. Most apps overuse all three — the right default is to not memoize, and add it when you have measured a problem.

CSS

3. Center a div horizontally and vertically — give three ways.

Flexbox (display: flex; place-items: center). Grid (display: grid; place-items: center). Absolute positioning with transform translate(-50%, -50%). The interviewer is checking that you reach for modern layout first.

Performance

4. A page has a 6-second LCP. Walk me through how you fix it.

Run Lighthouse. Inspect the LCP element. Common causes: large hero image without optimization, render-blocking JS, slow TTFB, late-discovered resources. Fix priority: preload critical resources, defer non-critical JS, optimize images (WebP/AVIF, responsive srcset), and reduce server response time.

Accessibility

5. How do you make a custom dropdown accessible?

Use semantic HTML where possible (<select> if the design allows). For custom: role="listbox", aria-activedescendant, keyboard handling (arrows, Enter, Esc), focus management, and screen reader testing. Cite the WAI-ARIA Authoring Practices.

React

6. What is the difference between server and client components in Next.js?

Server components run only on the server, can fetch data directly, and never ship JavaScript to the client. Client components ship JS, can use hooks and browser APIs. The boundary is the "use client" directive. Default to server; opt into client only when you need interactivity.

Prep tip

Build something small and modern the week before the interview — a feature with React 19, server components, or a CSS pattern you have not used. Interviewers can tell within 30 seconds whether you have shipped recently. Practice explaining what you built, not just listing tech.

Prep for other roles

GET STARTED

Kickstart Your Career Journey

AI that searches, applies, and coaches while you focus on landing the offer.

Try for free
TALK TO AN EXPERT

Build a team that wins

AI agents run sourcing, screening, and outreach so your team only meets the best.

Schedule Now