Front-End Interview Questions: React, JavaScript, and CSS Deep Dive

Frontend Interviews Are a Different Beast

Backend interviews are mostly algorithms and system design. Frontend interviews? They're a grab bag. You might get asked to explain JavaScript's event loop, then build a React component from scratch, then debug a CSS layout issue — all in the same round. It's exhausting, but it reflects the reality of frontend work.

I once had an interview where the first question was "explain the difference between == and ===" and the last question was "design a Google Calendar widget from scratch." The range is wild. Let's break it down by area.

JavaScript Fundamentals That Always Come Up

Closures

Closures are the most asked JavaScript concept, bar none. A closure is when a function remembers the variables from its outer scope even after the outer function has returned.

function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    getCount: () => count
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
console.log(counter.getCount()); // 2

The classic follow-up: the loop problem.

// What does this print?
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 3, 3, 3 (not 0, 1, 2!)
// Fix: use let instead of var, or wrap in IIFE

If you can explain why it prints 3 three times (var is function-scoped, so by the time setTimeout fires, the loop is done and i is 3), you're ahead of most candidates.

Promises and Async/Await

You'll be expected to understand the promise chain, error handling, and common patterns:

// What's the output order?
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// Output: 1, 4, 3, 2
// (Microtasks like promises run before macrotasks like setTimeout)

Know Promise.all, Promise.allSettled, Promise.race, and when you'd use each. A colleague got asked to implement Promise.all from scratch — that's a great practice problem.

The Event Loop

Interviewers love asking "explain the event loop" because it reveals whether you actually understand how JavaScript works under the hood. The short version: JavaScript is single-threaded. The call stack executes synchronous code. Async operations (timers, network requests) are handled by the browser/Node APIs. When they complete, their callbacks go into a task queue. The event loop checks if the call stack is empty, then pushes the next callback from the queue.

Key detail that separates good answers from great ones: microtasks (Promises, MutationObserver) have their own queue that's processed before the regular task queue. That's why Promise callbacks run before setTimeout callbacks, even with a 0ms delay.

Hoisting and this

Two more JS quirks that come up regularly:

• Hoisting: var declarations are hoisted (but not initialized). let and const are in the "temporal dead zone" until their declaration. Function declarations are fully hoisted; function expressions are not.
• this: In a regular function, this depends on how the function is called. Arrow functions capture this from their enclosing scope. In event handlers, this is the element. With bind, call, or apply, you set it explicitly.

React Questions You'll Face

Hooks

If you're interviewing for any React role in 2026, hooks are the main event. Be ready for these:

• useState vs useReducer — when would you pick one over the other?
• useEffect — cleanup functions, dependency arrays, common pitfalls (infinite loops)
• useMemo and useCallback — when they actually help (not as often as people think)
• useRef — DOM references and persisting values across renders without triggering re-render
• Custom hooks — how to extract reusable logic

A favorite interview question: "What happens if you forget a dependency in useEffect's dependency array?" Answer: stale closures. Your effect captures old values and doesn't update when state changes. This is the single most common React bug in production codebases.

State Management and Rendering

Expect questions about:

• Lifting state up vs. prop drilling vs. context vs. external stores (Redux, Zustand)
• Re-rendering — what triggers it, how to prevent unnecessary renders, React.memo
• Virtual DOM — what it is, how reconciliation works, why keys matter in lists

A question that came up in my Meta interview: "If a parent component re-renders, do all its children re-render?" Yes, by default. React.memo can prevent it, but only for props that are referentially stable — which is where useCallback and useMemo become relevant.

Component Design

Sometimes you'll be asked to design a component API. "Build a reusable Modal component" or "Design a Form component that handles validation." They're looking at your API design skills — what props does it accept? How flexible is it? Does it handle edge cases (accessibility, focus management)?

CSS Questions (Yes, They Still Ask)

Lots of frontend devs treat CSS as an afterthought. Interviewers know this, and they'll test you on it.

Specificity

Can you explain why one style overrides another? The specificity hierarchy:

1. Inline styles (1000 points)
2. IDs (100 points)
3. Classes, attributes, pseudo-classes (10 points)
4. Elements, pseudo-elements (1 point)

!important overrides everything (but using it is usually a code smell).

Flexbox vs Grid

Know when to use each. Flexbox is one-dimensional (row or column). Grid is two-dimensional (rows and columns simultaneously). For a navigation bar? Flexbox. For a dashboard layout with cards? Grid. For centering something? Either works — display: flex; justify-content: center; align-items: center; or display: grid; place-items: center;.

Responsive Design

Be ready to talk about media queries, mobile-first vs. desktop-first approaches, relative units (rem, em, vh/vw), and container queries (newer but increasingly asked about).

Live Coding Challenges

Here are real tasks I've been given in frontend interviews:

Implement debounce:

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), delay);
  };
}

Build a todo list in React — they give you 20-30 minutes. Add items, mark complete, delete. Sometimes filter by status. It tests your React fundamentals under time pressure.

Implement a star rating component — hover effects, click to select, half-star support. Tests CSS skills alongside React.

Frontend System Design

Senior frontend interviews increasingly include a system design round specific to frontend. You might get:

• Design an autocomplete/typeahead — debouncing, caching responses, keyboard navigation, accessibility
• Design an infinite scroll feed — virtualization, intersection observer, pagination strategies
• Design a calendar widget — date manipulation, drag-and-drop events, timezone handling

The key here isn't the exact implementation — it's showing you think about performance, accessibility, edge cases, and user experience. Frontend system design is about the product as much as the architecture.

How to Study Efficiently

Don't try to memorize everything. Instead:

1. Build small projects that exercise the fundamentals — a todo app, a weather dashboard, a mini e-commerce page
2. Practice explaining concepts out loud. Can you explain closures to a junior dev? Can you whiteboard a React component lifecycle?
3. Do 2-3 timed coding challenges per week — implement debounce, throttle, a Promise.all polyfill
4. Review your own production code. If you've built React apps, you already know more than you think. Just be able to articulate why you made certain choices.

If you want to practice frontend interview questions with real-time feedback and follow-up questions, Craqly's AI interview copilot can simulate coding rounds and concept-check questions tailored to your target role. It's particularly useful for practicing the "explain this concept" format where you need to think on your feet.