Frontend Interview Questions 2026: React, JavaScript, and System Design

Comprehensive guide to frontend engineering interviews covering React hooks, JavaScript internals, CSS layout, performance optimization, and frontend system design — with 50+ real interview questions asked at top companies.

The Frontend Interview Landscape in 2026

Frontend engineering interviews have become significantly more comprehensive. Companies now evaluate across 5 distinct areas:

1. JavaScript/TypeScript fundamentals (30% weight at most companies)
2. React or framework expertise (25%)
3. Frontend system design (20% — increasingly important)
4. CSS/HTML and browser knowledge (15%)
5. Performance and accessibility (10%)

The biggest change in 2026: Frontend system design is now asked at mid-level roles (not just senior), and TypeScript is expected by default at most companies.

JavaScript Core Concepts (Must-Know)

Closures and Lexical Scope

Every frontend interview tests closure understanding. You must be able to:

• Explain what a closure is in one sentence
• Predict the output of closure-based code
• Build solutions using closures (debounce, throttle, memoize)

Definition: A closure is a function that remembers the variables from its lexical scope even after the outer function has returned.

Classic interview question:

"Implement a function createCounter() that returns an object with increment(), decrement(), and getCount() methods."

This tests: closures for private state, module pattern, encapsulation without classes.

Event Loop, Microtasks, and Macrotasks

What you must know:

• JavaScript is single-threaded with an event loop
• Microtasks (Promise.then, queueMicrotask) run BEFORE macrotasks (setTimeout, setInterval)
• The event loop processes ALL microtasks before moving to the next macrotask
• async/await is syntactic sugar over Promises (microtask queue)

Classic interview question:

"What is the output order of: console.log, setTimeout, Promise.resolve.then, queueMicrotask?"

Prototypes and 'this' Binding

The 4 rules of 'this':

1. Default binding: this = window/undefined (strict mode)
2. Implicit binding: obj.method() → this = obj
3. Explicit binding: call(), apply(), bind() → this = specified object
4. new binding: this = newly created object

Arrow functions: Lexically bind this from the enclosing scope. Cannot be rebound.

ES6+ Features to Know Cold

• Destructuring (objects, arrays, nested, defaults)
• Spread/Rest operators
• Optional chaining (?.) and nullish coalescing (??)
• WeakMap/WeakSet (for memory-safe caching)
• Generators and iterators (less common but asked at senior levels)
• Proxy and Reflect (Meta/framework-level questions)

React Deep Dives (2026 Edition)

Hooks — Beyond Basic Usage

useState pitfalls:

• State updates are batched in React 18+ (even in setTimeout!)
• Setter functions with callbacks: setState(prev => prev + 1) for correctness in async contexts
• Lazy initialization: useState(() => expensiveComputation())

useEffect mastery:

• Empty dependency array = componentDidMount equivalent
• Return function = cleanup (componentWillUnmount equivalent)
• Object dependencies cause infinite re-renders (use primitive values or useMemo)
• Race conditions in async useEffect (AbortController pattern)

useMemo and useCallback:

• useMemo: memoize computed VALUES. Use when computation is expensive.
• useCallback: memoize FUNCTIONS. Use when passing callbacks to memoized children.
• Common mistake: using them everywhere. They have overhead — only optimize when you measure a performance issue.

useRef:

• Persists across renders without causing re-renders
• DOM refs (accessing elements imperatively)
• Storing mutable values (previous state, timer IDs, instance variables)

Custom Hooks — Design Principles

Custom hooks are the backbone of reusable stateful logic. Interview questions:

• "Implement useDebounce(value, delay)"
• "Implement useLocalStorage(key, initialValue)"
• "Implement useIntersectionObserver()"
• "Implement useFetch with loading, error, and caching"

Key principles:

• Start with "use" prefix
• Can call other hooks
• Share logic, not state (each component gets its own instance)
• Should be testable in isolation

React 19 Server Components

What you must understand:

• Server Components render on the server, send HTML (not JS) to the client
• Client Components (marked with 'use client') run in the browser
• Server Components can access databases, file system, and secrets directly
• You CANNOT use hooks or browser APIs in Server Components
• The boundary between server and client components is explicit and important

Interview question: "When would you use a Server Component vs a Client Component?"

Answer framework: Use Server Components for data fetching, static content, and large dependencies. Use Client Components for interactivity (forms, animations, browser APIs, state).

State Management Patterns

When to use what:

• useState: Local component state (form inputs, toggles, UI state)
• useReducer: Complex state with multiple sub-values or state machine logic
• useContext: Shared state needed by many components (theme, auth, locale)
• External store (Zustand/Redux): Global app state, server cache, cross-cutting concerns
• React Query/SWR: Server state (API data with caching, refetching, stale-while-revalidate)

Interview question: "You have a dashboard with 10 widgets that all need user preferences. How do you manage this state?"

Frontend System Design (The Differentiator)

What Frontend System Design Tests

Unlike backend system design, frontend system design focuses on:

• Component architecture and data flow
• State management strategy
• Performance optimization (rendering, bundle size, lazy loading)
• Error handling and resilience
• Accessibility and internationalization
• Offline support and caching

Common Frontend System Design Questions

1. Design an autocomplete/search component

• Key considerations: debouncing, caching, keyboard navigation, accessibility, handling slow networks

1. Design an infinite scroll feed (like Twitter/Instagram)

• Key considerations: virtualization, data fetching strategy, scroll position restoration, memory management

1. Design a real-time collaborative editor (like Google Docs)

• Key considerations: conflict resolution (OT vs CRDT), cursor synchronization, offline support

1. Design a form builder with validation

• Key considerations: schema-driven rendering, custom validation rules, conditional fields, performance with 100+ fields

1. Design a notification system (frontend architecture)

• Key considerations: WebSocket vs polling, priority queues, read/unread state, cross-tab synchronization

Framework for Frontend System Design Answers

1. Clarify requirements — Features, scale (how many items/users), performance requirements
2. Component hierarchy — Draw the component tree, identify smart vs presentational components
3. Data flow — Where does state live? How does data flow between components?
4. API design — What endpoints do you need? What's the response shape?
5. Performance considerations — Lazy loading, code splitting, virtualization, caching
6. Edge cases — Error states, loading states, empty states, offline behavior

CSS and Layout (Don't Neglect This)

Many senior candidates fail on CSS. You must know:

Flexbox (asked in 90% of frontend interviews)

• display: flex, flex-direction, justify-content, align-items
• flex-grow, flex-shrink, flex-basis — what each does
• Centering (horizontally, vertically, both)
• Common patterns: sticky footer, holy grail layout, responsive nav

CSS Grid

• grid-template-columns, grid-template-rows
• fr units, repeat(), minmax()
• Named grid areas
• When to use Grid vs Flexbox (Grid = 2D layouts, Flexbox = 1D alignment)

Performance-Related CSS

• will-change and composite layers
• contain property for rendering optimization
• CSS animations vs JavaScript animations (CSS is GPU-accelerated)
• Critical rendering path (how CSS blocks rendering)

Performance Optimization

Core Web Vitals (Google ranking factors)

• LCP (Largest Contentful Paint): < 2.5s. Optimize with: image loading, font loading, server response time
• FID/INP (Interaction to Next Paint): < 200ms. Optimize with: code splitting, reducing main thread work
• CLS (Cumulative Layout Shift): < 0.1. Optimize with: explicit dimensions, font-display: swap

React-Specific Performance

• React.memo for expensive components
• useMemo/useCallback for expensive computations/callbacks
• Code splitting with React.lazy and Suspense
• Virtualization for long lists (react-window, @tanstack/virtual)
• Avoiding unnecessary re-renders (proper key usage, stable references)

Bundle Size Optimization

• Tree shaking (ensure ESM imports)
• Dynamic imports for route-based code splitting
• Analyzing bundle with webpack-bundle-analyzer
• Replacing large libraries with lighter alternatives

Accessibility (a11y) — The Differentiator

Companies increasingly evaluate accessibility knowledge:

• Semantic HTML: Use <button> not <div onClick>. Use <nav>, <main>, <article>.
• ARIA: aria-label, aria-expanded, aria-live (for dynamic content), role attributes
• Keyboard navigation: All interactive elements must be keyboard-accessible. Focus management in modals/dialogs.
• Color contrast: 4.5:1 minimum for normal text, 3:1 for large text
• Screen reader testing: How does your component sound when read aloud?

20 High-Frequency Interview Questions

1. Explain the event loop and how async operations work in JavaScript
2. What is the difference between == and ===?
3. Implement a debounce function from scratch
4. How does React's reconciliation algorithm work?
5. Explain the Virtual DOM and its benefits
6. What are React's rules of hooks? Why do they exist?
7. How would you optimize a React component that re-renders too often?
8. Implement a custom useLocalStorage hook
9. Explain CSS specificity rules
10. How does Flexbox alignment work? Center a div both horizontally and vertically.
11. What happens when you type a URL in the browser? (Full lifecycle)
12. How would you implement infinite scroll with virtualization?
13. Explain CORS — what is it and how do you handle it?
14. What is tree shaking and how does it work?
15. How do you prevent XSS attacks in a React application?
16. Explain the difference between Server Components and Client Components
17. How would you handle error boundaries in React?
18. Implement a simple pub/sub event system
19. How does React Query / SWR differ from useEffect for data fetching?
20. Design a responsive image gallery component (system design)