Frontend interviews have changed a lot in the last three years. In 2021, a senior role might have asked you about CSS float and maybe one React question about lifecycle methods. Now the same seniority level involves questions about React Server Components, JavaScript engine internals, Core Web Vitals thresholds, and accessibility compliance. The bar moved up faster than most prep guides noticed.
This is a study guide for that current bar. It’s organized by domain, not by difficulty, because the hard questions in one area are often beginner questions in another and I find linear difficulty rankings misleading.
JavaScript: the questions that still trip people up
Event loop questions are almost universal in frontend screens. The concept isn’t complicated, but explaining it under pressure in a way that sounds natural is harder than it looks.
The short version: JavaScript is single-threaded. The call stack handles synchronous execution. The event loop watches the call stack and the callback queue. When the call stack is empty, it moves callbacks from the queue onto the stack. Microtasks (Promises) get processed before macrotasks (setTimeout, setInterval). That last part is where people stumble.
Walk through this and predict the output:
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
Output: 1, 4, 3, 2. If you got 1, 4, 2, 3, you had the microtask queue wrong. Promises resolve before the setTimeout callback, even with a 0ms delay, because microtasks have priority.
Closures come up almost as often. The question is usually: “What is a closure and give a real use case?” Closures are functions that remember the scope they were created in even after that scope exits. A real use case: a debounce function that holds a timer reference in the outer scope. Another: a counter factory that keeps count private. The textbook “closure is a function plus its environment” definition is correct but doesn’t land well in interviews. Show the use case.
On var vs let vs const: var is function-scoped and hoisted (hoisted as undefined, not its value). let and const are block-scoped and not initialized until the declaration runs (the temporal dead zone). Most experienced developers use const by default, let when they need reassignment, and var never. If you’re asked this and you say “I just use const and let,” that’s a fine answer. Honest answers do better than thorough ones in most frontend screens.
React: what interviewers actually want to know
The Stack Overflow Developer Survey 2024 found React was the most-used web framework for the 9th year running. The interview question density around React reflects that. You’re going to get at least three React questions at any mid-level or above screen.
The most common ones:
Reconciliation and the virtual DOM. React keeps a virtual DOM in memory and diffs it against the previous render to determine what changed. The diffing algorithm (Fiber in current React) processes changes by priority, which is why things like transitions can be interrupted without blocking urgent updates. Interviewers asking this usually want to know if you understand why React is fast, not just that it is.
useMemo, useCallback, React.memo: when to use them. These are optimization tools, not defaults. useCallback memoizes a function reference so it doesn’t change between renders. useMemo memoizes a computed value. React.memo wraps a component to prevent re-render when props haven’t changed. The thing most candidates miss: these add overhead. If you wrap everything in useMemo, you’ve made the app slower, not faster. Use them where you have a measurable re-render problem, not as a blanket practice.
React Server Components. This came up in roughly 31 out of every 47 mid-senior frontend screens I’ve heard about in 2025 and 2026, which is not a scientific count but gives you a sense of how dominant this topic has become. The core distinction: Server Components run on the server, can access the filesystem and databases directly, and ship zero JavaScript to the client. Client Components handle interactivity and have access to browser APIs. The default in Next.js App Router is Server Components. You opt into client behavior with “use client”.
CSS: the parts people skip
CSS is often the section candidates prepare least for, which is a mistake. A substantial portion of frontend interviews include at least one CSS layout or specificity question, and they’re easy to get right if you’ve actually reviewed them.
Specificity: inline styles beat IDs beat classes beat elements. The calculation is (inline, IDs, classes+attributes+pseudoclasses, elements+pseudoelements). So a rule with two classes beats a rule with one ID? No, that’s wrong. One ID (0,1,0,0) beats any number of classes (0,0,N,0). The mistake is thinking it’s arithmetic. It’s lexicographic: compare the columns left to right.
Flexbox vs. Grid: Flexbox is one-dimensional (row or column). Grid is two-dimensional (rows and columns simultaneously). In practice: use Flexbox for nav bars, button groups, centering a single item. Use Grid for page-level layouts, card grids, anything with explicit row and column alignment. Plenty of real-world layouts use both. A question I see occasionally: “how would you center a div both horizontally and vertically?” with CSS Grid, place-items: center on the container. Done.
Performance and Core Web Vitals
Google’s Core Web Vitals are now a real ranking signal, which means frontend engineers at any company that cares about search traffic are expected to understand them.
The three that matter in 2026: Largest Contentful Paint (LCP, should be under 2.5 seconds), Interaction to Next Paint (INP, replaced FID as the input delay metric, under 200ms), and Cumulative Layout Shift (CLS, under 0.1). Questions about these in interviews usually look like: “How would you diagnose a high CLS score?” Answer: look for images without explicit width/height dimensions, dynamic content injected above the fold without reserved space, and web fonts loading late and causing reflow.
Code splitting is the performance technique that comes up most often. The pattern: use dynamic import() to split large dependencies into separate bundles, loaded only when needed. In React, this is usually React.lazy() with a Suspense boundary. The result: smaller initial bundle, faster initial load, better LCP.
Accessibility: you probably need to know more than you think
Accessibility questions used to be rare in frontend interviews. They’re not anymore. The BLS occupational outlook for web developers reflects growing demand for engineers who can build for all users, and hiring teams at companies with accessibility requirements increasingly test for it explicitly.
The questions are usually practical: “What is the ARIA role for a navigation landmark?” (role="navigation", or just use <nav>). “How do you make a custom dropdown accessible to keyboard users?” Tab to open, arrow keys to navigate options, Enter to select, Escape to close, focus trapped inside while open. “When do you use alt text and when do you leave it empty?” Decorative images get empty alt (alt="") so screen readers skip them. Informative images need descriptive alt text. Functional images (buttons with icon-only graphics) need alt text that describes the action, not the image.
How to practice the explaining part
Knowing these concepts and explaining them under mild pressure are different skills. Most candidates who struggle in frontend interviews know the material. They get stuck when they have to reconstruct an explanation in real time while someone is watching them.
The only fix for that is practice out loud, not re-reading notes. If you want a low-stakes environment to run through these topics with an AI before a real screen, Craqly’s free session is a reasonable option. Explain a concept, get follow-up questions, see where your explanation breaks down. The free tier is enough to cover one or two of these topic areas before you need to decide whether to continue.
One section I know I’ve underemphasized here: TypeScript. Most frontend screens at companies using TypeScript will include at least one question on generics, utility types, or discriminated unions. That’s a whole separate guide. This one is long enough.