100% Free
🎯 3200+ Questions. One Goal: Your Success Sign In Sign Up

Salesforce Interview React Interview Questions

Curated Salesforce Interview-level React interview questions for developers targeting salesforce interview positions. 155 questions available.

Last updated:

React Interview Questions & Answers

Skip to Questions

Welcome to our comprehensive collection of React interview questions and answers. This page contains expertly curated interview questions covering all aspects of React, from fundamental concepts to advanced topics. Whether you're preparing for an entry-level position or a senior role, you'll find questions tailored to your experience level.

Our React interview questions are designed to help you:

  • Understand core concepts and best practices in React
  • Prepare for technical interviews at all experience levels
  • Master both theoretical knowledge and practical application
  • Build confidence for your next React interview

Each question includes detailed answers and explanations to help you understand not just what the answer is, but why it's correct. We cover topics ranging from basic React concepts to advanced scenarios that you might encounter in senior-level interviews.

Use the filters below to find questions by difficulty level (Entry, Junior, Mid, Senior, Expert) or focus specifically on code challenges. Each question is carefully crafted to reflect real-world interview scenarios you'll encounter at top tech companies, startups, and MNCs.

Questions

155 questions
Q1:

What problem does React solve compared to directly manipulating the DOM?

Entry

Answer

React uses a virtual DOM to batch updates and apply only necessary changes to the real DOM. This reduces reflow and repaint costs, making UI updates efficient and predictable.
Permalink
Q2:

What is JSX and why do we use it in React?

Entry

Answer

JSX is a JavaScript syntax extension that allows writing HTML-like code within JavaScript. It improves readability and compiles into React.createElement() calls during build.
Permalink
Q3:

Why must React components start with a capital letter?

Entry

Answer

React treats lowercase tags as built-in HTML elements. Uppercase names indicate custom components so React can instantiate them correctly.
Permalink
Q4:

What is the purpose of the createRoot API introduced in React 18?

Entry

Answer

createRoot enables concurrent rendering, allowing React to pause, resume, or interrupt rendering to improve UI responsiveness.
Permalink
Q5:

What is the difference between a Component and an Element in React?

Entry

Answer

A component is a function or class defining UI logic. An element is the object returned by that component describing what to render.
Permalink
Q6:

What is the use of React Fragment?

Entry

Answer

Fragments (<> ) let you return multiple elements without adding extra DOM nodes, keeping layouts cleaner.
Permalink
Q7:

Why do we use keys in lists?

Entry

Answer

Keys help React track which list items changed, were added, or removed, enabling efficient virtual DOM reconciliation.
Permalink
Q8:

What happens if we use the array index as a key?

Entry

Answer

Using array indexes can cause React to reuse incorrect DOM nodes, leading to bugs like wrong input values or lost component state during reorder.
Permalink
Q9:

What is the difference between props and state?

Entry

Answer

Props are read-only inputs passed from parent components, while state is internal mutable data managed by the component.
Permalink
Q10:

Can a component modify its own props?

Entry

Answer

No. Props are immutable and controlled by the parent. Changing them breaks unidirectional data flow.
Permalink
Q11:

What does useState() return?

Entry

Answer

useState returns an array with the current state value and a function to update that state.
Permalink
Q12:

Why doesn’t updating state directly trigger a re-render?

Entry

Answer

React re-renders only when the state updater function is called. Direct mutation does not notify React.
Permalink
Q13:

What is the purpose of useEffect?

Entry

Answer

useEffect runs side effects after rendering, such as API calls, subscriptions, timers, or DOM manipulation.
Permalink
Q14:

What happens if you forget dependencies in useEffect?

Entry

Answer

The effect runs after every render, potentially causing infinite loops or unnecessary API requests.
Permalink
Q15:

What is controlled vs uncontrolled component in forms?

Entry

Answer

Controlled components store form values in React state. Uncontrolled components store input values in the DOM and use refs to access them.
Permalink
Q16:

What is React Strict Mode and why is it useful?

Entry

Answer

Strict Mode highlights potential issues by intentionally double-running certain logic in development to detect unsafe patterns.
Permalink
Q17:

What is Concurrent Rendering in React 18?

Entry

Answer

Concurrent Rendering allows React to pause, resume, interrupt, and prioritize UI rendering tasks for better responsiveness.
Permalink
Q18:

What is useId introduced in React 18?

Entry

Answer

useId generates unique, stable IDs used for accessibility attributes and prevents hydration mismatches in SSR.
Permalink
Q19:

What is the difference between useEffect and useLayoutEffect?

Entry

Answer

useEffect runs after the browser paints. useLayoutEffect runs before paint and is used for layout measurements.
Permalink
Q20:

What are React Server Components?

Entry

Answer

Server Components run on the server, fetch data directly, and send lightweight results to the client, reducing bundle size and improving performance.
Permalink
Q21:

How does React reconcile two virtual DOM trees during re-rendering?

Junior

Answer

React uses its diffing algorithm to compare the previous and next virtual DOM nodes. It reuses elements with the same type and key while replacing mismatches, ensuring minimal DOM operations.
Permalink
Q22:

Why is the render process pure but the commit phase is not in React?

Junior

Answer

The render phase only calculates changes and contains no side effects, making it pure. The commit phase applies changes to the DOM, causing side effects and making it impure.
Permalink
Q23:

What problem do React Server Components solve?

Junior

Answer

They reduce client bundle size by performing data fetching and heavy computation on the server and sending lightweight serialized output to the client.
Permalink
Q24:

Why is data fetching in useEffect considered an anti-pattern in React 18+?

Junior

Answer

Fetching in useEffect runs after rendering, causing UI flicker. Modern React encourages server components or framework-level data loading.
Permalink
Q25:

What is the difference between batching in React 17 and React 18?

Junior

Answer

React 17 batched updates only inside React events. React 18 batches updates automatically in async operations like promises and timeouts.
Permalink
Q26:

Why does React warn when state is updated during rendering?

Junior

Answer

Updating state during render breaks render purity and creates infinite re-render loops.
Permalink
Q27:

What is the purpose of the useTransition hook?

Junior

Answer

useTransition marks certain state updates as non-urgent, keeping the UI responsive while React processes expensive updates in the background.
Permalink
Q28:

How does React decide which components to re-render?

Junior

Answer

React re-renders a component when its state or props change or when its parent re-renders. Siblings do not re-render unless their props change.
Permalink
Q29:

Why must React state remain immutable?

Junior

Answer

React detects state changes using reference equality. Mutating state directly keeps the same reference, preventing React from re-rendering.
Permalink
Q30:

What happens when state setters run inside loops outside event handlers?

Junior

Answer

It can trigger multiple renders or infinite loops because render must stay pure and deterministic.
Permalink
Q31:

What is the Render Prop pattern?

Junior

Answer

It is a technique where a component receives a function as a child to dynamically render UI, enabling reusable logic.
Permalink
Q32:

What problem does React Context solve?

Junior

Answer

Context avoids prop drilling by allowing components to access shared data without passing props through every level.
Permalink
Q33:

How does React Context differ from Redux?

Junior

Answer

Context provides simple global state but triggers broad re-renders. Redux offers structured state management, middleware, and optimized performance.
Permalink
Q34:

What does useReducer help solve?

Junior

Answer

useReducer manages complex state logic with multiple transitions or nested updates, offering a structured alternative to multiple useState hooks.
Permalink
Q35:

Why should objects or arrays not be placed directly in dependency arrays?

Junior

Answer

Objects and arrays create new references every render, causing effects to re-run unnecessarily.
Permalink
Q36:

What is memoization in React and when is React.memo useful?

Junior

Answer

React.memo caches rendered output and prevents re-renders when props have not changed, improving performance for stable components.
Permalink
Q37:

What is the difference between useMemo and useCallback?

Junior

Answer

useMemo memoizes computed values, while useCallback memoizes function references.
Permalink
Q38:

Why is lifting state up used in React?

Junior

Answer

Shared state must be managed in a common parent to keep child components synchronized.
Permalink
Q39:

What are controlled inputs and why can they hurt performance?

Junior

Answer

Controlled inputs update React state on each keystroke, causing re-renders that may slow down long forms.
Permalink
Q40:

What is Suspense and why was it introduced?

Junior

Answer

Suspense lets components wait for async resources with a fallback UI. It supports streaming and async rendering.
Permalink
Q41:

How does Suspense differ in data fetching vs code splitting?

Junior

Answer

For code splitting it waits for dynamic imports; for data fetching it waits for a Promise to resolve.
Permalink
Q42:

What is hydration in React?

Junior

Answer

Hydration attaches event listeners and React behavior to server-rendered HTML to make it interactive.
Permalink
Q43:

What is partial hydration?

Junior

Answer

Only selected components are hydrated, reducing JavaScript execution and improving performance.
Permalink
Q44:

How does React handle synthetic events?

Junior

Answer

React attaches a single root event listener and normalizes events across browsers for consistency and performance.
Permalink
Q45:

What is useDeferredValue used for?

Junior

Answer

It returns a deferred version of a rapidly changing value, allowing heavy UI updates to lag behind typing.
Permalink
Q46:

How does React 19 improve hydration?

Junior

Answer

React 19 supports partial hydration, reduces long tasks, and hydrates server components more efficiently.
Permalink
Q47:

What is useOptimistic in React 19?

Junior

Answer

useOptimistic enables optimistic UI updates before server confirmation, improving perceived performance.
Permalink
Q48:

What is the difference between the use hook and await in React 19?

Junior

Answer

The use hook unwraps promises directly during rendering and pauses rendering until resolved, working in server components.
Permalink
Q49:

Why shouldn’t data fetching occur in constructors or render methods?

Junior

Answer

Fetching causes side effects. Render and constructors must remain pure, so fetching should occur in effects or server loaders.
Permalink
Q50:

What is an error boundary?

Junior

Answer

An error boundary catches runtime errors in child components and displays a fallback UI instead of crashing the entire app.
Permalink
Q51:

Why shouldn’t you mutate refs?

Junior

Answer

Refs are not reactive. Mutating them will not trigger re-renders, so using them to drive UI updates is ineffective.
Permalink
Q52:

What does useImperativeHandle do?

Junior

Answer

It customizes the instance value exposed to parent components when using refs, often exposing methods like focus().
Permalink
Q53:

What are custom hooks and why are they important?

Junior

Answer

Custom hooks extract reusable logic from components, making code cleaner, modular, and easier to maintain.
Permalink
Q54:

Why is having too many states in a component problematic?

Junior

Answer

Too many states cause unnecessary re-renders, tightly coupled logic, and reduced component reusability.
Permalink
Q55:

Why do React 18+ and React 19 emphasize asynchronous rendering?

Junior

Answer

Async rendering prevents UI blocking during heavy updates, improving responsiveness and reducing jank.
Permalink
Q56:

How does React’s fiber architecture improve rendering compared to the old stack reconciler?

Mid

Answer

Fiber breaks rendering into small interruptible units, allowing React to pause, resume, or restart work. This prevents UI blocking, enables concurrency, and improves responsiveness during heavy updates.
Permalink
Q57:

What causes a component to re-render even if its props haven’t changed?

Mid

Answer

Re-renders occur when its parent re-renders, context value changes, state updates happen, dependencies trigger effects, or Strict Mode double-invokes renders in development.
Permalink
Q58:

Why should state updates depending on previous state use a callback function?

Mid

Answer

State updates are asynchronous and batched. Using callbacks like setCount(prev => prev + 1) ensures correct and predictable updates.
Permalink
Q59:

How does React detect whether to reuse a DOM node or replace it?

Mid

Answer

React compares element type and key. If both match, React reuses the existing DOM node; otherwise, it unmounts and creates a new one.
Permalink
Q60:

Why do deeply nested state updates require immutable patterns?

Mid

Answer

React relies on reference comparison. Mutating nested objects keeps the same reference, preventing re-rendering. Spreads or immutable helpers create new references.
Permalink
Q61:

What are layout shifts and how can React cause them?

Mid

Answer

Layout shifts occur when UI elements move unexpectedly. React may cause them due to conditional rendering inserts, async content changing structure, or Suspense fallbacks.
Permalink
Q62:

Why can large Contexts cause performance issues?

Mid

Answer

When context value changes, all consuming components re-render, even those not using the changed fields, causing unnecessary work.
Permalink
Q63:

How can unnecessary re-renders be prevented when using Context?

Mid

Answer

Split context into smaller contexts, memoize provider values, use useMemo/useCallback, or use selector-based libraries like Zustand or Jotai.
Permalink
Q64:

What is lazy initialization of state in useState?

Mid

Answer

useState(() => ...) runs the initializer only once during the first render, avoiding repeated expensive computations on every render.
Permalink
Q65:

When does React re-run useMemo?

Mid

Answer

useMemo runs again only when its dependencies change. If dependencies include unstable references, memoization becomes ineffective.
Permalink
Q66:

Why can memoized components still re-render?

Mid

Answer

Reasons include parent re-renders, non-stable prop references, context changes, or Strict Mode development re-renders.
Permalink
Q67:

When should useCallback be preferred over inline functions?

Mid

Answer

Use useCallback when passing functions to memoized children or using them in dependency arrays. Otherwise, it adds unnecessary overhead.
Permalink
Q68:

What is the purpose of startTransition?

Mid

Answer

startTransition marks updates as non-urgent so urgent updates like typing render first, keeping UI responsive under heavy workloads.
Permalink
Q69:

Why might React skip a render even after a state update?

Mid

Answer

React skips renders when the new state value is strictly equal to the previous state, avoiding unnecessary updates.
Permalink
Q70:

How does React decide hydration priorities in React 18+?

Mid

Answer

React performs selective hydration, prioritizing interactive components, visible elements, and network-ready content.
Permalink
Q71:

What is the difference between Streaming SSR and Traditional SSR?

Mid

Answer

Traditional SSR sends HTML only after full rendering. Streaming SSR streams chunks as they are ready, improving first paint and user experience.
Permalink
Q72:

How do server actions in React 19 differ from traditional API calls?

Mid

Answer

Server actions allow calling server-side functions directly from components without creating API endpoints, reducing boilerplate and enhancing security.
Permalink
Q73:

Why can server components not use browser APIs like window or document?

Mid

Answer

Server components run on the server where browser globals do not exist, making window or document unavailable.
Permalink
Q74:

What is the waterfall problem in SSR and how does Suspense fix it?

Mid

Answer

Waterfall fetching forces sequential loading. Suspense enables parallel data loading and rendering, eliminating delays.
Permalink
Q75:

Why must keys be stable and unique in React lists?

Mid

Answer

Keys help React correctly match elements during reconciliation. Unstable keys cause incorrect state retention or DOM mismatches.
Permalink
Q76:

What is tearing in concurrent React?

Mid

Answer

Tearing occurs when parts of the UI read different versions of state during async rendering. React 18 fixes this using consistent rendering and batching.
Permalink
Q77:

Why do duplicated DOM nodes appear in lists during fast operations?

Mid

Answer

This happens due to unstable or incorrect keys, causing React to reuse DOM nodes incorrectly during rapid updates.
Permalink
Q78:

How does React ensure hooks run in the same order each render?

Mid

Answer

Hooks must be called at the top level and not inside conditions or loops, allowing React to map hook states consistently.
Permalink
Q79:

Why is returning different numbers of elements across renders problematic?

Mid

Answer

Inconsistent output causes layout shifts, hydration mismatches, and unstable UI trees during re-renders.
Permalink
Q80:

What happens when two state updates occur in one event handler?

Mid

Answer

React batches them into a single render for better performance.
Permalink
Q81:

Why avoid defining styled-components or CSS-in-JS inside components?

Mid

Answer

It recreates component definitions on every render, hurting memoization and performance.
Permalink
Q82:

How does React maintain UI consistency during async rendering?

Mid

Answer

React builds a new UI tree in memory (double buffering) and commits only complete updates, ensuring consistent UI state.
Permalink
Q83:

Why is reading DOM values inside render dangerous?

Mid

Answer

Render must stay pure. Reading DOM causes side effects and inconsistent behavior due to multiple render passes.
Permalink
Q84:

What is the purpose of useSyncExternalStore?

Mid

Answer

It ensures consistent subscriptions to external stores like Redux or Zustand during concurrent rendering, preventing tearing.
Permalink
Q85:

Why memoize only expensive computations and not trivial ones?

Mid

Answer

Memoization has overhead. Overusing it slows performance, so only expensive repeated computations should be memoized.
Permalink
Q86:

How does React Fiber schedule work using lanes, and how does it prioritize rendering tasks?

Senior

Answer

React assigns each update to a lane based on priority. High-priority lanes like user input render first, while lower-priority lanes such as background transitions are deferred or interrupted, enabling concurrent rendering.
Permalink
Q87:

What is the difference between Scheduler and Reconciler in React’s architecture?

Senior

Answer

Scheduler decides when work should run using priorities and interruption. Reconciler decides what to render by diffing and producing the fiber tree. Both combine to enable concurrency.
Permalink
Q88:

Why is React’s render phase interruptible but the commit phase is not?

Senior

Answer

Render is pure so it can be paused and resumed safely. Commit mutates the DOM and must run atomically to avoid inconsistent UI.
Permalink
Q89:

How do Suspense boundaries affect the rendering waterfall in SSR?

Senior

Answer

Suspense allows independently fetching components to resolve in parallel. SSR streams chunks as they are ready, removing sequential waterfalls.
Permalink
Q90:

Why is mixing Server Components and Client Components beneficial in large apps?

Senior

Answer

Server Components reduce bundle size and handle data fetching. Client Components manage interactivity. The hybrid model improves performance and developer experience.
Permalink
Q91:

Why are Client Components not allowed to import Server Components?

Senior

Answer

Client bundles run in the browser; server-only code cannot be bundled and would cause unresolved modules and hydration failures.
Permalink
Q92:

What is the biggest challenge when migrating a large SPA to Server Components?

Senior

Answer

The hardest part is deciding boundary placement between server and client components without breaking interactivity, caching, or consistency.
Permalink
Q93:

How does React avoid tearing with external stores in concurrent mode?

Senior

Answer

React uses useSyncExternalStore to ensure all components read the same snapshot during render, preventing tearing during concurrent rendering.
Permalink
Q94:

When is it better to replace Context with an event-driven state store?

Senior

Answer

Use Redux, Zustand, or Jotai when the app needs fine-grained re-render control, middleware, or cross-app communication. Context causes broad re-renders.
Permalink
Q95:

How do you prevent stale closures in hooks?

Senior

Answer

Use functional updates, stable references with useRef, and memoized callbacks via useCallback.
Permalink
Q96:

Why does React discourage heavy logic inside the render function?

Senior

Answer

Render may run multiple times. Heavy logic causes jank, blocks concurrency, and slows transitions.
Permalink
Q97:

How do you debug hydration mismatches in server-rendered apps?

Senior

Answer

Check non-deterministic code like random values, time-based content, missing useId, and async data mismatches.
Permalink
Q98:

Why does React 19 introduce the use hook and how does it affect data fetching?

Senior

Answer

use unwraps promises directly inside components, eliminating useEffect + state boilerplate and improving SSR/RSC data workflows.
Permalink
Q99:

When should you use startTransition vs useDeferredValue?

Senior

Answer

startTransition marks state updates as low-priority. useDeferredValue delays updating a derived value. Both prevent blocking urgent UI work.
Permalink
Q100:

What is the purpose of the offscreen component in React?

Senior

Answer

Offscreen allows React to render components in the background and preserve state, enabling instant reveal without cost.
Permalink
Q101:

Why does React advise splitting components by responsibility rather than file size?

Senior

Answer

Too many responsibilities cause unpredictable re-renders, poor testability, and tight coupling. File size is not the real issue.
Permalink
Q102:

What is the risk of using derived state incorrectly?

Senior

Answer

Duplicated state leads to UI drift and inconsistency. Derived state should be computed on render, not stored.
Permalink
Q103:

What causes React memory leaks in async operations?

Senior

Answer

Async tasks may update unmounted components. Use AbortController, cleanup functions, or transitions.
Permalink
Q104:

What is a hydration boundary and why is it important?

Senior

Answer

Hydration boundaries create isolated hydration zones, enabling selective hydration and reducing blocking time.
Permalink
Q105:

Why is tree-shaking more effective in Server Components?

Senior

Answer

RSC code never reaches the client; unused code stays on the server, making tree-shaking automatic.
Permalink
Q106:

Why does React encourage referential stability for props to memoized children?

Senior

Answer

Unstable references break shallow comparison and force unnecessary re-renders. useCallback and useMemo ensure stability.
Permalink
Q107:

How does React determine when to flush pending updates?

Senior

Answer

React flushes updates based on event boundaries, transitions, microtasks, and scheduler priorities.
Permalink
Q108:

Why do Suspense boundaries improve user-perceived performance even without SSR?

Senior

Answer

They show fallbacks early, preventing blank screens and minimizing layout shifts during async loading.
Permalink
Q109:

What are islands of interactivity and how does React support them?

Senior

Answer

Islands hydrate only interactive parts of the page. React frameworks implement selective hydration for these components.
Permalink
Q110:

Why does local state for global concerns not scale?

Senior

Answer

Local state becomes duplicated and inconsistent across the app, requiring stores or context for synchronization.
Permalink
Q111:

How does React prevent infinite loops when setters appear in useEffect deps?

Senior

Answer

State setters are stable references, so including them in dependency arrays does not trigger loops.
Permalink
Q112:

Why must reducers used with useReducer be pure?

Senior

Answer

Impure reducers cause unpredictable state and break React’s deterministic rendering model.
Permalink
Q113:

Why are mutations inside Context values harmful?

Senior

Answer

Mutating context values bypasses reference changes, causing silent inconsistencies and unnecessary re-renders.
Permalink
Q114:

What is the biggest bottleneck for large grids or lists?

Senior

Answer

Re-rendering large DOM sections. Solution: virtualization such as react-window or react-virtual.
Permalink
Q115:

Why is hydration expensive for large SPAs?

Senior

Answer

Browser must attach listeners, validate markup, and resolve mismatches on the main thread.
Permalink
Q116:

How does React guarantee atomic state updates in concurrent mode?

Senior

Answer

React maintains current and work-in-progress trees. Commit replaces a whole subtree at once, ensuring atomicity.
Permalink
Q117:

Why can overusing React.memo degrade performance?

Senior

Answer

Memo adds comparison overhead. Often re-rendering is cheaper than shallow comparisons.
Permalink
Q118:

How do you prevent race conditions in concurrent data fetching?

Senior

Answer

Use request versioning, AbortController, transitions, or server components to prevent out-of-order updates.
Permalink
Q119:

Why does React 19 recommend using actions instead of client API calls?

Senior

Answer

Actions execute server code directly, simplifying mutations, validation, error handling, and revalidation.
Permalink
Q120:

How does React avoid inconsistent UI when multiple updates are queued?

Senior

Answer

React processes updates in an ordered queue using lane priorities to maintain determinism.
Permalink
Q121:

Why are heavy animations better with requestAnimationFrame than React state?

Senior

Answer

React state does not synchronize with 60fps rendering. rAF ensures frame-perfect updates.
Permalink
Q122:

What causes zombie child components in concurrent React?

Senior

Answer

Outdated render passes create zombie children. React discards stale work to avoid committing them.
Permalink
Q123:

When does React abort an entire render?

Senior

Answer

React aborts when higher-priority updates arrive or required data changes mid-render.
Permalink
Q124:

How does React enable background data loading without blocking UI?

Senior

Answer

Using Suspense, Streaming SSR, Offscreen rendering, and Server Components to load data in parallel.
Permalink
Q125:

Why is Render-as-You-Fetch superior to Fetch-Then-Render?

Senior

Answer

It begins rendering while data loads, eliminating idle time and improving performance with Suspense and RSC.
Permalink
Q126:

How does React Fiber implement cooperative scheduling using the call stack without blocking the main thread?

Expert

Answer

Fiber creates a linked list tree where each unit of work is a fiber node. Instead of recursively calling functions, React manually iterates the tree, yielding control back to the browser using shouldYield so higher-priority events can run, enabling cooperative multitasking.
Permalink
Q127:

Why does React split rendering into begin work and complete work phases inside the reconciler?

Expert

Answer

beginWork calculates changes and creates or updates child fibers, while completeWork builds DOM nodes or side-effect lists. This separation allows React to pause between units of work for better concurrency.
Permalink
Q128:

How does React handle priority inversion when low-priority tasks block high-priority UI updates?

Expert

Answer

React uses lanes and entanglement mapping so high-priority lanes interrupt low-priority work. React reuses partial work and discards stale renders to maintain responsiveness.
Permalink
Q129:

How does React store and compare alternate trees to guarantee atomic commits?

Expert

Answer

Each component has a current fiber and a work-in-progress fiber. During commit, React swaps pointers atomically to avoid partial UI updates.
Permalink
Q130:

How does React’s diffing algorithm optimize keyed vs non-keyed lists internally?

Expert

Answer

Keyed diffing builds a keyed map to detect moves, deletions, and insertions. Non-keyed diffing assumes positional alignment, which is faster but incorrect for reordering.
Permalink
Q131:

How does React optimize Suspense boundaries through early reveal and delayed placeholder strategies?

Expert

Answer

React reveals resolved subtrees early and delays fallback rendering to avoid flicker using revealTimers and cache heuristics.
Permalink
Q132:

Why are Promise boundaries essential in the React 19 use hook implementation?

Expert

Answer

The use hook integrates directly into the fiber loop. When a promise is encountered, React suspends the fiber, stores continuation, and retries when resolved—similar to coroutines.
Permalink
Q133:

How does React ensure that streamed SSR content from the server matches hydration order on the client?

Expert

Answer

React tags streamed chunks with react-id markers and uses a hydration priority queue to hydrate components in the correct order.
Permalink
Q134:

Why is Suspense fundamentally incompatible with synchronous rendering models?

Expert

Answer

Suspense requires pausing and resuming rendering. Synchronous models cannot interrupt execution, making Suspense impossible without async fiber architecture.
Permalink
Q135:

How does React avoid memory explosion when many suspended components are waiting for promises?

Expert

Answer

React uses ref-counted wakeable objects and deduplicates promise listeners to prevent memory overhead.
Permalink
Q136:

Explain how React reconciler uses bailing out to skip unnecessary subtrees during rendering.

Expert

Answer

React skips reconciliation when props, state, and context are unchanged via shallow comparison, reusing the previous fiber subtree.
Permalink
Q137:

How does React optimize large forms where controlled inputs cause heavy re-renders?

Expert

Answer

React uses batched updates, event priority, offscreen rendering, browser input buffering, or hybrid refs for better performance.
Permalink
Q138:

Why is the React Server Components architecture inherently more cacheable than client-rendered components?

Expert

Answer

RSC output is serializable and dependency-tracked, enabling fine-grained caching at the module or function level.
Permalink
Q139:

How does React prevent stale hydration attachments when HTML streaming arrives out of order?

Expert

Answer

React buffers out-of-order chunks and only hydrates them when boundary segments are complete.
Permalink
Q140:

What is the progressive selective hydration algorithm introduced in React 18?

Expert

Answer

React hydrates based on interaction priority, visibility, and lane scheduling to reduce blocking time.
Permalink
Q141:

Why can React’s lane model guarantee deterministic rendering even under concurrency?

Expert

Answer

Lane priorities, expiration times, and entanglement rules ensure predictable update ordering.
Permalink
Q142:

Why can mixing Context Providers deeply inside rendering loops cause reconciler thrashing?

Expert

Answer

Each Provider update invalidates all consumers; inside loops, this causes exponential rerenders.
Permalink
Q143:

How does React 19 handle action revalidation to avoid inconsistent states across the app?

Expert

Answer

React invalidates cached RSC trees referencing stale data and regenerates affected segments using dependency graph invalidation.
Permalink
Q144:

Explain the internals of useSyncExternalStore and how it guarantees tear-free reads.

Expert

Answer

React ensures atomic snapshot reads and compares server/client snapshots, preventing tearing during concurrent renders.
Permalink
Q145:

How does React dedupe heavy selectors inside Context and Redux with concurrent rendering?

Expert

Answer

React caches derived values via memoized selectors and fine-grained subscriptions.
Permalink
Q146:

What happens when a Server Component imports a Client Component that imports another Server Component?

Expert

Answer

React fails the build. Server Components cannot appear under Client boundaries.
Permalink
Q147:

How does React resolve cyclic dependency chains in async Suspense trees?

Expert

Answer

React tracks pending wakeables and detects repeated suspension cycles, surfacing errors to boundaries.
Permalink
Q148:

How does the fiber system reuse DOM nodes while swapping fiber trees?

Expert

Answer

DOM nodes attach to the hostFiber. During commit, React updates props/events without destroying nodes.
Permalink
Q149:

What is the transition tree and how does React use it during low-priority renders?

Expert

Answer

React marks updates inside startTransition as belonging to a separate transition tree that can pause, resume, or discard work.
Permalink
Q150:

How does React implement high-priority interruptions during slow list diffing operations?

Expert

Answer

React checks scheduler signals; shouldYield() pauses reconciliation to let high-priority tasks run.
Permalink
Q151:

What are hydration bubbles and how does React use them to allow partial interactive UI?

Expert

Answer

Hydration bubbles hydrate children first, then expand upward, enabling selective interactivity.
Permalink
Q152:

How does React’s event system maintain compatibility with concurrent rendering?

Expert

Answer

React replays events fired before hydration finishes, ensuring consistent event processing.
Permalink
Q153:

Why does React avoid triggering layout thrashing even with layout effects?

Expert

Answer

React batches DOM reads/writes into phases to avoid bouncing layout calculations.
Permalink
Q154:

How does React determine when an effect cleanup should run during concurrent re-renders?

Expert

Answer

React only cleans up effects from committed renders; work-in-progress renders are discarded without cleanup.
Permalink
Q155:

How does the React compiler React Forget optimize component re-renders automatically?

Expert

Answer

React Forget auto-generates memoization logic, stabilizing references and eliminating the need for manual useMemo/useCallback.
Permalink

Curated Sets for React

No curated sets yet. Group questions into collections from the admin panel to feature them here.

People Also Ask - Related React Questions

What problem does React solve compared to directly manipulating the DOM?
What is JSX and why do we use it in React?
Why must React components start with a capital letter?
What is the purpose of the createRoot API introduced in React 18?
What is the difference between a Component and an Element in React?
What is the use of React Fragment?
Ready to level up? Start Practice