Frontend Interview — The Complete Guide

HTML is the skeleton of every web page. Interviewers test it less often than JS, but when they do, they expect you to know semantics and accessibility cold. Getting these right signals maturity.

🔥 Semantic Tags — Must Know

Semantic HTML means using tags that describe their content: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Screen readers and search engines rely on these to understand page structure.

Accessibility Basics

• Always use alt on images (empty string for decorative)
• Use aria-label for icon-only buttons
• Ensure keyboard navigation works (focus management)
• Use role attributes when semantic tags aren't enough
• Color contrast ratio ≥ 4.5:1 for normal text

Forms & Input Types

Know the difference between type="text", email, number, tel, date. Mobile browsers show different keyboards based on type. Use <label> with htmlFor for accessibility. Controlled vs uncontrolled forms come up in React interviews.

SEO Basics

• One <h1> per page, hierarchical headings
• Meta tags: title, description, og:image
• Semantic structure helps crawlers understand content
• SSR/SSG improves SEO (covered in Next.js section)

📝 Quick Revision

Common Interview Questions

CSS questions test your understanding of layout mechanics. You won't be asked to style a pixel-perfect design, but you will be asked to explain how the box model works or when to use flexbox vs grid.

🔥 Box Model — Must Know

Every element is a box: content → padding → border → margin. The key gotcha: by default, width only sets the content width. Use box-sizing: border-box to include padding and border in the width calculation. Every modern CSS reset does this.

Flexbox vs Grid

Positioning

• static — default, normal flow
• relative — offset from normal position, still in flow
• absolute — removed from flow, positioned relative to nearest positioned ancestor
• fixed — removed from flow, positioned relative to viewport
• sticky — hybrid: relative until a scroll threshold, then fixed

Specificity & Cascade

Specificity determines which CSS rule wins when multiple rules target the same element. The hierarchy: !important > inline styles > #id > .class > element. Equal specificity? Last rule wins. Understanding this prevents "why isn't my style applying?" debugging nightmares.

📝 Quick Revision

Common Interview Questions

🔥 Closures, Scope & this — Must Know

A closure is a function that remembers the variables from its outer scope even after that scope has finished executing. Every function in JS creates a closure. This is how data privacy, callbacks, and module patterns work.

function createCounter() {
  let count = 0; // closed over by the returned function
  return {
    increment: () => ++count,
    getCount: () => count,
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount();  // 2
// 'count' is private — can't be accessed directly

Scope chain: JS looks up variables from inner → outer → global. this depends on HOW a function is called, not where it's defined. Arrow functions inherit this from their enclosing scope (lexical binding).

🔥 Async JS & Event Loop — VERY IMPORTANT

JavaScript is single-threaded but non-blocking. The Event Loop is the mechanism that allows JavaScript to perform non-blocking, asynchronous operations despite being a single-threaded language. It acts as a traffic coordinator, continuously monitoring the state of the execution environment to decide when to run specific pieces of code.

The event loop processes the call stack, then microtasks (Promises, queueMicrotask), then macrotasks (setTimeout, setInterval, I/O). Understanding this order is critical for predicting output in interview questions.

console.log("1 — sync");

setTimeout(() => console.log("2 — macrotask"), 0);

Promise.resolve().then(() => console.log("3 — microtask"));

console.log("4 — sync");

// Output: 1, 4, 3, 2
// Sync first, then microtasks, then macrotasks

Promises & Async/Await

Promises represent eventual values. In JavaScript, a Promise is a special object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It serves as a placeholder for a result that is not yet available but will be in the future, allowing you to handle asynchronous code in a cleaner way than traditional nested callbacks (often called "callback hell").
async/await is syntactic sugar over Promises that makes async code read like sync code. Key: await pauses the async function, not the entire thread. The event loop keeps running.

async function fetchUser(id: string) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("Failed to fetch user:", err);
    return null;
  }
}

// Promise.all for parallel requests
const [user, posts] = await Promise.all([
  fetchUser("1"),
  fetch("/api/posts").then(r => r.json()),
]);

🔥 Debounce & Throttle — Must Know

function debounce<T extends (...args: unknown[]) => void>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  let timer: ReturnType<typeof setTimeout>;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Deep vs Shallow Copy

Shallow copy duplicates the top-level properties but nested objects still share references (Object.assign, spread operator). Deep copy recursively clones everything (structuredClone, JSON.parse(JSON.stringify())).

Prototypes

Every JS object has a hidden [[Prototype]] link. When you access a property, JS walks the prototype chain until it finds it or hits null. This is how inheritance works in JS. Classes are syntactic sugar over prototypal inheritance.

📝 Quick Revision

Common Interview Questions

React is the most tested framework in frontend interviews. You need to understand not just how to use it, but how it works under the hood — rendering, reconciliation, and performance.

🔥 Hooks — Must Know

useState for local state, useEffect for side effects, useRef for mutable refs that don't trigger re-renders, useMemo/useCallback for memoization. The most common interview question: explain the useEffect dependency array and cleanup function.

useEffect(() => {
  // Runs after every render (no deps array)
});

useEffect(() => {
  // Runs once on mount (empty deps)
  return () => {
    // Cleanup on unmount
  };
}, []);

useEffect(() => {
  // Runs when 'id' changes
  const controller = new AbortController();
  fetch(`/api/user/${id}`, { signal: controller.signal });
  return () => controller.abort(); // cancel on cleanup
}, [id]);

🔥 Rendering & Reconciliation

React re-renders a component when its state or props change. It diffs the new virtual DOM against the previous one (reconciliation) and applies minimal DOM updates. Keys help React identify which items changed in lists.

Performance Optimization

• React.memo — skip re-render if props haven't changed
• useMemo — cache expensive computations
• useCallback — stable function references for child components
• Virtualize long lists (react-window, react-virtuoso)
• Code-split with React.lazy + Suspense

Controlled vs Uncontrolled Components

📝 Quick Revision

Common Interview Questions

TypeScript is expected at most top companies now. Interviews test whether you can type real-world patterns — not just primitives.

Types vs Interfaces

🔥 Generics — Must Know

// Generic function — works with any type
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

// Generic with constraint
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// Generic React component
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}

Utility Types

• Partial<T> — all properties optional
• Required<T> — all properties required
• Pick<T, K> — select specific properties
• Omit<T, K> — exclude specific properties
• Record<K, V> — object with keys K and values V
• ReturnType<T> — extract return type of a function

📝 Quick Revision

🔥 Event Loop & Call Stack

The call stack executes synchronous code. When it's empty, the event loop checks the microtask queue (Promises), drains it completely, then picks one macrotask (setTimeout). This cycle repeats. The browser can only paint between macrotasks.

In JavaScript, the Call Stack is a core mechanism that the engine uses to track and manage function execution. It acts as a "to-do list," keeping track of which function is currently running and where to return once that function finishes.

DOM vs Virtual DOM

🔥 Rendering Pipeline

HTML → DOM, CSS → CSSOM → Render Tree → Layout → Paint → Composite. Blocking resources (CSS, sync JS) delay first paint. Understanding this pipeline is key to performance optimization.

What Happens When You Type a URL

DNS lookup → TCP handshake → TLS handshake (HTTPS) → HTTP request → Server response → HTML parsing → DOM construction → CSSOM → Render tree → Layout → Paint. This is a classic interview question that tests breadth of knowledge.

Storage APIs

📝 Quick Revision

Performance questions test whether you can diagnose and fix slow apps. Know the tools (Lighthouse, DevTools) and the techniques.

🔥 Core Web Vitals — Must Know

Key Techniques — Explained

🔥 Lazy Loading

Lazy loading defers loading resources until they're actually needed. Instead of downloading every image and component upfront (which blocks the initial page load), you load them on demand — typically when they enter the viewport or when a user navigates to a route.

For images: add loading="lazy" to <img> tags. The browser handles the rest — it only fetches the image when it's about to scroll into view. Next.js <Image> does this by default.

For components: use React.lazy() + <Suspense>. The component's code is split into a separate bundle chunk and only downloaded when the component is first rendered.

import { lazy, Suspense } from "react";

// Component is NOT loaded until <HeavyChart /> is rendered
const HeavyChart = lazy(() => import("./HeavyChart"));

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* Suspense shows fallback while the chunk downloads */}
      <Suspense fallback={<div>Loading chart...</div>}>
        <HeavyChart />
      </Suspense>
    </div>
  );
}

// Image lazy loading — native browser support
<img src="/hero.jpg" alt="Hero" loading="lazy" />

🔥 Code Splitting

Code splitting breaks your JavaScript bundle into smaller chunks that load on demand. Without it, users download your entire app upfront — even pages they'll never visit. With it, each route gets its own chunk, and shared code is extracted into common chunks.

Route-based splitting is the most common approach. Next.js does this automatically — each page.tsx becomes its own chunk. In plain React, use React.lazy with React Router.

Component-based splitting is for heavy components within a page. Use dynamic import() to load a chart library, rich text editor, or PDF viewer only when needed.

// Route-based splitting with React Router + lazy
const Home = lazy(() => import("./pages/Home"));
const Settings = lazy(() => import("./pages/Settings"));

// Next.js does this automatically for every page.tsx

// Component-based splitting with next/dynamic
import dynamic from "next/dynamic";

const RichEditor = dynamic(() => import("./RichEditor"), {
  loading: () => <p>Loading editor...</p>,
  ssr: false, // skip server-side rendering for browser-only libs
});

Caching Strategies

Minimizing Re-renders

• State colocation — keep state as close to where it's used as possible. If only one component needs it, don't put it in a parent.
• React.memo — wrap components that receive the same props often. Skips re-render if props are shallowly equal.
• useMemo / useCallback — stabilize expensive computations and function references so child components don't re-render unnecessarily.
• Avoid object/array literals in JSX — style={{ color: "red" }} creates a new object every render, breaking memo.

Image Optimization

• Use modern formats: WebP (30% smaller than JPEG) or AVIF (50% smaller)
• Serve responsive images with srcset and sizes — don't send a 2000px image to a 400px phone screen
• Always set width and height on images to prevent layout shift (CLS)
• Use Next.js <Image> — it handles lazy loading, responsive sizing, and format conversion automatically

Tree Shaking

Tree shaking removes unused code from your final bundle at build time. It works with ES modules (import/export) because they're statically analyzable. CommonJS (require) can't be tree-shaken. This is why you should always use named imports: import { debounce } from "lodash-es" instead of import _ from "lodash".

📝 Quick Revision

Frontend devs need to understand HTTP fundamentals. You'll be asked about methods, status codes, CORS, and how to handle API errors gracefully.

HTTP Methods

Status Codes to Know

🔥 CORS — Must Know

Cross-Origin Resource Sharing. Browsers block requests to different origins by default. The server must include Access-Control-Allow-Origin headers. Preflight requests (OPTIONS) happen for non-simple requests (custom headers, PUT/DELETE). This is a very common source of bugs and interview questions.

📝 Quick Revision

Next.js is the default React framework at many companies. Know the rendering strategies and when to use each.

🔥 Rendering Strategies — Must Know

This is the single most asked Next.js interview question. You need to explain not just what each strategy does, but when to pick one over another and the trade-offs involved.

CSR — Client-Side Rendering

The server sends a minimal HTML shell with a <script> tag. JavaScript downloads, executes, and renders the page in the browser. The user sees a blank screen (or spinner) until JS finishes.

• Pros: simple deployment (static hosting), fast subsequent navigation (SPA), good for auth-gated content
• Cons: slow first paint (blank screen), poor SEO (crawlers see empty HTML), large JS bundle
• Use when: dashboards, admin panels, apps behind login where SEO doesn't matter

SSR — Server-Side Rendering

The server generates full HTML on every request and sends it to the browser. The user sees content immediately, then JS hydrates to make it interactive. Each request hits the server.

• Pros: fast first paint, great SEO, always fresh data
• Cons: higher server cost (every request runs server code), slower TTFB than static, can't cache easily
• Use when: personalized pages (user profile, feed), content that changes per request, SEO-critical dynamic pages

SSG — Static Site Generation

HTML is generated at build time and served as static files. No server computation at request time — the CDN serves pre-built HTML instantly. Fastest possible TTFB.

• Pros: fastest performance (CDN-served), cheapest (no server), excellent SEO
• Cons: content is stale until next build, build time grows with page count, can't personalize
• Use when: blogs, documentation, marketing pages, any content that rarely changes

ISR — Incremental Static Regeneration

The best of SSG and SSR. Pages are statically generated at build time, but can be revalidated in the background after a configurable interval. The first visitor after the interval gets the stale page (fast), and the next visitor gets the freshly regenerated page.

• Pros: static performance + fresh data, no full rebuild needed, scales to millions of pages
• Cons: first visitor after revalidation sees stale data, more complex mental model
• Use when: e-commerce product pages, news articles, content that updates periodically (not real-time)

// SSG — generated at build time (default for static pages)
export default function BlogPost({ post }) {
  return <article>{post.content}</article>;
}

// SSR — generated on every request
export const dynamic = "force-dynamic"; // App Router
// or use generateMetadata / fetch with { cache: "no-store" }

// ISR — static + revalidate every 60 seconds
export const revalidate = 60; // App Router
// Next request after 60s triggers background regeneration

// CSR — client-only component
"use client";
import { useEffect, useState } from "react";
export default function Dashboard() {
  const [data, setData] = useState(null);
  useEffect(() => { fetch("/api/stats").then(r => r.json()).then(setData); }, []);
  return data ? <Chart data={data} /> : <Spinner />;
}

Routing & Middleware

App Router uses file-system routing with page.tsx, layout.tsx, loading.tsx, error.tsx. Middleware runs before every request — use it for auth checks, redirects, and A/B testing. Server Components are the default; add "use client" only when you need browser APIs or state.

📝 Quick Revision

State management questions test whether you know when to use local state vs global state, and which tool fits which problem.

When to Use What

📝 Quick Revision

Testing questions are less common in coding rounds but come up in system design and behavioral rounds. Know the concepts and when to apply each type.

Unit vs Integration vs E2E

React Testing Library Philosophy

Test behavior, not implementation. Query by role, label, or text — not by class name or test ID. If a user can't see it, don't test it. This approach makes tests resilient to refactors.

import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter";

test("increments count on click", () => {
  render(<Counter />);
  const button = screen.getByRole("button", { name: /increment/i });
  fireEvent.click(button);
  expect(screen.getByText("Count: 1")).toBeInTheDocument();
});

📝 Quick Revision

Component Design

• Separate logic (smart/container) from presentation (dumb/presentational)
• Keep components small and focused — single responsibility
• Use composition over inheritance
• Design for reusability: props for configuration, children for content

Folder Structure

Feature-based structure groups files by feature (auth/, dashboard/, settings/) rather than by type (components/, hooks/, utils/). This scales better for large teams because each feature is self-contained.

Scalability Patterns

• Virtualization for large lists (10K+ items)
• Pagination / infinite scroll for large datasets
• Debounced search for real-time filtering
• Optimistic updates for perceived performance
• Code splitting per route for bundle size

Handling Large Forms

• Use a form library (React Hook Form, Formik) for complex forms
• Validate on blur, not on every keystroke
• Split large forms into steps (wizard pattern)
• Use uncontrolled inputs with refs for performance-critical forms

Security

📝 Quick Revision

🔗 All System Design Deep Dives