A 20,000-node React tree takes 40 ms to update, and a developer writes to localStorage during component execution; explain what can happen across render and commit.

I would remove the write from render because React may execute that phase repeatedly without committing it. - Render builds candidate Fiber work, must stay pure, and may be paused, restarted, or abandoned. - Commit applies DOM mutations, updates refs, and runs layout effects synchronously for the accepted tree. - Passive effects run after commit, so localStorage synchronization belongs in an event handler or in an effect that mirrors committed state.

A product grid creates 30,000 elements, but a click in the header must remain responsive; how does Fiber make interruption possible?

Fiber turns the component tree into resumable units of work so React can yield between units before commit. - Each Fiber links to child, sibling, and parent work and keeps an alternate for the current and work-in-progress trees. - React can stop low-priority reconciliation after the browser's time budget, process the click, and resume or rebuild stale work. - The final commit remains atomic, so users never see a half-updated grid even though preparation was split.

Typing in a filter and refreshing a chart arrive in the same 16 ms frame; how do React lanes determine which update proceeds first?

React assigns updates to lanes that encode priority and lets urgent input work overtake transition work. - The controlled input receives a high-priority lane so its visible value can commit without waiting for the chart. - The chart refresh can occupy transition lanes, which React may merge, interrupt, or restart when fresher data arrives. - Entangled updates that must stay consistent can be processed together, while expired lanes are promoted to avoid starvation.

A team enables concurrent rendering and expects a 120 ms calculation inside a component to become faster; what would you tell them?

Concurrent rendering improves scheduling, but it does not make 120 ms of synchronous JavaScript execute faster. - React can yield between Fiber units, but it cannot interrupt one long calculation inside a component call. - I would profile the calculation, reduce its input, cache a proven repeated result, or move suitable CPU work to a Web Worker. - A transition can keep an older screen visible while new work is prepared, but total compute cost still has to be paid.

A search box filters 50,000 local rows and every keystroke blocks for 80 ms; where would you use startTransition?

I would update the input urgently and place only the expensive result-state update inside startTransition. - The text field must reflect each keystroke immediately, while React may interrupt obsolete list renders. - isPending can mark the existing results as updating instead of replacing useful content with a full-page spinner. - If filtering itself blocks for 80 ms before setState, I would also index the data, move computation to a worker, or query the server.

Autocomplete must limit API traffic to one request after 250 ms of idle time while keeping results rendering responsive; would you use useDeferredValue, debounce, or both?

I would debounce the request and use deferred rendering only if displaying the returned results is itself expensive. - A 250 ms debounce suppresses obsolete network starts, which useDeferredValue does not do. - useDeferredValue lets the controlled input stay current while a memoized result subtree renders an older query at lower priority. - I would cancel or ignore stale responses by request identity so a slow old query cannot replace newer results.

A route loads profile data in 100 ms, recommendations in 900 ms, and audit history in 2 seconds; place Suspense boundaries for a useful reveal sequence.

I would stream the profile shell first and give recommendations and audit history independent nested boundaries. - One route-level boundary would hold all useful content behind the 2-second dependency. - Stable skeleton dimensions for each section prevent the progressive reveal from increasing CLS. - The data layer must integrate with Suspense through a framework cache or a resource that can suspend during render, not an effect fetch.

Two sibling components request the same Suspense-enabled resource, and one render is restarted three times; what prevents four network calls?

I would put the request behind a cache keyed by resource identity rather than create a Promise during each component render. - Both siblings must read the same pending Promise so React can retry them when that shared work settles. - A render restart may call components again, so request creation inside render without caching duplicates I/O. - Rejection should reach an Error Boundary, while the Suspense fallback handles only the pending state.

A sortable table uses array indexes as keys, and an edited row shows another row's draft after sorting; explain the reconciliation failure.

The index key made React preserve component state by position instead of by the row's domain identity. - After sorting, the Fiber at index 3 was reused for a different record, so its local draft followed the position. - A stable row ID lets React move the matching Fiber and preserve state for the correct record. - Random keys would avoid the stale draft only by remounting every row, losing focus and defeating reuse.

An external trading store updates 500 times per second, and concurrent renders sometimes show different prices in one screen; what React contract should the store implement?

I would expose the store through useSyncExternalStore so React reads one consistent snapshot for a render. - getSnapshot must return the same reference until store data actually changes, otherwise React can enter a render loop. - subscribe must notify after mutations, and narrow immutable snapshots or selectors keep unrelated widgets from updating. - getServerSnapshot must reproduce the initial server value during hydration if the screen is server-rendered.

A React 19 product page ships 700 KB of JavaScript, but only the quantity picker and buy button are interactive; how would you partition it with RSC?

I would keep product composition and data reads in Server Components and isolate the picker and buy action behind a small client boundary. - Server-only formatting and database access stay on the server, while only their rendered result contributes to the RSC payload. - The Client Component receives serializable product ID, price, and stock data, not server closures or database objects. - I would verify the change through client chunk size and hydration CPU on a mid-range mobile device.

A candidate says React Server Components replace SSR; how would you correct that for a page that needs fast HTML and low client JavaScript?

I would use RSC and SSR together because they solve different stages of the rendering pipeline. - RSC decides which components execute only on the server and produces a component payload that can reduce client JavaScript. - SSR turns the initial server and client component result into HTML for the first navigation. - Hydration still activates Client Components, while later navigations can fetch and merge new RSC payloads without full-page HTML.

A Client Component receives a server-created Promise for a 600 ms request; how would you use React 19 use() without creating a request loop?

I would pass a stable Promise from the server or a cache and read it with use() under a nearby Suspense boundary. - While pending, use() suspends the component and React shows the boundary fallback until the Promise settles. - Creating a fresh Promise in every client render changes resource identity and can repeatedly suspend or trigger warnings. - Expected rejection needs an Error Boundary or a server result model because use() does not turn failures into ordinary values.

A component must read one of two theme contexts after an early return; what can React 19 use() do that useContext cannot?

I can call use() conditionally after the early return to read the selected Context while preserving React's supported use() rules. - Unlike ordinary Hooks, use() may appear in conditionals and loops, which helps select a context from runtime structure. - It still must run inside a component or Hook, and the component remains responsible for pure rendering. - I would not wrap a suspending use(Promise) call in try and catch because Suspense and Error Boundaries own that control flow.

A checkout form invokes a Server Action that receives price and userId from hidden fields; what must the action trust?

I would trust neither field and treat the Server Action as an internet-facing mutation endpoint. - The action must authenticate from the server session and authorize the cart rather than accept userId from FormData. - It must validate quantities and recalculate price from authoritative inventory data inside the mutation boundary. - It should return a serializable domain result and revalidate the affected cart or order cache only after a successful write. - Idempotency is required if retries could otherwise create two orders or two payment attempts.

A React 19 signup form needs field errors, the submitted email, and a pending state without three custom state variables; how would you structure useActionState?

I would make the action return one typed form result and let useActionState expose that result, its dispatch, and isPending. - The action receives the previous state before FormData, so its signature must account for the extra first argument. - Expected validation failures return field errors and safe submitted values, while unexpected failures go to the route's error handling. - The pending flag disables duplicate submission while keeping the form available for progressive enhancement when used with a server action.

A comment feed uses useOptimistic, and two submissions finish in reverse order with one rejected; how do you keep the UI correct?

I would give every optimistic comment a stable client ID and reconcile each one against its own server result. - The optimistic update function stays pure and appends a pending item without mutating the authoritative list. - A successful response replaces the matching client ID with the server record regardless of completion order. - A rejected response removes or marks only that item and exposes a retry, while the base state remains server-authoritative.

After enabling React Compiler, a team plans to delete every useMemo, useCallback, and React.memo; would you approve that change?

I would remove manual memoization only after compiler diagnostics, behavior tests, and profiler evidence show it is redundant. - The compiler can cache component work and values when it proves their dependencies under the Rules of React. - It does not stop renders caused by state or Context, remove expensive work that is genuinely required, or fix broad subscriptions. - Manual memoization may remain where the compiler cannot prove a safe cache or library integration requires stable identity, so I would review each site. - I would compare production-like commit times and interaction latency before and after the cleanup.

React Compiler skips a legacy chart component that mutates props and calls a Hook conditionally; how would you respond?

I would fix the Rules of React violations before trying to force the compiler to optimize the component. - Prop mutation breaks render purity and can make cached output incorrect, so the chart needs immutable inputs or a copied working model. - Conditional ordinary Hooks must be restructured into unconditional calls or separate components with stable control flow. - Compiler lint diagnostics identify the skipped scope, while a targeted 'use no memo' escape hatch can isolate code that cannot yet be made compatible. - After refactoring, I would profile the actual chart interaction because successful compilation is not itself a user outcome.

A Server Action updates a product title, but the RSC page and a prefetched client route keep showing the old value; what consistency work is missing?

The mutation needs an explicit cache invalidation contract and client reconciliation for every cache layer that can retain the product. - After the write, the action should invalidate the product's tag or path rather than flush unrelated catalog data. - The action result can update the current optimistic or action state immediately while revalidation returns authoritative server UI. - Prefetched router data may require a refresh or framework-specific invalidation path so navigation does not restore a stale payload. - I would test two tabs and back navigation because a correct database write does not guarantee a fresh interface.

React Developer interview questions

100 real questions with model answers and explanations for Senior candidates.

See a React Developer resume example →

Practice with flashcards

Spaced repetition · Hunter Pass

Questions

reactcomponents

I would remove the write from render because React may execute that phase repeatedly without committing it.

Render builds candidate Fiber work, must stay pure, and may be paused, restarted, or abandoned.
Commit applies DOM mutations, updates refs, and runs layout effects synchronously for the accepted tree.
Passive effects run after commit, so localStorage synchronization belongs in an event handler or in an effect that mirrors committed state.

Why interviewers ask this: The interviewer is testing whether the candidate can apply the render and commit model to an interruptible production-sized update.

gridresponsivereact

Fiber turns the component tree into resumable units of work so React can yield between units before commit.

Each Fiber links to child, sibling, and parent work and keeps an alternate for the current and work-in-progress trees.
React can stop low-priority reconciliation after the browser's time budget, process the click, and resume or rebuild stale work.
The final commit remains atomic, so users never see a half-updated grid even though preparation was split.

Why interviewers ask this: A strong answer connects Fiber's data structure to scheduling rather than calling it another virtual DOM.

react

React assigns updates to lanes that encode priority and lets urgent input work overtake transition work.

The controlled input receives a high-priority lane so its visible value can commit without waiting for the chart.
The chart refresh can occupy transition lanes, which React may merge, interrupt, or restart when fresher data arrives.
Entangled updates that must stay consistent can be processed together, while expired lanes are promoted to avoid starvation.

Why interviewers ask this: The interviewer is checking whether the candidate understands lanes as priority groups with consistency and starvation behavior.

componentsconcurrency

Concurrent rendering improves scheduling, but it does not make 120 ms of synchronous JavaScript execute faster.

React can yield between Fiber units, but it cannot interrupt one long calculation inside a component call.
I would profile the calculation, reduce its input, cache a proven repeated result, or move suitable CPU work to a Web Worker.
A transition can keep an older screen visible while new work is prepared, but total compute cost still has to be paid.

Why interviewers ask this: A strong answer separates responsiveness from throughput and identifies the boundary React cannot preempt.

I would update the input urgently and place only the expensive result-state update inside startTransition.

The text field must reflect each keystroke immediately, while React may interrupt obsolete list renders.
isPending can mark the existing results as updating instead of replacing useful content with a full-page spinner.
If filtering itself blocks for 80 ms before setState, I would also index the data, move computation to a worker, or query the server.

Why interviewers ask this: The interviewer evaluates whether the candidate uses transitions for priority while still addressing synchronous computation.

responsivedebounceapi

I would debounce the request and use deferred rendering only if displaying the returned results is itself expensive.

A 250 ms debounce suppresses obsolete network starts, which useDeferredValue does not do.
useDeferredValue lets the controlled input stay current while a memoized result subtree renders an older query at lower priority.
I would cancel or ignore stale responses by request identity so a slow old query cannot replace newer results.

Why interviewers ask this: A strong answer distinguishes traffic control, rendering priority, and response ordering as separate concerns.

react

I would stream the profile shell first and give recommendations and audit history independent nested boundaries.

One route-level boundary would hold all useful content behind the 2-second dependency.
Stable skeleton dimensions for each section prevent the progressive reveal from increasing CLS.
The data layer must integrate with Suspense through a framework cache or a resource that can suspend during render, not an effect fetch.

Why interviewers ask this: The interviewer is testing whether the candidate can turn dependency timing into concrete Suspense boundary placement.

componentsreact

I would put the request behind a cache keyed by resource identity rather than create a Promise during each component render.

Both siblings must read the same pending Promise so React can retry them when that shared work settles.
A render restart may call components again, so request creation inside render without caching duplicates I/O.
Rejection should reach an Error Boundary, while the Suspense fallback handles only the pending state.

Why interviewers ask this: A strong answer understands that Suspense coordinates pending work but does not provide request deduplication by itself.

reactindexesalgorithms

The index key made React preserve component state by position instead of by the row's domain identity.

After sorting, the Fiber at index 3 was reused for a different record, so its local draft followed the position.
A stable row ID lets React move the matching Fiber and preserve state for the correct record.
Random keys would avoid the stale draft only by remounting every row, losing focus and defeating reuse.

Why interviewers ask this: The interviewer checks whether the candidate can trace a visible correctness bug to reconciliation identity.

reactconcurrency

I would expose the store through useSyncExternalStore so React reads one consistent snapshot for a render.

getSnapshot must return the same reference until store data actually changes, otherwise React can enter a render loop.
subscribe must notify after mutations, and narrow immutable snapshots or selectors keep unrelated widgets from updating.
getServerSnapshot must reproduce the initial server value during hydration if the screen is server-rendered.

Why interviewers ask this: A strong answer links the external-store API to tearing prevention, subscription scope, and hydration.

reactpartitioningjavascript

I would keep product composition and data reads in Server Components and isolate the picker and buy action behind a small client boundary.

Server-only formatting and database access stay on the server, while only their rendered result contributes to the RSC payload.
The Client Component receives serializable product ID, price, and stock data, not server closures or database objects.
I would verify the change through client chunk size and hydration CPU on a mid-range mobile device.

Why interviewers ask this: The interviewer evaluates whether the candidate can translate an interactivity map into a measurable RSC boundary.

htmlreactcomponents

I would use RSC and SSR together because they solve different stages of the rendering pipeline.

RSC decides which components execute only on the server and produces a component payload that can reduce client JavaScript.
SSR turns the initial server and client component result into HTML for the first navigation.
Hydration still activates Client Components, while later navigations can fetch and merge new RSC payloads without full-page HTML.

Why interviewers ask this: A strong answer distinguishes the component execution model from the initial HTML delivery mechanism.

reactcomponentspromises

I would pass a stable Promise from the server or a cache and read it with use() under a nearby Suspense boundary.

While pending, use() suspends the component and React shows the boundary fallback until the Promise settles.
Creating a fresh Promise in every client render changes resource identity and can repeatedly suspend or trigger warnings.
Expected rejection needs an Error Boundary or a server result model because use() does not turn failures into ordinary values.

Why interviewers ask this: The interviewer checks whether the candidate understands Promise identity, suspension, and error handling around use().

reactcomponents

I can call use() conditionally after the early return to read the selected Context while preserving React's supported use() rules.

Unlike ordinary Hooks, use() may appear in conditionals and loops, which helps select a context from runtime structure.
It still must run inside a component or Hook, and the component remains responsible for pure rendering.
I would not wrap a suspending use(Promise) call in try and catch because Suspense and Error Boundaries own that control flow.

Why interviewers ask this: A strong answer knows the unusual placement rules of use() without treating it as unrestricted JavaScript.

forms

I would trust neither field and treat the Server Action as an internet-facing mutation endpoint.

The action must authenticate from the server session and authorize the cart rather than accept userId from FormData.
It must validate quantities and recalculate price from authoritative inventory data inside the mutation boundary.
It should return a serializable domain result and revalidate the affected cart or order cache only after a successful write.
Idempotency is required if retries could otherwise create two orders or two payment attempts.

Why interviewers ask this: The interviewer evaluates whether framework convenience changes none of the security and correctness requirements of an API.

reactforms

I would make the action return one typed form result and let useActionState expose that result, its dispatch, and isPending.

The action receives the previous state before FormData, so its signature must account for the extra first argument.
Expected validation failures return field errors and safe submitted values, while unexpected failures go to the route's error handling.
The pending flag disables duplicate submission while keeping the form available for progressive enhancement when used with a server action.

Why interviewers ask this: A strong answer covers the action signature, expected error model, and pending behavior rather than naming the hook.

I would give every optimistic comment a stable client ID and reconcile each one against its own server result.

The optimistic update function stays pure and appends a pending item without mutating the authoritative list.
A successful response replaces the matching client ID with the server record regardless of completion order.
A rejected response removes or marks only that item and exposes a retry, while the base state remains server-authoritative.

Why interviewers ask this: The interviewer checks whether the candidate can handle overlapping optimistic mutations without snapshot-wide rollback.

react

I would remove manual memoization only after compiler diagnostics, behavior tests, and profiler evidence show it is redundant.

The compiler can cache component work and values when it proves their dependencies under the Rules of React.
It does not stop renders caused by state or Context, remove expensive work that is genuinely required, or fix broad subscriptions.
Manual memoization may remain where the compiler cannot prove a safe cache or library integration requires stable identity, so I would review each site.
I would compare production-like commit times and interaction latency before and after the cleanup.

Why interviewers ask this: A strong answer treats the compiler as an optimizer with proof limits rather than a universal replacement for performance design.

reactcomponentshooks

I would fix the Rules of React violations before trying to force the compiler to optimize the component.

Prop mutation breaks render purity and can make cached output incorrect, so the chart needs immutable inputs or a copied working model.
Conditional ordinary Hooks must be restructured into unconditional calls or separate components with stable control flow.
Compiler lint diagnostics identify the skipped scope, while a targeted 'use no memo' escape hatch can isolate code that cannot yet be made compatible.
After refactoring, I would profile the actual chart interaction because successful compilation is not itself a user outcome.

Why interviewers ask this: The interviewer evaluates whether the candidate prioritizes correctness and uses compiler escape hatches narrowly.

consistency

The mutation needs an explicit cache invalidation contract and client reconciliation for every cache layer that can retain the product.

After the write, the action should invalidate the product's tag or path rather than flush unrelated catalog data.
The action result can update the current optimistic or action state immediately while revalidation returns authoritative server UI.
Prefetched router data may require a refresh or framework-specific invalidation path so navigation does not restore a stale payload.
I would test two tabs and back navigation because a correct database write does not guarantee a fresh interface.

Why interviewers ask this: A strong answer separates mutation success from RSC, data-cache, and client-router freshness.

Locked questions

21
A dashboard stores filters, modal visibility, account data, and query results in one global object; classify each before choosing libraries.
cssqueries
22
Twelve dashboard widgets read five REST endpoints with 30-second freshness; would you put responses in Context or TanStack Query?
restendpointsqueries
23
A TanStack Query cache returns the wrong customer's invoice after account switching; design the query key and invalidation boundary.
queriesdesigncaching
24
Two optimistic task-title edits overlap on one screen, and one mutation fails; how would you implement rollback with TanStack Query?
querieslockingrollback
25
A catalog with 2 million items must preserve filters, sort, and cursor pagination across reloads and shared links; where should that state live?
pagination
26
A Context provider exposes a 40-field object, and typing into one field rerenders 3,000 consumers; what redesign would you make?
27
A wizard spans six routes and must restore a draft after refresh, but each step has complex temporary validation state; how would you divide ownership?
ownershipvalidation
28
An RSC route fetches account data on the server, then a Client Component immediately fetches the same account into a global store; what would you change?
components
29
A client store keeps 100,000 entities and every update rebuilds all visible projections; how would you shape data and subscriptions?
30
A live dashboard receives 1,000 socket messages per second, but users only need ten visual updates per second; how would state flow into React?
react
31
Your RUM dashboard reports LCP 2.7 s, INP 180 ms, and CLS 0.08 at the 75th percentile; which Core Web Vital fails the good threshold?
percentiles
32
A mobile product page has LCP 4.1 s at p75, and the LCP element is a 1.8 MB hero image discovered after client rendering; what would you change first?
33
Search interactions have INP 420 ms at p75, with 260 ms spent in one JavaScript task and 90 ms in layout; how would you reduce it below 200 ms?
javascript
34
An ad slot loads after 1 second and pushes the article down, producing CLS 0.24 at p75; what design keeps CLS within 0.1?
design
35
A team added useMemo to 600 components and claims performance improved because render count fell 20 percent; what evidence would you require?
componentsperformance
36
React Profiler shows 2,500 rows rendering in a 70 ms commit when one checkbox changes; what sequence would you use to find the cause?
react
37
A 100,000-row grid must filter within 100 ms and scroll near 60 fps on a four-core mobile device; design the performance path.
griddesignperformance
38
A route's initial JavaScript grows from 220 KB to 410 KB gzip after adding a chart library, while only 8 percent of users open charts; what would you ship?
javascript
39
SSR returns HTML in 300 ms, but the page blocks the main thread for 1.5 seconds during hydration; what React changes would you test?
htmlreacthydration
40
A real-time chart rerenders at 60 Hz and consumes 45 ms per frame; how would you decide between React, canvas, and aggregation?
reactaggregation
41
Choose rendering modes for a product with 50 marketing pages, 200,000 catalog pages, and a personalized analytics app.
discovery
42
A personalized news homepage serves 1 million requests per day with a 500 ms TTFB budget; how would you keep SSR from hitting origin services on every request?
discoveryssr
43
A documentation site has 200,000 pages and a full SSG build takes 95 minutes; how would you preserve static delivery without that release delay?
documentation
44
A product catalog uses ISR with a 10-minute window, but price changes must appear within 30 seconds; redesign freshness for 5 million products.
45
A dashboard depends on APIs taking 150 ms, 700 ms, and 3 seconds; design streaming SSR so the page is useful within 1 second.
designstreamingssr
46
SSR renders a local timestamp, and 12 percent of sessions report hydration mismatch across regions; what deterministic design would you use?
hydrationssrdesign
47
Design the frontend of a B2B dashboard for 100,000 daily users, 12 backend services, p75 LCP under 2.5 s, and role-specific widgets.
design
48
Design search results for a 2-million-item marketplace with 20 filters, 300 ms API p95, SEO landing pages, and instant back navigation.
designapi
49
Design a global event page for 10 million visits in one hour, updates every 15 seconds, and a requirement to stay readable if JavaScript fails.
designjavascript
50
Design a React collaborative editor for documents up to 50,000 blocks, 100 concurrent editors, and a 100 ms local input target.
reactdesignconcurrency
51
7 percent of users submit the previous filter value after a feature-flag rollout, although the input looks current; how would you diagnose and fix the stale closure?
closures
52
Autosave loses the last two keystrokes for 6 percent of documents when a 2-second timer fires during fast typing; how would you isolate and correct the stale state?
53
A settings page starts 1,200 API requests per minute and reaches 90 percent CPU after a release; React Profiler shows an effect running on every render, so how would you stop the loop?
reactapi
54
Fourteen percent of autocomplete sessions show results for the previous query when a 900 ms response beats a newer 120 ms response; how would you fix the effect cleanup?
queriessessions
55
After 5 route changes, 1 dashboard tab holds 4 WebSocket connections and every alert appears 4 times; how would you find and fix the duplication?
alertingwebsockets
56
Four percent of checkouts show a shipping quote for the previous postal code because a Redux listener and TanStack Query both fetch and write the quote; how would you remove the divergence?
statequeries
57
Two quantity changes, 2 then 3, complete in reverse order and leave 1.5 percent of carts showing 2; how would you make the optimistic update race-safe?
locking
58
Nine percent of deleted projects reappear after Back navigation for up to 11 minutes because a persisted query cache restores them; how would you close the invalidation gap?
queriescaching
59
Five percent of live dashboards freeze at the first sample after a 30-second interval starts, while socket data continues arriving; how would you prove and fix the stale closure?
closures
60
Eight percent of filtered lists contain rows from two filters after users change a filter three times within 400 ms; how would you prevent the request race?
61
A SPA heap grows from 180 MB to 920 MB after 40 dashboard-detail navigations and the tab crashes; how would you use DevTools to find and fix the leak?
data-structures
62
Opening and closing a modal 20 times grows document click listeners from 1 to 41 and adds 150 MB to the heap; how would you correct it?
data-structures
63
A virtualized grid leaves 600 detached row nodes and 70 MB retained after resizing it 30 times; how would you diagnose the observer leak?
gridvirtualization
64
A checkout interaction rises from 6 to 28 renders and INP falls from 160 ms to 430 ms after a state-store refactor; how would you profile and fix it?
refactoring
65
A polling release puts Date.now() into the dashboard root key, so 4,000 descendants remount every 5 seconds and the next click blocks for 320 ms; how would you prove and fix it?
66
An 80-field checkout form validates the full schema 36 times per keypress and reaches 510 ms INP; how would you profile and reduce the work?
formsschemavalidation
67
A consented analytics script adds a 280 ms long task and worsens p75 INP by 190 ms on 35 percent of sessions; how would you isolate the cost?
sessions
68
An admin SPA grows from 75 MB to 650 MB after visiting 200 accounts because query data never leaves memory; how would you bound the cache?
cachingmemoryqueries
69
A chart starts remounting 60 times per second after its key is changed to the latest sample timestamp, each mount costs 38 ms, and scrolling falls to 22 fps; how would you fix it?
70
After 12 route visits, a page keeps 12 polling timers alive and background CPU reaches 45 percent; how would you verify and fix the cleanup?
71
8 percent of Next.js sessions report hydration mismatch because the server formats prices as en-US while the browser starts in ru-RU; how would you make rendering deterministic?
hydrationnextjssessions
72
Hydration fails in 1.6 percent of sessions but never in clean profiles, and affected DOM contains nodes injected by two browser extensions; how would you handle it?
domhydrationsessions
73
Thirteen percent of SSR forms lose label association because server and client generate different random IDs for 24 fields; how would you fix the mismatch?
ssr
74
A Suspense-loaded orders panel fails with 503 in 4 percent of visits and leaves users on a spinner with no retry; how would you design failure and reset behavior?
designresiliencereact
75
A dashboard has three Suspense resources at 120 ms, 700 ms, and 4 seconds, and the 4-second service returns 500 for 9 percent of users; how would you keep the page useful?
react
76
A malformed record crashes a results component for 2 percent of users and turns the whole route blank; how would you recover without masking the defect?
componentsdefects
77
An authenticated Suspense query returns 401 in 6 percent of sessions and retries three times, delaying login recovery by 5 seconds; what would you change?
reactqueriessessions
78
A streamed report stays on its Suspense fallback for more than 5 seconds in 7 percent of sessions because one data source hangs; how would you bound the wait?
reactsessions
79
Seventeen percent of users see a full skeleton flash for 600 ms whenever a populated search query refetches; how would you change the Suspense experience?
reactuxqueries
80
10 percent of SSR sessions mismatch because a component renders a desktop branch on the server and a mobile branch from window.innerWidth on the client; how would you fix it?
componentsssrsessions
81
Initial JavaScript grows from 260 KB to 610 KB and mobile LCP worsens by 1.7 seconds after adding an editor used by 12 percent of visitors; what would you ship?
javascript
82
A monorepo release adds 190 KB and causes invalid hook call errors in 2 percent of sessions because two React versions enter one route; how would you fix it?
reacthooksmonorepo
83
After a deploy, 3.2 percent of returning users get ChunkLoadError and a blank screen because cached HTML references removed assets; how would you recover and prevent it?
htmldeploymentcaching
84
A Module Federation remote deploy breaks the host for 6 percent of traffic with an undefined shared API, although both repositories pass tests; what would you change?
federationapideployment
85
A support SDK adds 240 KB to every route and worsens LCP by 1.2 seconds, although only 4 percent of users open chat; how would you reduce the cost?
86
A date-library upgrade adds 90 KB and slows LCP by 0.6 seconds because 80 locales are bundled for a two-locale product; how would you correct the build?
87
A 20-route migration from Pages Router to App Router raises route errors from 0.3 to 2 percent after the first five routes; how would you continue with rollback available?
migrationsrollback
88
A React 19 upgrade across 14 packages produces three runtime failures in staging despite passing TypeScript; how would you decide whether to release or roll back?
rollbackupgradesreact
89
Importing one CSS component library adds 300 KB and worsens route LCP by 0.8 seconds because its barrel loads every widget; what would you change?
csscomponents
90
After a deploy, 65 percent of frontend errors appear only as minified stack frames and blank-screen triage takes 90 minutes; how would you repair the release pipeline?
deploymentci-cd
91
A search test fails 7 times per 100 CI runs because it sleeps 500 ms for a debounced request; how would you remove the flake?
debounce
92
A modal refactor creates six critical axe violations and traps keyboard users in 18 percent of checkout sessions; how would you fix and prevent the regression?
refactoringsessions
93
A junior developer ships 2 stale-effect bugs across 3 pull requests despite repeated comments; what concrete mentoring intervention would you run over the next week?
mentoringcode-review
94
A 600-line pull request triggers 900 preview API calls per minute from one new effect; how would you review it without rewriting the feature yourself?
code-reviewapi
95
An Apollo cache key omits tenantId and exposes the previous tenant's customer name in 0.4 percent of account switches; how would you contain and prevent the incident?
incidentscaching
96
Migrating one Redux slice across 12 screens creates state divergence in 4 percent of sessions after six screens move; how would you finish or roll back safely?
statesessionsrollback
97
A malformed localStorage value causes a blank screen for 2.8 percent of returning users after a schema release; how would you restore access and prevent recurrence?
schema
98
A review removes visible focus styles from 14 shared buttons to match a mock, and preview axe reports no error; what decision would you make before merge?
mocking
99
Five engineers depend on one senior to debug every INP regression, and the last three incidents took 4 hours each; what concrete mentoring change would you make this month?
mentoringincidents
100
A React Native OTA release causes a 4 percent startup crash because JavaScript expects a native module absent from 30 percent of installed binaries; how would you recover and prevent it?
reactjavascript

Questions

1A 20,000-node React tree takes 40 ms to update, and a developer writes to localStorage during component execution; explain what can happen across render and commit.

2A product grid creates 30,000 elements, but a click in the header must remain responsive; how does Fiber make interruption possible?

3Typing in a filter and refreshing a chart arrive in the same 16 ms frame; how do React lanes determine which update proceeds first?

4A team enables concurrent rendering and expects a 120 ms calculation inside a component to become faster; what would you tell them?

5A search box filters 50,000 local rows and every keystroke blocks for 80 ms; where would you use startTransition?

6Autocomplete must limit API traffic to one request after 250 ms of idle time while keeping results rendering responsive; would you use useDeferredValue, debounce, or both?

7A route loads profile data in 100 ms, recommendations in 900 ms, and audit history in 2 seconds; place Suspense boundaries for a useful reveal sequence.

8Two sibling components request the same Suspense-enabled resource, and one render is restarted three times; what prevents four network calls?

9A sortable table uses array indexes as keys, and an edited row shows another row's draft after sorting; explain the reconciliation failure.

10An external trading store updates 500 times per second, and concurrent renders sometimes show different prices in one screen; what React contract should the store implement?

11A React 19 product page ships 700 KB of JavaScript, but only the quantity picker and buy button are interactive; how would you partition it with RSC?

12A candidate says React Server Components replace SSR; how would you correct that for a page that needs fast HTML and low client JavaScript?

13A Client Component receives a server-created Promise for a 600 ms request; how would you use React 19 use() without creating a request loop?

14A component must read one of two theme contexts after an early return; what can React 19 use() do that useContext cannot?

15A checkout form invokes a Server Action that receives price and userId from hidden fields; what must the action trust?

16A React 19 signup form needs field errors, the submitted email, and a pending state without three custom state variables; how would you structure useActionState?

17A comment feed uses useOptimistic, and two submissions finish in reverse order with one rejected; how do you keep the UI correct?

18After enabling React Compiler, a team plans to delete every useMemo, useCallback, and React.memo; would you approve that change?

19React Compiler skips a legacy chart component that mutates props and calls a Hook conditionally; how would you respond?

20A Server Action updates a product title, but the RSC page and a prefetched client route keep showing the old value; what consistency work is missing?

Locked questions