Question 1

What's the difference between useState and useReducer?

Accepted Answer

useState is for simple, mostly independent values. useReducer is for related pieces of state that change together through a small set of named actions — it makes the transitions explicit and testable.

Question 2

Why doesn't the count update immediately after calling setState inside an event handler?

Accepted Answer

State values in React are snapshots that belong to the render they were read in. Calling setState schedules an update — it does not mutate the current variable. The new value shows up on the next render.

Question 3

What's the difference between useEffect and useLayoutEffect?

Accepted Answer

useEffect runs after the browser has painted — good for most side effects. useLayoutEffect runs synchronously after DOM mutations but before paint — use it when you need to measure or mutate the DOM without a visible flicker.

Question 4

When should you actually use useMemo instead of just computing a value directly?

Accepted Answer

Use useMemo when the computation is genuinely expensive OR when the result is a reference (object/array) that a downstream memoized child or dependency array needs to stay stable. Otherwise it's overhead, not optimization.

Question 5

What's the difference between useCallback and useMemo?

Accepted Answer

useCallback returns a memoized function reference. useMemo returns a memoized value. They're the same idea — in fact useCallback(fn, deps) is just sugar for useMemo(() => fn, deps).

Question 6

Why doesn't React.memo prevent this component from re-rendering?

Accepted Answer

React.memo does a shallow prop comparison. If the parent recreates any object, array, or function prop on every render, the reference changes and memo bails. Wrap those props in useMemo / useCallback so the reference is stable.

Question 7

Why do custom hooks need the 'use' prefix?

Accepted Answer

The prefix is a convention enforced by the ESLint Rules of Hooks plugin so it can check that hooks are only called at the top level of a component or another hook. React itself doesn't require the name.

Question 8

How do you avoid stale closures in a custom hook like useInterval?

Accepted Answer

Keep the latest callback in a ref. Update the ref every render, and have the interval read from the ref — that way it always calls the current logic without needing to be torn down and rebuilt.

Question 9

When should you split a single context into multiple smaller providers?

Accepted Answer

Split when frequently-changing state lives in the same provider as rarely-changing state. Every consumer of the shared context re-renders when any value in it changes — separating them scopes re-renders to only the consumers that care.

Question 10

What's the difference between a controlled and an uncontrolled input?

Accepted Answer

In a controlled input, React state is the source of truth: the value comes from state and updates via onChange. In an uncontrolled input, the DOM holds the value and you read it with a ref when you need it.

Question 11

Why does useEffect run twice on mount in development with Strict Mode?

Accepted Answer

In development, Strict Mode intentionally mounts, unmounts, and remounts each component to surface effects that aren't properly cleaned up. It never happens in production builds. The fix is to write a correct cleanup function.

Question 12

How does React batch state updates differently inside a setTimeout versus inside an event handler?

Accepted Answer

In React 18+ with automatic batching, both cases batch the same way — every setState inside the same tick is coalesced into one render. Before React 18, updates inside setTimeout / promises did NOT batch; that older behaviour is the source of this classic trick question.

React interview questions and answers

Hooks & State

What's the difference between useState and useReducer?

Why doesn't the count update immediately after calling setState inside an event handler?

What's the difference between useEffect and useLayoutEffect?

Custom Hooks

Why do custom hooks need the 'use' prefix?

How do you avoid stale closures in a custom hook like useInterval?

Performance

When should you actually use useMemo instead of just computing a value directly?

What's the difference between useCallback and useMemo?

Why doesn't React.memo prevent this component from re-rendering?

Context & Patterns

When should you split a single context into multiple smaller providers?

Forms & Events

What's the difference between a controlled and an uncontrolled input?

FAANG Interview Set

Why does useEffect run twice on mount in development with Strict Mode?

How does React batch state updates differently inside a setTimeout versus inside an event handler?