React Interview Questions: The Complete Guide

React interviews sit in an unusual middle ground: candidates often know React well enough to use it productively at work, but struggle to explain why it behaves the way it does when asked directly. Interviewers use this gap deliberately — a candidate who can build features but can't explain reconciliation, closures in useEffect, or unnecessary re-renders may be relying on trial and error rather than a real mental model. This guide covers the concepts that come up most often, with the kind of explanation that holds up under a follow-up question.

Why React Interviews Test More Than Syntax

Almost nobody fails a React interview because they don't know the useState syntax. They fail because they can't explain what happens underneath a common pattern — why a child component re-rendered when its props didn't change, or why a useEffect fired twice in development. Interviewers ask about these edge cases specifically because they separate people who've internalized React's rendering model from people who've pattern-matched their way to working code.

Core Concepts You'll Be Asked About

Component Lifecycle and Hooks

Expect to explain how useEffect replaces the old lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount), and specifically how the dependency array controls when it re-runs.

useEffect(() => {
  const id = setInterval(() => setCount((c) => c + 1), 1000);
  return () => clearInterval(id);
}, []); // runs once on mount, cleans up on unmount

A common follow-up: "What happens if you omit the dependency array entirely?" — the effect runs after every render, which is rarely what you want and is a frequent source of infinite loops when the effect itself updates state that's read inside it.

Controlled vs. Uncontrolled Components

A controlled input's value is driven by React state (value={state} plus onChange); an uncontrolled input manages its own internal DOM state, typically accessed via a ref. Interviewers ask this because it reveals whether you understand where "source of truth" lives for form data — a concept that generalizes well beyond forms.

Keys and Reconciliation

React uses key to match elements across renders when diffing a list. Using array index as a key works until the list is reordered or filtered, at which point React can misattribute state to the wrong item. The correct answer references a stable, unique identifier from the data itself — not the array position.

Common Conceptual Questions and How to Answer Them

"What is the virtual DOM, and why does it matter?" The virtual DOM is an in-memory representation of the UI that React diffs against the previous version to compute the minimal set of real DOM changes needed. The "why it matters" part of the answer should mention that direct DOM manipulation is comparatively expensive, so batching and minimizing real DOM writes is the actual performance win — not that the virtual DOM is inherently "faster" in the abstract.

"When would you use useMemo versus useCallback?" useMemo memoizes a computed value; useCallback memoizes a function reference. Use useCallback when passing a function as a prop to a memoized child component, so that child doesn't re-render just because a new function reference was created on every parent render. Use useMemo when a calculation is expensive enough that recomputing it on every render is genuinely wasteful — not as a default habit, since memoization itself has a small cost.

"Why did my useEffect fire twice in development?" This is Strict Mode intentionally double-invoking effects (mount, unmount, remount) to help surface effects that aren't properly cleaned up. It does not happen in production builds. Candidates who don't know this often assume it's a bug in their code, which is itself a useful signal to interviewers about experience level.

Performance and Rendering Questions

Expect at least one question about avoiding unnecessary re-renders. The core ideas interviewers look for:

• React.memo prevents a component from re-rendering if its props haven't changed (shallow comparison) — useful for expensive leaf components receiving stable props.
• Re-renders cascade downward by default. A parent re-rendering re-renders all its children unless they're memoized and receive stable props.
• New object and array literals created inline in JSX (<Child data={{ x: 1 }} />) create a new reference every render, which defeats memoization on the child — this is one of the most common real-world performance bugs.
• Code-splitting with React.lazy and Suspense reduces initial bundle size for routes or components not needed immediately.

Most React performance questions aren't really about optimization techniques — they're about whether you understand what triggers a re-render in the first place.

State Management Questions

"Context API vs. Redux/Zustand — when would you use each?" A strong answer avoids treating this as a popularity contest. Context is well-suited to low-frequency updates shared across a subtree (theme, auth state, locale) — but because any consumer re-renders on any context value change, it's a poor fit for high-frequency or deeply nested state updates. A dedicated state library adds selector-based subscriptions, letting components subscribe to only the slice of state they need, which matters more as an app scales.

"When should state be lifted versus kept local?" Lift state only as high as the nearest common ancestor of the components that need it — lifting further than necessary causes unrelated components to re-render on updates they don't care about.

Practical / Coding Round Expectations

Live coding rounds typically ask you to build a small, self-contained component — a search-filterable list, a debounced input, a simple counter with derived state. Interviewers are watching for:

• Whether you reach for the simplest correct approach before adding abstraction
• Whether you handle obvious edge cases (empty state, loading state) without being prompted
• Whether you can explain your approach out loud while coding, not just silently produce a working answer

Common Mistakes Candidates Make

• Defining hooks conditionally or inside loops (violating the rules of hooks) under interview pressure
• Reaching immediately for useMemo/useCallback everywhere as a reflex, rather than when there's an actual measured or obvious performance need
• Confusing "component re-rendered" with "DOM actually changed" — React can re-render a component without touching the real DOM if the output is unchanged
• Not knowing the difference between state updates being batched vs. applied synchronously, especially in event handlers vs. setTimeout/promises

How to Prepare

Review your mental model of the render cycle until you can explain, out loud, what happens step by step when a state update fires — from the state change, through re-render, through reconciliation, to the resulting DOM update. Then practice explaining two or three real bugs you've personally debugged that involved re-renders or stale closures; interviewers respond well to real war stories, not just textbook definitions.

Conceptual fluency and live delivery are different skills, though — the ability to explain reconciliation clearly on a whiteboard doesn't automatically transfer to explaining it fluently, out loud, while someone is actively listening and ready to ask a follow-up.