React Interview Questions and Answers (2026)

React interviews concentrate on a predictable core: the virtual DOM and reconciliation, state versus props, the hook rules and why they exist, why lists need stable keys, and how to avoid unnecessary re-renders. Most questions are testing whether you understand the mental model rather than whether you have memorised an API — an interviewer asking about keys wants to hear about reconciliation, not about avoiding a console warning. Be ready to explain why a rule exists, not just what it says, and to name the trade-off in any performance optimisation you propose, since useMemo and useCallback both cost something.

React powers a huge share of front-end interviews, and the questions tend to cluster around a predictable set of concepts: rendering, state, hooks, performance, and the mental model behind it all. Below are common React interview questions with concise, interview-ready answers you can adapt in your own words.

Core concepts

What is the virtual DOM and why does React use it?

The virtual DOM is an in-memory representation of the UI. When state changes, React builds a new virtual tree, diffs it against the previous one (reconciliation), and applies the minimal set of real DOM updates. This avoids expensive, manual DOM manipulation and lets you write declarative UI as a function of state.

What is the difference between state and props?

Props are inputs passed into a component by its parent — read-only from the component’s perspective. State is data a component owns and can update over time with a setter (such as the one returned by useState). Props flow down; state is local. When state changes, the component re-renders.

What are keys and why do they matter in lists?

Keys give React a stable identity for each item in a list so it can match elements between renders. Without stable keys (or when using array indices for dynamic lists), React can misattribute state and produce subtle bugs when items are reordered, inserted, or removed. Use a stable, unique id from your data.

What is the difference between controlled and uncontrolled components?

A controlled component derives its value from React state and updates it via onChange — React is the single source of truth. An uncontrolled component keeps its own internal state in the DOM, which you read with a ref when needed. Controlled inputs are easier to validate and keep in sync; uncontrolled inputs are lighter for simple cases.

Hooks

What rules govern hooks?

Call hooks only at the top level of a component or another hook — never inside loops, conditions, or nested functions — so the call order is stable between renders. And call them only from React functions (components or custom hooks). These rules let React associate hook state with the right call.

When does useEffect run, and what does its dependency array control?

useEffect runs after the render is committed to the screen. The dependency array controls when it re-runs: an empty array runs it once on mount; a populated array re-runs it whenever any listed value changes; omitting the array runs it after every render. Return a cleanup function to undo subscriptions or timers before the next run and on unmount.

What is the difference between useMemo and useCallback?

useMemo memoizes a computed value; useCallback memoizes a function reference. Both recompute only when their dependencies change. Use them to avoid expensive recalculations or to keep stable references for dependency arrays and memoized children — but don’t reach for them by default, since memoization has its own cost.

What problem does useRef solve?

useRef gives you a mutable container whose .current persists across renders without triggering a re-render when it changes. Common uses: referencing a DOM node, storing a previous value, or holding a mutable value (like a timer id) that shouldn’t cause renders.

Performance

How do you prevent unnecessary re-renders?

Identify what actually changed. Tools include React.memo to skip re-rendering a component when its props are shallow-equal, stable references via useCallback/useMemo, splitting components so state lives close to where it’s used, and lifting expensive work out of render. Always measure first with the Profiler rather than guessing.

What is reconciliation?

Reconciliation is React’s process of comparing the new element tree with the previous one to determine the minimal DOM updates. It assumes elements of different types produce different trees and uses keys to match children efficiently. Understanding it explains why keys and component identity matter.

Mental model

What does “React is declarative” mean in practice?

You describe what the UI should look like for a given state, and React figures out how to update the DOM to match. You don’t imperatively add and remove nodes; you change state and let React reconcile. This makes UIs easier to reason about because the render output is a pure function of props and state.

How would you explain when to lift state up?

When two or more components need to share or stay in sync with the same data, move that state to their closest common ancestor and pass it down as props (with callbacks to update it). This keeps a single source of truth and avoids duplicated, drifting state.

---

The fastest way to get comfortable with these is to explain each answer out loud, in your own words, as if to an interviewer — then practice a few live. A structured copilot like NostrobeAI can prompt the right framing in real time while you build the muscle.