Interview Prep Hub

React & Next.js

Frontend and Full-Stack interviews expect a deep understanding of React's rendering lifecycle, state management, and modern Next.js architectural patterns (App Router, Server Components).

React Internals & Lifecycle

Rendering diagram…

Rendering diagram…

  • The Virtual DOM: A lightweight JavaScript representation of the actual DOM. React updates the VDOM first, compares it to a snapshot of the previous VDOM (Reconciliation/Diffing), and calculates the minimal set of changes needed. It then applies these changes to the real DOM in one batch.
  • Keys in Lists: When rendering arrays, React uses the key prop to identify which items have changed, been added, or been removed. Never use array indices as keys for lists that can re-order, as it breaks state mapping and hurts performance.
  • Component Lifecycle (Mental Model):
    • Mount: Component is added to the screen. (useEffect with empty array runs).
    • Update: State or Props change. Component re-renders. (useEffect with dependencies runs).
    • Unmount: Component is removed. (useEffect cleanup function runs).

Core React Hooks

Rendering diagram…

HookUse CasePitfalls
useStateLocal component state.State updates are asynchronous. Relying on current state to calculate next state? Use the functional form: setCount(c => c + 1).
useEffectSide effects (fetching data, DOM manipulation, subscriptions).Missing dependencies cause stale closures (using old variable values). Forgetting cleanup causes memory leaks.
useRefMutable value that persists across renders without triggering a re-render. Accessing DOM elements.Don't read/write ref.current during rendering, only in event handlers or effects.
useMemoCaching expensive calculations.Overuse. React is fast. Don't memoize simple math or object creation unless it's passed as a prop to a memoized child.
useCallbackCaching function definitions between renders.Same as useMemo. Primarily used to prevent unnecessary re-renders of child components wrapped in React.memo.
useContextPassing data deeply without prop drilling.Any change to the context value re-renders all consumers, even if they only need a subset of the data.
useReducerComplex state logic involving multiple sub-values or when next state depends on previous.More boilerplate than useState.

Next.js Rendering Strategies

Rendering diagram…

Next.js solves React's biggest flaw (Client-Side Rendering latency and poor SEO) by moving rendering to the server.

ModeHow it worksBest for
CSR (Client-Side)Standard React. Blank HTML loads, JS downloads, app renders in browser.Highly interactive dashboards behind a login.
SSG (Static Site)HTML is generated at build time. Served instantly via CDN.Marketing pages, Blogs, Docs.
SSR (Server-Side)HTML is generated on the server on every request.Personalized feeds, real-time inventory.
ISR (Incremental)HTML generated at build time, but automatically regenerated in the background every X seconds.E-commerce product pages. Fast like SSG, fresh like SSR.

App Router & React Server Components (RSC)

Rendering diagram…

Next.js 13+ introduced the App Router (app/ directory), built entirely around React Server Components.

Server Components (Default)

Components render exclusively on the server. The resulting HTML is sent to the client, but no JavaScript is shipped for that component. This drastically reduces bundle size.

  • ✅ Can access backend resources directly (Databases, File System).
  • ✅ Can keep sensitive tokens (API keys) secure.
  • ❌ Cannot use interactivity (onClick, useState, useEffect).

Client Components ("use client")

Standard React components. They are still pre-rendered on the server for initial HTML (for SEO), but their JavaScript is shipped to the browser so they can "hydrate" and become interactive.

Best Practice: Push "use client" as far down the component tree as possible. Don't make the whole page a client component just for one button.

Common Interview Pitfalls

Rendering diagram…

Hydration Errors

What is it? Hydration is the process of attaching event listeners to server-rendered HTML. A hydration error occurs when the HTML generated on the server doesn't exactly match the HTML generated on the client's first render.

Causes: Using Date.now(), Math.random(), or checking typeof window !== 'undefined' during render. Browser extensions modifying the DOM before hydration.

Fix: Use useEffect to run client-specific logic only after the initial render mounts.

Prop Drilling vs State Management

Passing props down 5 levels is bad (Prop Drilling). Interviewers will ask how to fix it.

  • Context API: Good for low-frequency updates (Theme, Auth User). Bad for high-frequency updates (causes massive re-renders).
  • Redux: Industry standard, but huge boilerplate. Centralized global store.
  • Zustand: Modern, lightweight alternative to Redux. No providers needed.
  • Component Composition: Passing children instead of data. Often eliminates the need for global state entirely.
Core Web Vitals

Google's metrics for UX and SEO. You must know these:

  • LCP (Largest Contentful Paint): Loading performance. Should be < 2.5s. Optimize by preloading hero images and minimizing render-blocking JS.
  • INP (Interaction to Next Paint): Responsiveness (replaced FID). Time from click to visual feedback. Should be < 200ms. Fix by breaking up long JS tasks in the main thread.
  • CLS (Cumulative Layout Shift): Visual stability. Should be < 0.1. Fix by explicitly setting width and height on images/ads so the page doesn't jump as they load.

Interview Quick Reference

TopicKey Points to Mention
Data FetchingIn App Router, fetch in Server Components directly (async/await) without useEffect.
React.memoOnly prevents re-renders if props haven't changed (shallow comparison).
Server ActionsNext.js 14+ feature. Write server-side functions that can be called directly from client forms, eliminating the need to write API routes manually.