React interview questions and answers

Core rendering model

What problem does the virtual DOM solve?

React diffs a lightweight tree instead of touching the real DOM on every change, batching updates and writing only what actually differs. It trades memory and computation for far fewer expensive DOM mutations.

Why does an effect run twice in development?

React 18+ Strict Mode intentionally mounts, unmounts and remounts components in dev to surface effects that clean up incorrectly. It is a diagnostic, not a bug — production builds mount once.

What is a key prop actually for?

It tells the reconciler which array item is the same element across renders, so it can preserve or discard state and DOM nodes correctly instead of diffing by index. Using array index as a key breaks this once the list reorders.

What is the difference between state and props?

Props are inputs passed from a parent and are read-only from the child. State is local to a component instance and changing it via its setter triggers a re-render of that component and its children.

Hooks

Difference between useMemo and useCallback?

useMemo memoizes a computed value; useCallback memoizes a function reference. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps) — both exist to preserve referential equality across renders.

When does useEffect run relative to painting?

useEffect runs asynchronously after the browser paints, so it never blocks the visible frame. useLayoutEffect runs synchronously before paint, for when you need to measure or mutate the DOM before the user sees it.

Why can hooks not be called conditionally?

React matches hooks to state by call order per render, not by name. Skipping a hook in some renders shifts that order and corrupts the bookkeeping for every hook after it.

What is the use() hook?

use() reads the value of a promise or context, and unlike other hooks it can be called conditionally or inside loops. Reading a promise with use() suspends the component until it resolves.

useRef vs useState for storing a value?

A ref’s .current mutates without a re-render and persists across renders. useState’s setter triggers a re-render. Use a ref for values the UI does not need to reflect immediately, like a timer id.

React 19

What is the React Compiler?

A build-time tool that automatically memoizes components and values, aiming to make manual useMemo/useCallback mostly unnecessary. It ships as an opt-in babel/swc plugin, not default runtime behaviour.

What are Actions in React 19?

Functions passed to forms or transitions that can be async, with React tracking their pending state automatically through hooks like useActionState — no more manual isPending flags for form submissions.

What does useActionState do?

It takes a reducer-like action and initial state and returns the current state, a dispatch-wrapped action, and a pending boolean, built for form submissions where the action itself is async. It replaces the earlier useFormState.

Server Components and performance

How do Server Components differ from SSR?

Server Components render on the server and never ship their JS to the client at all, cutting bundle size. Traditional SSR still hydrates the same client JS afterward; a Server Component’s code does not exist client-side unless it crosses a Client Component boundary.

What does React.memo actually prevent?

It skips re-rendering when props are shallow-equal to the previous render. It does nothing about the parent re-rendering the tree above it, or about a context value changing.

What is context best used for, and its downside?

It avoids prop drilling for data many nested components need, like theme or auth state. Its downside is that any change to the value re-renders every consumer, making it a poor fit for high-frequency updates.

How does startTransition differ from a normal update?

Marking an update with startTransition tells React it is low priority and interruptible, so an urgent update like a keystroke is not blocked while a large re-render, such as filtering a big list, is in progress.

What is React.lazy for?

It defers loading a component’s bundle until it is actually needed, paired with Suspense for a fallback while the chunk downloads, shrinking the initial bundle for routes not immediately used.

Common bugs

What causes an infinite render loop with useEffect?

Setting state inside an effect whose dependency array includes an object or array literal recreated every render re-triggers the effect after every update. Fix by depending on primitives or moving the logic out of the effect.

What causes a "too many re-renders" error?

Calling a state setter directly during render, e.g. onClick={setCount(count+1)} instead of onClick={() => setCount(count+1)}, invokes the setter on every render pass and schedules another render immediately.

Controlled vs uncontrolled inputs?

A controlled input’s value is driven by React state via onChange; an uncontrolled input keeps its own DOM state, read through a ref when needed. Controlled costs more re-renders but gives validation on every keystroke.

How this is worked out

• Each entry is a real question with a 2-4 sentence answer, grouped by topic rather than difficulty.
• React 19 features are marked as such so you know what is new versus what has been stable since hooks shipped.
• No question here depends on a specific company’s codebase — these are the ones asked cold, in a screen.

Questions people ask

Is jQuery-era React (class components) still asked about?

Rarely as the main topic, but a screener may ask you to explain lifecycle methods versus hooks if the codebase you would join is older. Know that componentDidMount plus componentDidUpdate roughly map to useEffect.

Do I need to know the React Compiler to pass a screen in 2026?

You should know it exists and what it changes about memoization, but most teams are not fully on it yet, so deep internals are unlikely to be asked.

What is the single most commonly asked question here?

Why an effect runs twice in development. It trips up almost everyone who has not read the Strict Mode changelog, and interviewers know it.