Senior React Developer Interview Questions
Senior React interview questions on Fiber, reconciliation, concurrent rendering, Server Components, hydration, architecture, auth and building component libraries.
36 questions · 5+ years experience
A senior React interview is mostly not about React. It is about judgement: what you would build, what you would refuse to build, how you would find a problem you have never seen, and how you would explain the decision to someone who disagrees.
The React internals questions still appear, and they are worth knowing, but they are rarely the deciding factor. The deciding factor is usually the architecture or debugging discussion, and whether you can say "I do not know, here is how I would find out" without flinching.
What a senior loop usually contains
- A system design round. Design a dashboard, a data table, a design system, or the front end of a product. Data flow, caching, rendering strategy, error handling and how the team will work in it.
- A deep dive on internals. Reconciliation, Fiber, concurrent rendering, hydration. Depth matters less than being able to say what problem each one solves.
- A debugging or code review round. You are given something slow or broken and asked to reason out loud.
- Leadership questions. How you review code, mentor, handle disagreement about a technical decision, and manage a migration.
The questions, with one line answers
Say each one out loud before you open it. If the sentence does not come out cleanly, follow the link for the full answer and the reasoning behind it.
Reconciliation is how React works out the difference between the previous element tree and the new one. A general tree diff is O(n³), so React uses two assumptions to make it O(n): different element types produce different trees, and keys identify children that stayed the same.
Advanced ReactRead the full answer
2.What is React Fiber?
SeniorFiber is the reconciler React has used since version 16. It re-implemented rendering as a linked list of units of work that can be paused, resumed, reprioritised and abandoned, which is what makes concurrent features possible.
Advanced ReactRead the full answer
Concurrent rendering lets React prepare more than one version of the UI at once and interrupt a low priority render when something more urgent arrives. It is not a feature you turn on, it is a capability that features such as transitions and Suspense build on.
Advanced ReactRead the full answer
Hydration is React attaching event listeners and internal state to server rendered HTML instead of recreating it. A mismatch happens when the first client render produces different markup from the server's, usually because of time, randomness or browser-only APIs.
Advanced ReactRead the full answer
Server Components run only on the server and never ship to the browser. They can await data directly and render to a serialised description that the client merges into its tree, so their dependencies add nothing to the bundle.
Advanced ReactRead the full answer
6.What are Server Actions?
SeniorA Server Action is a function marked 'use server' that a client component can call as if it were local; the framework turns the call into a request. It replaces hand-written API routes for mutations and works as a form action even before JavaScript loads.
Advanced ReactRead the full answer
Streaming sends the HTML in chunks as it is rendered, so the shell appears while slow parts are still pending inside Suspense boundaries. Selective hydration then hydrates the parts the user interacts with first, rather than the whole page in order.
Advanced ReactRead the full answer
Group by feature rather than by file type, keep shared UI and utilities in a small common layer, and enforce the direction of dependencies so features do not import each other's internals.
Advanced ReactRead the full answer
Keep tokens out of localStorage where possible: prefer httpOnly, secure, sameSite cookies set by the server. Hold the session in context, guard routes for user experience, and treat every authorisation decision as the server's job.
Advanced ReactRead the full answer
Start from accessible primitives, design the API around composition rather than configuration props, expose styling hooks instead of hard-coding a theme, and document with real examples. Version it and treat prop changes as breaking changes.
Advanced ReactRead the full answer
Both mark work as non-urgent so React can keep the interface responsive. useTransition wraps the state update you are making and gives you an isPending flag; useDeferredValue takes a value you were given and lets you lag behind it.
React HooksRead the full answer
It subscribes a component to a store that lives outside React, guaranteeing a consistent snapshot during concurrent rendering. Library authors need it; application code usually only meets it indirectly through Redux, Zustand or a similar store.
React HooksRead the full answer
React 19 added use, useActionState, useOptimistic and useFormStatus. Together they cover reading a promise or context during render, and handling form submissions with pending, optimistic and error states without hand-rolled state.
React HooksRead the full answer
Largely, for code it can compile. The React Compiler memoises components and values automatically at build time, so most manual useMemo and useCallback calls become redundant — but only if your components follow the rules of React.
PerformanceRead the full answer
Split the context by concern and by update frequency, memoise the provider value, and separate state from dispatch so components that only write never re-render. For fine-grained reads, use a store with selectors instead.
PerformanceRead the full answer
Move each field's state into the field component so a keystroke re-renders one input rather than the whole form, or switch to uncontrolled inputs with a form library. If an expensive preview must update, defer it with useDeferredValue.
PerformanceRead the full answer
LCP measures how quickly the main content appears, INP how quickly the page responds to interaction, and CLS how much the layout jumps. A client rendered React app typically hurts LCP, heavy synchronous renders hurt INP, and unreserved space for images and ads hurts CLS.
PerformanceRead the full answer
Client state is owned by the browser and always current: form input, which modal is open, the selected theme. Server state is a cache of data that lives somewhere else, so it can be stale, shared and updated without you knowing.
State ManagementRead the full answer
Middleware sits between dispatching an action and the reducer receiving it, which is where side effects and logging live. Thunks let you dispatch a function that performs async work; sagas describe long-running flows as generator functions.
State ManagementRead the full answer
When the shared state is server data, URL state, or a handful of tree wide values. A server state library plus the URL plus a small amount of context covers a surprising number of production apps.
State ManagementRead the full answer
In the render phase React calls your components and builds the new tree; this work can be paused, restarted or thrown away, so it must be pure. In the commit phase React applies the changes to the DOM and runs refs and effects, and that cannot be interrupted.
Lifecycle & EffectsRead the full answer
A stale closure is a callback that captured props or state from an old render and keeps reading those values after they have changed. It happens when a function outlives the render that created it, typically inside an interval, a subscription or an event listener registered once.
Lifecycle & EffectsRead the full answer
It is a static class lifecycle that returns a state update from incoming props before every render. It is discouraged because it duplicates the source of truth, and almost every use has a simpler solution: compute during render, or reset with a key.
Lifecycle & EffectsRead the full answer
Render runs top down: parent first, then children. Effects run bottom up: children's effects fire before the parent's, because a parent's effect may depend on its children having mounted.
Lifecycle & EffectsRead the full answer
Compound components are a set of components that share implicit state through context and are composed by the consumer, like <Tabs>, <Tabs.List> and <Tabs.Panel>. It gives users layout freedom without a wall of configuration props.
Components & PropsRead the full answer
Because children is not guaranteed to be an array. React.Children.map handles a single child, nested arrays, null and fragments, and it also prefixes keys so nesting does not produce key collisions.
Components & PropsRead the full answer
Extend the element's prop type from React's JSX intrinsic elements, or use ComponentPropsWithoutRef, then add your own props on top and spread the rest onto the element.
React + TypeScriptRead the full answer
Declare a type parameter on the function and use it in the props, so the caller's data type flows through to the callbacks and the rendered items.
React + TypeScriptRead the full answer
Model the actions as a discriminated union on a type field and type the reducer as (state: State, action: Action) => State. TypeScript then narrows the payload inside each case and errors on an unhandled action.
React + TypeScriptRead the full answer
A state update happened outside anything React was told to wait for, usually an async update that resolved after the test finished its assertions. The fix is almost always to await the resulting change rather than to wrap something in act.
TestingRead the full answer
A loader is a function attached to a route that fetches its data before the route renders; an action handles form submissions to that route. They move data fetching out of components and remove the render-then-fetch waterfall.
React RouterRead the full answer
React does not attach a listener per element. It uses delegation: one listener per event type, attached to the root container the app is rendered into since React 17, and dispatches to the right component using the fibre tree.
Forms & EventsRead the full answer
A form can take a function as its action prop. React calls it with the FormData, tracks the pending state, resets the form on success, and integrates with useActionState, useFormStatus and useOptimistic — replacing most hand-written submit boilerplate.
Forms & EventsRead the full answer
34.Implement infinite scroll
SeniorPut a sentinel element after the list and observe it with IntersectionObserver. When it becomes visible and you are not already loading, fetch the next page. Disconnect the observer in the effect cleanup.
Coding ChallengesRead the full answer
35.Build an accessible modal dialog
SeniorRender it through a portal, close on Escape and on backdrop click, trap focus inside while it is open, and return focus to the element that opened it on close.
Coding ChallengesRead the full answer
Debounce the query, keep the suggestion list and a highlighted index in state, and handle ArrowUp, ArrowDown, Enter and Escape on the input. Wire up the combobox ARIA attributes so the highlighted option is announced.
Coding ChallengesRead the full answer
What to prepare
- [Advanced React](/react-interview-questions/advanced). Fiber, reconciliation, Suspense, Server Components, hydration, and the rendering strategies and when each is right.
- Architecture. Be able to draw how you would structure a large app and justify every boundary.
- [Performance](/react-interview-questions/performance) as a process, not a list of hooks: how you measure, what you measure, and how you know a change helped.
- [Coding rounds](/react-interview-questions/coding-challenges) still happen. Practise the accessible modal and the autocomplete; both are common and both are marked on the details.
- Your own history. Two or three decisions you made, what they cost, and what you learned.