Frontend Interview Questions and Answers
39 frontend interview questions, one for each topic a frontend loop covers: JavaScript runtime and language, React rendering and hooks, and Next.js rendering, caching and routing. Each has a short answer and links to a full lesson with a step-by-step trace.
Frontend loops usually mix a general coding round with rounds on JavaScript, the browser and a framework, and often a live UI build. For that round, practise the React machine coding questions; for "what does this print?" questions, the JavaScript output questions.
JavaScript interview questions
JavaScript Fundamentals for Frontend Interviews · Easy
Primitive vs Reference Types
JavaScript primitives are immutable values stored directly by value, whereas reference types (objects, arrays, functions) are mutable entities stored on the heap and accessed via memory references.
Full answer and traceExecution Contexts, Closures, and Object Prototypes · Medium
Execution Context & Call Stack
A JavaScript Execution Context is an internal runtime environment that tracks code evaluation, consisting of a Lexical Environment, Variable Environment, and ThisBinding.
Full answer and traceThe Event Loop, Microtasks, and Asynchronous Concurrency · Medium
Promises & Chaining
A Promise represents the eventual completion or failure of an asynchronous operation, existing in one of three states: pending, fulfilled, or rejected.
Full answer and traceTricky JavaScript Output Prediction & Code Reasoning · Medium
Hoisting & Scope Traps
Function declarations hoist with their complete implementation and take precedence over var declarations during compilation.
Full answer and traceJavaScript Utility Implementations and Standard Polyfills · Medium
Debounce and Throttle Implementations
Debounce delays function execution until a quiet period passes without new invocations, ideal for search autocomplete. Throttle limits function execution to at most once per time window, ideal for scroll, resize, and mousemove handlers.
Full answer and traceBrowser APIs, DOM Performance, and Client-Side Security · Medium
DOM Events and Event Delegation
DOM events propagate in three sequential phases: capturing (window down to target), target, and bubbling (target up to window).
Full answer and traceModern JavaScript: ES Modules, Iterators, and Weak Collections · Medium
JavaScript Modules (ESM vs CommonJS)
ES Modules use live bindings where imported identifiers reflect runtime changes in the exporting module, whereas CommonJS copies primitive values into module.exports.
Full answer and traceDebugging, Memory Leak Analysis, and Code Quality · Medium
Error Handling & Debugging
JavaScript manages runtime exceptions using try/catch/finally blocks. The finally block executes unconditionally for resource cleanup, overriding prior returns or throws, while asynchronous errors require Promise rejection handlers or async/await try/catch.
Full answer and traceConnecting JavaScript Runtime Mechanics to React Internals · Hard
Closures & Stale State in React
In React, each component render has its own closed-over state constants.
Full answer and trace
React interview questions
React Fundamentals for Frontend Interviews · Easy
React Mental Model & The Declarative Paradigm
React is declarative: instead of mutating the DOM step-by-step, you describe what the UI should look like for a given state as a pure function (UI = f(state)), and React calculates the necessary DOM updates efficiently.
Full answer and traceState Mechanics, Batching, and Lifecycle Transitions · Easy
State Mental Model & Memory Snapshots
In React, state acts like an immutable snapshot captured at the start of each render execution. Direct in-place object mutations do not change object references, preventing React from detecting changes and triggering re-renders.
Full answer and traceCore React Hooks: State, Synchronization, and Refs · Medium
useState Internals, Lazy Init & State Resetting
useState persists state across renders in a linked list of hook slots attached to the component Fiber.
Full answer and traceAdvanced Hooks, Referential Equality, and Stores · Medium
useMemo & useCallback: Referential Stability
useMemo caches the result of an expensive calculation, while useCallback caches the function instance itself. Their primary interview value is preserving referential equality for props passed to memoized children (React.memo) or hook dependency arrays.
Full answer and traceReact Internals: Fiber Architecture and Reconciliation · Medium
The Reconciliation Diffing Algorithm & Heuristics
React uses an O(n) heuristic diffing algorithm based on two assumptions: two elements of different types produce completely different trees, and the developer can hint which child elements are stable across renders with a key prop.
Full answer and tracePerformance Engineering, Profiling, and Virtualization · Medium
React.memo & Custom Comparator Functions
React.memo is a higher-order component that skips re-rendering when props are shallowly equal (Object.is). You can pass a custom arePropsEqual(prevProps, nextProps) comparator, returning true to skip re-rendering or false to re-render.
Full answer and traceConcurrent Rendering, Priority Lanes, and React 19 · Medium
useTransition: Non-Blocking Background Updates
useTransition marks state updates as non-blocking transitions.
Full answer and traceForm Architecture, Modern FormData, and Validation · Easy
Controlled vs Uncontrolled Inputs & Cursors
Controlled inputs have their value driven by React state via the value and onChange props. Uncontrolled inputs store form data in the native DOM itself, accessed via defaultValue and refs.
Full answer and traceState Architecture, Store Subscriptions, and Server Cache · Medium
State Architecture: Taxonomy & Categorization
Modern React state belongs to five distinct categories: local UI state (useState), shared client state (Zustand/Context), server cache state (TanStack Query), URL state (searchParams), and persistent device state (localStorage).
Full answer and traceAdvanced Component Design Patterns and Error Boundaries · Medium
Compound Components Pattern with Context Sharing
The Compound Components pattern allows multiple components to work together by implicitly sharing state through React Context, like native <select> and <option>. It provides an intuitive, expressive declarative API that inverts layout control to the consumer.
Full answer and traceType-Safe React: Components, Generics, and Hooks · Easy
Typing Components, Props, Children & Events
In modern React TypeScript, type components as standard functions with typed prop interfaces rather than React.FC.
Full answer and traceFrontend Security, Taint APIs, and Web Accessibility · Medium
React Security: XSS Prevention & dangerouslySetInnerHTML
React automatically defends against Cross-Site Scripting (XSS) by escaping all string values inside JSX before rendering to the DOM.
Full answer and traceServer-Side Rendering, Hydration, and Server Components · Medium
Server-Side Rendering (SSR) & Client Hydration Mechanics
Server-Side Rendering renders the initial React component tree to static HTML on the server for fast First Contentful Paint.
Full answer and traceUnit Testing, Async Mocking, and Debugging Workflows · Medium
React Testing Library: Philosophy & Accessible Queries
React Testing Library tests components from the user perspective rather than implementation details.
Full answer and traceTricky React Output Prediction & Execution Ordering · Medium
Output Traps: State Batching, Snapshots & Stale Closures
In React, state updates behave as immutable snapshots within the current render frame.
Full answer and traceLive Machine Coding Challenges and Custom Hooks · Medium
Machine Coding: useDebounce & useThrottle Custom Hooks
useDebounce delays updating a value until after a specified delay has elapsed since the last change, canceling previous timers in useEffect cleanup.
Full answer and trace
Next.js interview questions
Next.js Rendering Foundations · Easy
Evolution of Web Rendering: CSR, SSR, SSG, and ISR
CSR ships a minimal HTML shell and executes JavaScript in the browser. SSR renders full HTML dynamically on every request on the server.
Full answer and traceApp Router File Conventions · Easy
The Route Hierarchy: Layouts, Templates, and Pages
Layouts (layout.tsx) wrap page hierarchies, preserve client state across navigations, and do not re-render their DOM on route changes.
Full answer and traceServer Components & Boundaries · Easy
The "use client" Boundary: What Crosses the Wire?
The "use client" directive marks an entry point to the client bundle boundary, not code that executes exclusively in the browser. Client components still pre-render to HTML on the server during SSR.
Full answer and traceData Fetching & Request Lifecycle · Easy
Async Server Components & Direct Database Access
Async React Server Components execute exclusively on the server, allowing developers to query databases (Prisma, Drizzle, pg) and backend services directly with async/await.
Full answer and traceNext.js Caching Architecture · Medium
Evolution of Caching: Next.js 14 Implicit vs Next.js 15+ Opt-In
In Next.js 14, fetch requests and Route Handlers were cached aggressively by default (force-cache), leading to widespread developer confusion regarding stale dynamic data.
Full answer and traceServer Actions & Form Mutations · Medium
Server Actions Fundamentals & RPC Execution Model
Server Actions are asynchronous server functions defined with the "use server" directive. They implement a type-safe Remote Procedure Call (RPC) protocol over HTTP POST requests.
Full answer and traceSecurity & Authentication Architecture · Medium
Preventing Data Leaks with server-only & React Taint APIs
Data leaks in React Server Components occur when sensitive server-side secrets or raw database records are accidentally imported by Client Components or passed across component boundaries.
Full answer and traceAdvanced Routing & Interception · Medium
Parallel Routes: Dashboards and Conditional Slot Rendering
Parallel Routes allow developers to render one or more independent page slots (@slot) simultaneously within the same parent layout.
Full answer and traceAsset Optimization & Performance · Medium
Next.js Image Optimization (next/image) Internals
The next/image component automatically optimizes images on-demand: converting formats to modern WebP/AVIF, resizing based on device viewport sizes, preventing Cumulative Layout Shift (CLS) via intrinsic aspect ratios, and deferring off-screen images using…
Full answer and traceDynamic Metadata & SEO · Medium
Static vs Dynamic Metadata Generation
Next.js provides two ways to define SEO tags: static metadata via the export const metadata object, and dynamic metadata via the generateMetadata async function.
Full answer and traceProduction Operations & DevOps · Medium
Node.js Runtime vs Edge Runtime Tradeoffs
Next.js supports two server runtimes: the full Node.js Runtime and the lightweight Edge Runtime (V8 isolates). The Node.js runtime supports the full Node API ecosystem, heavy npm libraries, and native database drivers, but has higher cold starts (~200ms).
Full answer and tracePages Router & Migration Strategy · Medium
Pages Router Data Fetching: getServerSideProps vs getStaticProps
In Pages Router, data fetching was defined per-page via exported functions: getServerSideProps executed on every request on the server (SSR), while getStaticProps executed at build time to produce static HTML/JSON (SSG), with optional revalidate for ISR.
Full answer and traceEnterprise Architecture & System Design · Medium
Internationalization (i18n): App Router Routing
Unlike Pages Router which featured built-in i18n configuration in next.config.js, App Router relies on subpath routing via dynamic route segments (app/[lang]/...) orchestrated by proxy.ts or middleware.ts.
Full answer and traceDebugging & Production Anti-Patterns · Medium
Next.js Redirect Exception Suppression in try/catch Blocks
In Next.js, redirect() and notFound() intentionally throw internal JavaScript exceptions (NEXT_REDIRECT and NEXT_NOT_FOUND) to interrupt control flow.
Full answer and trace
Applying too? Frontend developer resume examples.