Frontend EngineeringFrontend Developer to Senior/Staff React Engineer17 min read·Updated for React 19 & Next.js App Router

React Interview Preparation: React 19 & Next.js Guide

From Fiber Internals and Hook Pitfalls to Server Components and the App Router Rendering Pipeline

Maya Chen

Senior Frontend Architect & React Core Contributor

11+ Years Building Large-Scale React & Next.js Platforms

Prep Timeline

5 to 7 Weeks

Format

Hooks & Component Design, Rendering Internals, State Architecture, Next.js System Design

Conversion

+80% Frontend Technical Pass Rate

React Interview Preparation: React 19 & Next.js Guide

Executive Summary & Key Takeaways

What You Must Master to Clear This Track

Understand the Fiber reconciler's two-phase model (interruptible render phase, synchronous commit phase) and how priority lanes let React interrupt low-priority work for urgent updates.
Master React 19's Actions, useOptimistic, useFormStatus, and the use() hook for reading promises and context conditionally inside render.
Know exactly when useEffect fires relative to browser paint versus useLayoutEffect, and how to avoid stale closures and dependency array bugs.
Be able to explain SSR, SSG, ISR, and React Server Components trade-offs, plus what actually causes hydration mismatches in the App Router.
Choose the right state tool for the job — local state, lifted state, Context, or an external store — instead of defaulting to global state for everything.

Structured Preparation Timeline

Step-by-Step Study Plan

Follow this sequential roadmap designed to take you from core foundations to advanced architecture and mock interviews.

Phase 1 (Weeks 1-2)

JSX Mental Model, Component Design & Hook Internals

React Fundamentals & Hooks Mastery

Rebuild your mental model of JSX-to-createElement compilation, the unidirectional data flow, and go deep on useState, useEffect, useRef, and useReducer semantics.

Key Milestones

•Explain why JSX compiles to React.createElement/jsx-runtime calls and how that produces the element tree React diffs.
•Trace exactly when useEffect callbacks and cleanups fire relative to render and browser paint.
•Build 3-4 custom hooks (useDebouncedValue, useFetch with cancellation, useLocalStorage) from scratch.

Recommended Actions

•Enable and never silence eslint-plugin-react-hooks exhaustive-deps warnings during practice.
•Rewrite one class-component lifecycle example as hooks to internalize the componentDidMount/DidUpdate/WillUnmount mapping.

Phase 2 (Weeks 3-4)

Fiber, Concurrent Rendering, React 19 Features & State Strategy

Rendering Internals, React 19 & State Architecture

Study the Fiber tree, render vs commit phases, priority lanes, and React 19's Actions/useOptimistic/use() hook, then map out when to reach for Context vs an external store.

Key Milestones

•Diagram the render phase (work loop, diffing) and commit phase (DOM mutation, layout effects) as two distinct passes.
•Implement a form using a Server Action, useOptimistic, and useFormStatus end to end.
•Compare re-render behavior of Context, Zustand/Redux, and prop drilling on the same feature.

Recommended Actions

•Profile a component tree with React DevTools Profiler to see which components re-render and why.
•Practice explaining priority lanes (Sync, Input Continuous, Transition) with a concrete UI example like a search-as-you-type input.

Phase 3 (Weeks 5-6)

Rendering Strategies, Hydration, Caching Layers & Live Practice

Next.js App Router, Performance & Mock Interviews

Master SSR/SSG/ISR/RSC trade-offs, the App Router's four caching layers, hydration mismatch debugging, and rehearse full-length React system design interviews.

Key Milestones

•Explain the RSC request/render/hydration pipeline end to end, including what streams and what hydrates.
•Debug at least 2 real hydration mismatch scenarios (Date.now(), window checks, browser extensions injecting DOM).
•Complete 4-5 mock interviews covering hook debugging, a component design exercise, and a Next.js rendering-strategy scenario.

Recommended Actions

•Always state which parts of a feature you would render on the server vs mark 'use client' before writing code.
•Time-box whiteboard component design answers to 20 minutes, leaving room for follow-up performance questions.

Deep-Dive Architecture & Concepts

1. React 19: Actions, the use() Hook & Server Components

React 19 formalizes patterns the community had been hand-rolling for years — pending/optimistic UI, form handling, and server/client composition — into first-class primitives. Interviewers now expect you to know not just hooks, but this new mental model.

Actions & Transitions

An Action is any async function passed to a form's action prop, useTransition, or a Server Action. React automatically tracks its pending state, handles errors, and keeps the UI responsive by treating the update as a non-urgent transition.

The use() Hook

Unlike other hooks, use() can be called conditionally and inside loops. It unwraps a Promise (suspending the component until it resolves) or reads a Context value, unifying data-fetching and context consumption under one API.

useOptimistic & useFormStatus

useOptimistic renders a temporary UI state that reverts or reconciles once the underlying async Action settles. useFormStatus lets nested components read a parent form's pending/data state without prop drilling.

React Server Components (RSC)

Server Components render entirely on the server (or at build time), never ship their JS to the client, and can read databases/secrets directly. They compose with Client Components ('use client') by passing serializable props and children down.

React 19 Server Action + useOptimistic Form

tsx

// app/actions.ts
  "use server";
  
  import { db } from "@/lib/db";
  import { revalidatePath } from "next/cache";
  
  export async function addTodo(formData: FormData) {
    const text = formData.get("text") as string;
    await db.todo.create({ data: { text, completed: false } });
    revalidatePath("/todos");
  }
  
  // app/todo-form.tsx
  "use client";
  
  import { useOptimistic, useRef } from "react";
  import { addTodo } from "./actions";
  
  type Todo = { id: string; text: string; completed: boolean };
  
  export function TodoForm({ todos }: { todos: Todo[] }) {
    const [optimisticTodos, addOptimisticTodo] = useOptimistic(
      todos,
      (state, newText: string) => [
        ...state,
        { id: `temp-${Date.now()}`, text: newText, completed: false },
      ]
    );
    const formRef = useRef<HTMLFormElement>(null);
  
    return (
      <form
        ref={formRef}
        action={async (formData) => {
          const text = formData.get("text") as string;
          addOptimisticTodo(text);
          formRef.current?.reset();
          await addTodo(formData);
        }}
      >
        <input name="text" placeholder="Add a task" />
        <button type="submit">Add</button>
        <ul>
          {optimisticTodos.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      </form>
    );
  }

Why it matters: The Server Action mutates data and revalidates the route, while useOptimistic instantly renders the new item before the network round-trip resolves, then reconciles with real server state once addTodo completes — no manual pending-state booleans required.

Interviewer Insights & Pro Tips

In interviews, explicitly contrast useOptimistic with manually managing a 'pending' boolean in useState — the interviewer is testing whether you know React now owns that lifecycle.
Be ready to explain that use() is not a replacement for useEffect-based data fetching in Client Components; it is primarily meant to consume promises created by Server Components or a cache-aware fetcher.

Red Flags & Common Pitfalls

Calling use() with a promise created fresh on every render (instead of one from a stable cache/Server Component boundary) causes an infinite re-suspend loop.
Marking an entire page 'use client' just because one small widget needs interactivity, which forfeits the zero-JS benefit of Server Components for the rest of the tree.

Deep-Dive Architecture & Concepts

2. The Fiber Reconciler & Render-Commit Lifecycle

Since React 16, the Fiber architecture underlies every render. Interviewers use this topic to separate candidates who memorized hook syntax from those who understand what React is actually doing on every update.

What a Fiber Is

A Fiber is a plain JS object representing one unit of work for a component instance — it tracks type, props, state, and pointers (child/sibling/return) forming a linked-list tree, which lets React pause, resume, or abort work instead of relying on the call stack.

Double Buffering

React keeps two Fiber trees: 'current' (what's on screen) and 'work-in-progress' (being built). At the end of a successful commit, React simply swaps which tree is current — an O(1) pointer flip rather than rebuilding the UI.

Priority Lanes & Concurrent Rendering

Updates are assigned to lanes (Sync, Input Continuous, Default, Transition, Idle). A urgent lane (e.g. a keystroke) can interrupt in-progress low-priority render work (e.g. a useTransition-wrapped search-results render), keeping input responsive.

Reconciliation & Keys

During diffing, React compares Fibers of the same type at the same position by key. Matching keys let React reuse the DOM node and its state; mismatched or missing keys (like array indexes on reordered lists) cause unnecessary unmounts/remounts.

React Render-Commit Pipeline

How a single setState call travels from scheduling through DOM mutation to the browser paint.

Schedule Update

setState/dispatch marks a Fiber as dirty and assigns it a priority lane; React's scheduler queues the work.

Render Phase (interruptible)

React walks the tree building a work-in-progress Fiber tree, calling function components and diffing against the current tree by key. Higher-priority work can pause this phase.

Reconciliation

The diff produces an effect list tagging Fibers as Placement, Update, or Deletion — describing exactly which DOM mutations are needed.

Commit Phase (synchronous)

React applies all DOM mutations in one uninterruptible pass, fires useLayoutEffect callbacks synchronously, then swaps the work-in-progress tree to become current.

Paint & Passive Effects

The browser paints the updated DOM, and React schedules useEffect callbacks to run asynchronously right after paint.

Interviewer Insights & Pro Tips

When asked 'why is useLayoutEffect sometimes necessary,' answer with the pipeline above: it runs synchronously in the commit phase before paint, so it can measure/mutate the DOM without a visible flicker — useEffect cannot make that guarantee.

Red Flags & Common Pitfalls

Assuming setState is always synchronous — inside React event handlers, React 18+ automatically batches multiple updates into a single render pass, even across Promise/setTimeout boundaries.
Treating the render phase as side-effect-safe for mutations; because it can be paused, aborted, or re-run, function components must stay pure during render.

Deep-Dive Architecture & Concepts

3. Hooks Deep-Dive: useEffect Timing, Custom Hooks & Pitfalls

Hook questions are the most common part of any React interview because they expose whether a candidate understands closures, cleanup semantics, and dependency correctness — not just hook names.

useEffect vs useLayoutEffect Timing

useEffect callbacks run asynchronously after the browser has painted, avoiding blocking visual updates. useLayoutEffect runs synchronously immediately after DOM mutations but before paint, used for measuring layout or preventing a flash of incorrect content.

Stale Closures

A hook callback captures the props/state values from the render it was created in. If a dependency array omits a reactive value, the callback keeps referencing that render's stale value on every subsequent invocation.

Custom Hooks as Composable Logic

A custom hook is just a function starting with 'use' that calls other hooks; it lets you extract and reuse stateful logic (data fetching, subscriptions, debouncing) across components without changing the component tree, unlike HOCs or render props.

useReducer for Complex State Transitions

When multiple pieces of state update together in response to the same events (a multi-step form, an undo/redo stack), useReducer centralizes transition logic and makes state changes easier to test and trace than scattered useState calls.

Custom useFetch Hook with Cancellation & Race-Condition Safety

tsx

import { useEffect, useState } from "react";
  
  interface FetchState<T> {
    data: T | null;
    loading: boolean;
    error: Error | null;
  }
  
  function useFetch<T>(url: string): FetchState<T> {
    const [state, setState] = useState<FetchState<T>>({
      data: null,
      loading: true,
      error: null,
    });
  
    useEffect(() => {
      const controller = new AbortController();
      setState((prev) => ({ ...prev, loading: true, error: null }));
  
      fetch(url, { signal: controller.signal })
        .then((res) => {
          if (!res.ok) throw new Error(`Request failed: ${res.status}`);
          return res.json() as Promise<T>;
        })
        .then((data) => setState({ data, loading: false, error: null }))
        .catch((error: Error) => {
          if (error.name !== "AbortError") {
            setState({ data: null, loading: false, error });
          }
        });
  
      // Cleanup: aborts the in-flight request if url changes or component unmounts
      return () => controller.abort();
    }, [url]);
  
    return state;
  }

Why it matters: The AbortController cleanup prevents two classic bugs at once: setting state on an unmounted component, and a race condition where a slower earlier request resolves after a faster later one and overwrites fresher data.

Interviewer Insights & Pro Tips

When explaining a dependency array bug, name the mechanism precisely: 'the effect closed over the render-N value of count because count was omitted from the deps array,' not just 'it was stale.'
Prefer the functional updater form, setCount(c => c + 1), when a new state value depends on the previous one — it removes the need to list the state variable itself as a dependency.

Red Flags & Common Pitfalls

Returning a cleanup function that references the wrong closure, unsubscribing from a newer subscription instead of the one the effect actually created.
Putting an object or array literal directly in a dependency array — it is a new reference every render, causing the effect to re-run on every single render.

Deep-Dive Architecture & Concepts

4. State Management & Next.js App Router Rendering Strategies

Modern React interviews increasingly test system-design-style judgment: choosing the right state tool for a feature, and reasoning about where in the SSR/SSG/ISR/RSC spectrum a page should live in the Next.js App Router.

State Management Spectrum

Local component state (useState/useReducer) for ephemeral UI, lifted state or composition for a few nearby components, Context for low-frequency cross-cutting values (theme, auth session), and an external store (Zustand, Redux Toolkit, Jotai) with selectors for complex or high-frequency global state.

SSR vs SSG vs ISR vs RSC

SSR renders per request for freshness; SSG pre-renders at build time for maximum speed on content that rarely changes; ISR statically serves pages but revalidates them on an interval or on-demand; RSC is a rendering model (not tied to timing) where Server Components stream serialized UI and ship zero JS to the client by default.

Hydration & Its Failure Modes

Hydration attaches event listeners and reconciles React's virtual tree against the server-rendered HTML without re-creating DOM nodes. A mismatch (different output on server vs first client render, e.g. from Date.now() or window checks) forces React to discard and re-render, or throw a hydration error.

App Router Caching Layers

Four distinct caches operate together: Request Memoization (dedupes identical fetch calls within one render), the Data Cache (persists fetch results across requests/deploys), the Full Route Cache (caches rendered HTML/RSC payload at build time), and the Router Cache (client-side, caches visited route segments for instant back/forward navigation).

Next.js App Router Request-to-Hydration Pipeline

How a request becomes interactive UI in an app mixing Server and Client Components.

Request Hits the Server

Next.js matches the route segment tree and begins rendering Server Components, fetching data directly (DB calls, internal APIs) with no client bundle involved.

RSC Payload Generation

Server Components render to a compact serialized RSC payload; any 'use client' boundaries are left as placeholders referencing their client bundle.

HTML Streaming to Client

The server streams initial HTML (and the RSC payload) to the browser incrementally, using Suspense boundaries so slower data-dependent sections arrive later without blocking the shell.

Client Bundle Hydration

React loads the JS for Client Component boundaries and hydrates them, attaching event listeners and reconciling against the server HTML without discarding existing DOM nodes.

Interactive & Router-Cached

The page becomes fully interactive; the visited route segment is stored in the client Router Cache so subsequent navigations to it are instant.

Interviewer Insights & Pro Tips

When asked to pick a rendering strategy, always tie the answer to data freshness requirements and traffic pattern, e.g. 'a product page with 10k SKUs updated hourly is a strong ISR candidate with a 3600s revalidate.'
If asked how to fix a hydration mismatch caused by browser-only APIs, mention moving the value into useEffect/state (so it renders only after mount) rather than reaching for suppressHydrationWarning as a first resort.

Red Flags & Common Pitfalls

Reaching for Redux/Context to store data that is really server-owned (a fetched list, a user record) instead of using a cache-aware fetcher or Server Components, duplicating a source of truth.
Assuming 'use client' opts an entire subtree out of streaming/SSR — it only means that component (and its children) hydrate and run in the browser; it is still server-rendered for the initial HTML.

Real-World Example

Migrating a Legacy CRA Fintech Dashboard to the Next.js App Router

A fintech analytics team maintained a Create React App dashboard that shipped roughly 1.4MB of JavaScript before a single chart rendered, causing slow, sluggish load times for account managers checking overnight metrics from constrained office networks.

1Audited the component tree to separate data-fetching and presentational logic from genuinely interactive widgets (date pickers, drill-down charts).
2Migrated top-level dashboard routes to the Next.js App Router, converting static shells and KPI tiles into Server Components that fetch metrics directly from internal APIs.
3Isolated interactive pieces into small 'use client' leaf components instead of marking entire pages client-side, keeping most of the tree server-rendered with zero shipped JS.
4Replaced a monolithic Redux store with React Query for server-owned cache state, keeping Zustand only for local UI state like open panels and selected filters.
5Added per-widget Suspense boundaries with loading.tsx skeletons so above-the-fold KPIs streamed in immediately while slower chart queries resolved separately.

Outcome: Client JavaScript bundle size dropped by 61% and first meaningful paint improved from 3.8s to 1.2s on a throttled connection, with no loss of interactivity.

Real-World Interview Questions

Mistakes That Sink Otherwise Strong Candidates

Omitting reactive values from a useEffect dependency array to 'stop an infinite loop.'

Why it happens: The effect re-runs too often, so removing the offending dependency looks like a quick fix and silences the linter warning.

The fix: Include every reactive value the effect reads; if that causes excessive re-runs, restructure the effect (split it, move logic to an event handler, or store the value in a ref) instead of hiding the dependency.

Using the array index as a list item's key.

Why it happens: It's the most convenient value available inside a .map(item, index) call and works fine until the list is reordered, filtered, or has items inserted/removed.

The fix: Key list items by a stable, unique identifier from the underlying data, never by position.

Mutating state directly, such as pushing into an array or setting a property on a state object.

Why it happens: It mirrors familiar imperative JavaScript, and the mutation can even appear to work because React sometimes still re-renders from an unrelated update.

The fix: Always create a new reference (spread syntax, array methods that return new arrays, or a library like Immer) so React's shallow-equality checks correctly detect the change.

Fetching data inside useEffect with no cancellation, leading to race conditions and 'set state on unmounted component' warnings.

Why it happens: The naive fetch-in-effect pattern is what most tutorials teach first, and cancellation is easy to forget.

The fix: Use an AbortController in the cleanup function, or move data fetching to a library (React Query/SWR) or Server Components that already handle cancellation and caching.

Storing frequently-changing global state in a single large Context provider.

Why it happens: Context feels like a lightweight built-in global store, so it's a natural first reach for shared state.

The fix: Split Context by concern and memoize its value, or move high-frequency state into a selector-based external store so unrelated consumers don't re-render on every change.

Marking whole pages 'use client' because one small widget needs interactivity.

Why it happens: It's the path of least resistance when a build error demands a client boundary somewhere in the tree.

The fix: Push 'use client' down to the smallest interactive leaf component and keep the surrounding layout and data-fetching as Server Components.

Wrapping every value and function in useMemo/useCallback as a default habit.

Why it happens: Blog posts and cargo-culted 'best practices' present memoization as always-safe performance hygiene.

The fix: Profile with React DevTools first; memoize only expensive computations or references that must stay stable for a memoized child or a dependency array.

Rendering non-deterministic values like Date.now(), Math.random(), or window/localStorage checks directly during render in an App Router page.

Why it happens: It's easy to forget the server has no window/localStorage and that the same render function runs on both server and first client pass.

The fix: Move browser-only or non-deterministic logic into useEffect so it only affects the DOM after mount, keeping the initial server and client output identical.

Cheat Sheet

Quick-Reference Cheat Sheet

Rules of Hooks

Call orderOnly call hooks at the top level — never inside loops, conditions, or nested functions

Call siteOnly call hooks from React function components or other custom hooks

NamingCustom hooks must start with 'use' so the linter and React can track them

use() exceptionuse() may be called conditionally and in loops, unlike every other built-in hook

CleanupReturn a function from useEffect to cancel subscriptions, timers, or in-flight fetches

Rendering Strategy Comparison

SSGBuilt once at deploy time, served from CDN — fastest TTFB, best for rarely-changing content

SSRRendered per request on the server — always fresh, higher TTFB and server load

ISRStatic pages revalidated on a timer or on-demand — near-fresh data at near-static speed

RSCComponents render server-only and ship zero client JS by default, streamed to the client

CSRRendered fully in the browser after JS loads — best for highly interactive, low-SEO dashboards

Next.js App Router File Conventions

page.tsxDefines the unique UI for a route segment

layout.tsxShared UI wrapping child segments; preserves state across navigation

loading.tsxAutomatic Suspense fallback shown while a segment's data loads

error.tsxClient-side error boundary scoped to a route segment

route.tsDefines a Route Handler (API endpoint) for a segment

template.tsxLike layout.tsx but remounts on every navigation, resetting state

Fiber & Render Cycle Vocabulary

Render phasePure and interruptible — builds the work-in-progress Fiber tree

Commit phaseSynchronous — mutates the real DOM and fires layout effects

ReconciliationThe diff that assigns Placement/Update/Deletion effect tags

LanesPriority buckets (Sync, Transition, etc.) letting urgent work interrupt less urgent work

Double bufferingReact keeps current and work-in-progress trees, swapping pointers on commit

State Management Decision Guide

Single-component UI stateuseState / useReducer

Shared between a few nearby componentsLift state up, or compose with children/slots

Low-frequency cross-cutting valuesContext API (theme, auth session, locale)

Complex or high-frequency global stateExternal store with selectors (Zustand, Redux Toolkit, Jotai)

Server-owned dataReact Query/SWR, or RSC + Server Actions — not client global state

Performance Optimization Toolkit

React.memoSkips a component's re-render when its props are shallowly equal

useMemoMemoizes an expensive computed value between renders

useCallbackMemoizes a function reference to preserve equality for children/effects

key propForces a remount of a subtree when identity should reset

React CompilerAutomatically inserts memoization at build time, reducing manual useMemo/useCallback

Code splittingReact.lazy + Suspense to defer loading a bundle until it's needed

Assessment Integration

Recommended Practice Quizzes on QuizCluster

Test your retention and prepare for timed live coding and MCQ technical screening rounds:

390 Quizzes

React & Next.js

Drill React 19 hooks, Fiber rendering internals, and App Router SSR/SSG/ISR/RSC strategies.

Start Practice Test

50 Quizzes

JavaScript Engine & React Internals

Test event loop mechanics alongside React's Fiber scheduler, reconciliation, and priority lanes.

Start Practice Test

620 Quizzes

JavaScript & TypeScript

Reinforce the closures, async patterns, and type system fundamentals every React question assumes.

Start Practice Test

Frequently Asked Questions

Do I need to memorize React's internal source code for interviews?

No, but you do need the mental model: Fiber trees, the render vs commit phase split, and priority lanes. Interviewers use these topics to test depth beyond hook syntax, not to test whether you've read the React source line by line.

Is Redux still relevant given Context and Server Components?

Yes, but its scope has narrowed. With React Server Components and Server Actions increasingly owning server data, external stores like Redux or Zustand are now best reserved for genuinely client-only, high-frequency UI state rather than mirroring data the server already owns.

Should I still learn class component lifecycle methods for interviews in 2026?

You rarely need to write new class components, but understanding the conceptual mapping (componentDidMount/componentDidUpdate to useEffect, componentWillUnmount to a cleanup function) is still useful since interviewers use it to probe whether you understand hooks or just memorized their syntax, and legacy codebases still exist.

How much Next.js should a 'React' interview candidate actually know?

Quite a lot in practice. Because the App Router is the dominant way companies ship React today, expect SSR/SSG/ISR/RSC and hydration questions even in interviews framed as 'pure React,' since most teams can't separate the two in production.

Explore Other Preparation Guides

Software Engineering

How to Prepare for SDE Interview: Complete 2026 Roadmap

16 min readRead →

Java Ecosystem

How to Prepare for Java Developer Interview: Core to Spring Boot & JVM

18 min readRead →

Microservices & Distributed Systems

How to Prepare for Microservices Developer Interview: Distributed Architecture & Cloud

17 min readRead →

System Design

System Design Interview Guide: Complete 2026 Roadmap

21 min readRead →

Databases

SQL Interview Questions & Preparation Guide: Beginner to Advanced

17 min readRead →

Programming Languages

Python Interview Preparation: Complete Guide for 2026

17 min readRead →

Cloud & DevOps

Kubernetes Interview Guide: Architecture, Pods, Networking & Troubleshooting

17 min readRead →

Cloud & DevOps

AWS Solutions Architect Interview Guide: Real Architecture Scenarios

17 min readRead →

Databases

Database System Design: SQL vs NoSQL, Sharding, Replication & Indexing

19 min readRead →

Microservices & Distributed Systems

Kafka Interview Guide: Architecture, Consumers, Partitions & Exactly-Once Semantics

17 min readRead →

Backend Engineering

REST API Design Interview Guide: Authentication, Pagination, Versioning & Rate Limiting

15 min readRead →

Cloud & DevOps

Docker Interview Guide: Images, Containers, Networking & Production Debugging

15 min readRead →

Programming Languages

JavaScript & TypeScript Interview Guide: From Closures to the Event Loop

17 min readRead →

Backend Engineering

Node.js Backend Interview Guide: Event Loop, Streams, APIs & Scaling

17 min readRead →

Databases

Redis System Design Guide: Caching, Eviction, Persistence & Distributed Locks

17 min readRead →

Software Engineering

Concurrency Interview Guide: Threads, Locks, Race Conditions & Deadlocks

17 min readRead →

Software Engineering

Dynamic Programming Patterns: How to Recognize and Solve DP Problems

17 min readRead →

React Interview Preparation: React 19 & Next.js Guide

What You Must Master to Clear This Track

Step-by-Step Study Plan

JSX Mental Model, Component Design & Hook Internals

Fiber, Concurrent Rendering, React 19 Features & State Strategy

Rendering Strategies, Hydration, Caching Layers & Live Practice

1. React 19: Actions, the use() Hook & Server Components

2. The Fiber Reconciler & Render-Commit Lifecycle

3. Hooks Deep-Dive: useEffect Timing, Custom Hooks & Pitfalls

4. State Management & Next.js App Router Rendering Strategies

Migrating a Legacy CRA Fintech Dashboard to the Next.js App Router

Top Must-Know Interview Questions & Model Answers

Q1: What are the Rules of Hooks, and why must hooks be called unconditionally at the top level of a component?

Q2: Explain why useEffect runs after paint but useLayoutEffect runs before paint, and when that distinction actually matters.

Q3: What is a Fiber, and how does the Fiber architecture differ from React's old stack-based reconciler?

Q4: What problem does the new use() hook solve, and how is it different from calling a normal hook conditionally?

Q5: What is a Server Action, and how does progressive enhancement work for forms built with React 19?

Q6: Explain React's concurrent rendering and the priority lanes model in your own words.

Q7: What is the difference between SSR, SSG, ISR, and RSC in the Next.js App Router?

Q8: What causes a hydration mismatch error, and how do you actually fix one?

Q9: Compare re-render behavior of the Context API versus an external store like Zustand or Redux.

Q10: Why does a stale closure bug happen inside useEffect or useCallback, and how do you fix it?

Q11: When should you use useMemo or useCallback, and when do they actually hurt more than help?

Q12: How would you design a custom hook that safely handles an async request with cancellation on unmount or re-invocation?

Q13: Explain the difference between the render phase and commit phase, and why only the render phase is interruptible.

Q14: Why are array indexes bad keys for dynamic lists, and what specifically breaks?

Q15: What is useOptimistic and when would you reach for it instead of local state?

Q16: How does streaming SSR with Suspense boundaries work in the Next.js App Router?

Q17: What is React.memo, and why doesn't it always prevent a component from re-rendering?

Q18: How do you decide between local component state, lifted state, Context, and a global store?

Q19: What are React Server Components, and what can and can't run inside them?

Q20: What's the difference between useState's functional updater form and passing a direct value?

Q21: What is the purpose of the 'use client' and 'use server' directives?

Q22: How does React batch state updates in event handlers versus async callbacks like setTimeout or a fetch .then()?

Q23: What is the dependency array footgun in useEffect, and how does eslint-plugin-react-hooks help?

Q24: How does React's diffing algorithm decide whether to update a component in place versus unmount and remount it?

Q25: Explain the caching layers in the Next.js App Router: Request Memoization, Data Cache, Full Route Cache, and Router Cache.

Q26: What is prop drilling, and how does component composition (passing children as props) avoid it without introducing Context?

Q27: What does the React Compiler (automatic memoization) change about how developers write components?

Q28: How would you implement a custom hook using useSyncExternalStore to safely subscribe to an external data source?

Mistakes That Sink Otherwise Strong Candidates

Quick-Reference Cheat Sheet

Recommended Practice Quizzes on QuizCluster

React & Next.js

JavaScript Engine & React Internals

JavaScript & TypeScript

Frequently Asked Questions

Do I need to memorize React's internal source code for interviews?

Is Redux still relevant given Context and Server Components?

Should I still learn class component lifecycle methods for interviews in 2026?

How much Next.js should a 'React' interview candidate actually know?

Explore Other Preparation Guides