In this article
How this list is ordered
Experienced candidates are asked less what a Hook is and more why React behaves as it does and what it costs. The list therefore starts with the rendering model, because most later answers rest on it, and ends with the newer features that senior loops now probe. For how a front-end loop is built, see the coding interviews guide and the interview loops guide; for the language underneath, see the JavaScript interview questions.
Answers cite the official documentation and release posts, read on 24 October 2026; check the docs for the version you use. Senior loops usually pair this with a design round and a story round, so also see the front-end developer interview questions, the system design guide, the behavioral interviews guide and the tell me about yourself page.
Rendering and state
What does batching do, and why does calling a state setter three times add only one?
React waits until all code in an event handler has run before it processes state updates, and each render sees state as a fixed snapshot. So setNumber(number + 1) three times adds 1, because number is the same value each time, while setNumber(n => n + 1) three times adds 3, because each updater receives the queued result (React docs, Queueing a Series of State Updates).
Why it is asked: it tests the snapshot model of state, the root of many stale-value bugs.
How does React decide whether to keep or reset a component's state?
React keeps a component's state for as long as the same component is rendered at the same position in the tree. A different component at that position, or a different key, discards the state, and changing a wrapper such as a section to a div resets the whole subtree below it (React docs, Preserving and Resetting State). Defining a component inside another creates a new component type on every render, so define components at the top level.
Why it is asked: it explains the common "my input lost its value" bug.
What does strict mode do, and why does my Effect run twice in development?
In development, strict mode re-renders components an extra time to find impure rendering, and runs one extra setup-and-cleanup cycle for every Effect to find missing cleanup; neither affects the production build (React docs, strict mode reference). An Effect that breaks when run twice, such as a connection never closed, needs a cleanup function, not the removal of strict mode.
Why it is asked: a senior developer treats the double run as a diagnostic, not a nuisance.
Knowing it is half the job. Saying it is the other half.
Interview Clozo is an AI interview copilot for real interview rounds: it hears the question and puts a strong answer on your screen, and you say it in your own words. See the features or how it works.
Start Free Trial →Hooks and Effects
Why can't Hooks be called conditionally?
The Rules of Hooks say to call Hooks only at the top level of a React function, never inside loops, conditions, nested functions or try, catch and finally blocks, and before any early return; and to call them only from React function components or custom Hooks (React docs, Rules of Hooks). React relies on the same Hooks being called in the same order on every render, which a condition can break. The lint plugin catches violations.
Why it is asked: it separates memorised rules from an understanding of why they exist.
When do you not need an Effect?
An Effect is for synchronising with something outside React, and most logic belongs elsewhere. The docs say to transform data at the top level of the component, which re-runs automatically when props or state change, and to handle user events in event handlers. The test they give: code that runs because a component was displayed belongs in Effects, and the rest belongs in events (React docs, You Might Not Need an Effect).
Text description of the diagram
- Transform data at the top level of the component during rendering.
- Handle user events in event handlers, and put code that runs because a component was displayed in an Effect.
Why it is asked: unneeded Effects are the most common sign of a Hooks codebase that was never reviewed.
How do you avoid a race condition when fetching data in an Effect?
Add a cleanup function that ignores stale responses. The docs show a local ignore flag set to true in the cleanup, so that a response for an older query or page is never stored if the dependencies changed first (React docs, You Might Not Need an Effect). For new code, a framework's data layer or Suspense with a cached promise is usually simpler than a hand-written Effect.
Why it is asked: it checks whether you know that responses can arrive out of order.
What problem does useEffectEvent solve?
It lets an Effect read the latest props and state without re-running when they change. The React docs describe Effect Events as part of the Effect's logic that behave like event handlers, always seeing the latest render values, so they are left out of the dependency array; they may only be called from inside Effects and must not be passed to other components (React docs, useEffectEvent). It arrived in the React 19.2 release post of 1 October 2025.
Why it is asked: it tests whether you follow the move away from suppressing the dependency lint rule.
When should you use useSyncExternalStore?
When a component subscribes to data that lives outside React, such as a browser feature or a third-party store. The docs say React has a purpose-built Hook for subscribing to an external store, and that it is preferred over writing the subscription in an Effect (React docs, You Might Not Need an Effect).
Why it is asked: it shows whether you know the supported route for external state.
Performance
When do memo, useMemo and useCallback help, and what changes with React Compiler?
memo skips re-rendering when props are unchanged, compared with Object.is, and the docs say it is valuable only when a component re-renders often with the same props and its rendering is expensive (React docs, memo). React Compiler 1.0, announced on 7 October 2025, applies automatic memoization at build time; for new code the team recommends relying on it and using useMemo or useCallback where precise control is needed (React Compiler v1.0, 7 October 2025).
Why it is asked: it tests whether you measure first and know the current guidance.
Why does a context change re-render consumers, and how do you limit it?
When a provider's value changes, React re-renders every component that reads that context. The values are compared with Object.is, and wrapping children in memo does not stop them receiving the new value. An inline object as the value is new on every render of the provider, so the docs suggest memoizing the value and its functions with useMemo and useCallback when the re-renders matter (React docs, useContext).
Why it is asked: it reveals whether you can reason about re-render cost in a large tree.
What is the difference between useTransition and useDeferredValue, and why not use them for a controlled input?
useTransition marks a state update as a Transition, which runs in the background and is interrupted by urgent updates; useDeferredValue lets a value lag behind so that rendering catches up later. The docs say transition updates cannot control text inputs, because updating an input should happen synchronously, and suggest a separate synchronous state for the input (React docs, useTransition).
Why it is asked: it tests whether you know what concurrent features can and cannot do.
How do you find what is making a React app slow?
Measure before changing code. React 19.2 added custom Chrome DevTools performance tracks: a Scheduler track showing work by priority, such as blocking and transition, and a Components track showing render and effect work (React 19.2, 1 October 2025). Record a trace of the slow interaction, find the component or Effect that dominates and fix that, then measure again.
Why it is asked: seniors are expected to diagnose before they optimise.
Server and modern React
What is a Server Component, and how does it differ from a Client Component?
A Server Component is a component that renders ahead of time, before bundling, in an environment separate from the client app, either once at build time or on each request. It is not sent to the browser, so it cannot use interactive features such as useState; a "use client" directive marks the boundary for interactivity (React docs, Server Components). Server Components were declared stable in React 19.
Why it is asked: it checks that you understand where code runs and what ships to the browser.
What does Suspense do, and what does it not detect?
Suspense is a component that shows a fallback until its children finish loading. It reacts to lazy-loaded code, to a promise read with use, and to streamed server HTML, but the docs say it does not detect data fetched inside an Effect or an event handler (React docs, Suspense). To avoid hiding content already on screen, wrap the update in startTransition or use useDeferredValue.
Why it is asked: it shows whether you know which data-loading patterns the feature can see.
What are Actions, useActionState and useOptimistic?
By convention, functions that use async transitions are called Actions, and React 19 lets forms accept them in the action prop. useActionState wraps an Action and returns its last result and its pending state, and useOptimistic shows a final state immediately while an async request runs, then reverts to the real value when it finishes or fails (React v19 post, 5 December 2024).
Why it is asked: it tests whether you have used the form model that React 19 introduced.
Where do error boundaries work, and what do they not catch?
An error boundary is a class component that catches errors thrown during rendering in its children and shows a fallback. The docs say there is currently no way to write one as a function component, though react-error-boundary provides one, and that boundaries do not catch errors in event handlers, server rendering, the boundary itself or asynchronous code such as setTimeout (React docs, Component).
Why it is asked: it separates people who have handled real failures from those who have read the headline.
How do you test a React component?
Test the way the software is used. The Testing Library's guiding principle is that the more your tests resemble the way your software is used, the more confidence they can give you (Testing Library, Guiding Principles). So render the component, interact through what the user sees and assert on visible results, not on internal state or hook calls.
Why it is asked: it reveals whether your tests survive a refactor.
What has changed in recent React versions?
React 19.0 shipped on 5 December 2024 with Actions and stable Server Components, 19.1 on 28 March 2025 and 19.2 on 1 October 2025 with Activity and useEffectEvent. React 19.3, released on 9 September 2026, makes ViewTransition and Fragment refs stable, adds use(browser()) to opt a component out of server rendering and lets Server Components render Context imported from a client module (React Versions; React 19.3, 9 September 2026).
Why it is asked: it shows whether you keep up with the platform you are hired to run.
Follow-up questions
Why can use be called inside a condition when other Hooks cannot?
The React docs say that despite its name use is not a Hook, and that unlike Hooks it can be called inside loops and conditional statements like if; it must still always be called with the Promise itself, and it cannot be wrapped in a try-catch block (React docs, use).
Does an error boundary catch an error thrown inside startTransition or an Action?
Yes for startTransition: the Component reference lists asynchronous code such as setTimeout as not caught, with the exception of the startTransition function from useTransition, where errors thrown inside the transition function are caught by error boundaries (React docs, Component). Errors in plain event handlers are not caught.
Since React 18, are updates inside setTimeout or a promise batched too?
Yes. The React v18.0 post says updates inside promises, setTimeout, native event handlers or any other event are batched automatically, where before only updates in React event handlers were; the post says new React 18 features need createRoot (React v18.0, 29 March 2022).
- State is a snapshot per render, and position in the tree decides whether it is kept.
- Put logic by its cause: derived values in render, user actions in handlers, display-driven synchronisation in Effects.
- Measure before memoizing, and know that React Compiler 1.0 automates much of it.
- Server Components run ahead of the browser; Suspense cannot see data fetched in Effects.
- Test through what the user sees, not through internals.
Sources
- Queueing a Series of State Updates — React documentation (react.dev), 24 Oct 2026
- Preserving and Resetting State — React documentation (react.dev), 24 Oct 2026
- Reference page for the strict-mode component — React documentation (react.dev), 24 Oct 2026
- Rules of Hooks — React documentation (react.dev), 24 Oct 2026
- You Might Not Need an Effect — React documentation (react.dev), 24 Oct 2026
- useEffectEvent — React documentation (react.dev), 24 Oct 2026
- memo — React documentation (react.dev), 24 Oct 2026
- useContext — React documentation (react.dev), 24 Oct 2026
- useTransition — React documentation (react.dev), 24 Oct 2026
- Server Components — React documentation (react.dev), 24 Oct 2026
- Suspense — React documentation (react.dev), 24 Oct 2026
- Component (error boundaries) — React documentation (react.dev), 24 Oct 2026
- React v19 — React team, 5 Dec 2024
- React 19.2 — React team, 1 Oct 2025
- React 19.3 — React team, 9 Sep 2026
- React Compiler v1.0 — React team, 7 Oct 2025
- use — React documentation (react.dev), 24 Oct 2026
- React v18.0 — React team, 29 Mar 2022
- React Versions — React documentation (react.dev), 24 Oct 2026
- Guiding Principles (Testing Library) — Testing Library, 24 Oct 2026
