React Senior

React attaches a separate native listener to every element that has a handler set

React 17 removed event delegation entirely and now uses direct inline DOM handlers

React attaches listeners to the root container instead of document since React 17

React attaches listeners to window, and React 17 moved them down to document

Loops break hooks because each iteration creates a brand new component instance

React tracks hooks by call order, so conditional calls would misalign stored state

Hooks use unique internal keys, allowing them to be safely called conditionally

React tracks hooks by their variable names, so renaming a hook resets its state

Effects run before render commits; the array delays them until paint, and omitting an item makes the effect skip its cleanup phase entirely.

Effects capture variables from their render; adding them to the array re-runs with fresh values, while omitting one keeps stale values.

Effects clone state into refs; the array syncs those refs, and omitting an item causes React to throw a stale closure error at runtime.

Effects always read the latest variables; the array only controls re-render timing, and omitting an item simply runs the effect more often.

It moves all rendering to the server at build time, so client-side memoization hooks are fully removed.

It forces every component to memoize by default, which means useMemo and useCallback now throw errors.

It replaces the virtual DOM with a compiled reactive graph, so re-renders never happen at all during runtime.

It auto-memoizes components and values at build time, making most manual useMemo and useCallback unnecessary.

Consumers never re-render automatically, so frequently changing values silently fail to update the UI.

The provider re-renders alone while consumers stay memoized, causing stale values across the tree.

Only the nearest consumer re-renders, but updates propagate slowly because context batches them lazily.

Every consumer re-renders whenever the context value changes, even if it uses an unchanged part.

Wrap every component in React.memo by default, which guarantees no component ever re-renders twice.

Use the Profiler to spot components rendering without prop or state changes, then apply memoization.

Disable strict mode and reduce state updates, since most wasted renders come from double invocation.

Move all state into a single top-level store so child components no longer subscribe to any updates.

It disables hooks inside the wrapped component and breaks state across all renders

It permanently caches component output and prevents any future updates from rendering

Each memo adds prop-comparison and memory overhead that can exceed the re-render cost

It forces every child component to re-render whenever the parent's own state changes

useTransition marks a state update as non-urgent; useDeferredValue defers a value you don't control

useTransition debounces event handlers; useDeferredValue throttles expensive prop computations

useTransition runs updates in a worker thread; useDeferredValue memoizes derived values just once

useTransition delays rendering by a timeout; useDeferredValue caches the previous value forever

It wraps fetch calls in try/catch and shows error boundaries instead of any loading indicators now

It prefetches all data at build time so components render instantly without any loading state at all

It polls the server on an interval and re-renders automatically when fresh data arrives each time

It lets components suspend while data loads, with declarative fallback UI instead of manual spinners

React batches every update into a single synchronous pass that completes before any painting occurs

React can interrupt, pause, and resume rendering so urgent updates aren't blocked by heavy ones

React precompiles components into web workers so the main thread never executes any render logic

React renders multiple components in parallel threads to fully utilize all the available CPU cores

Transitions move expensive renders to a background thread, keeping the main thread entirely free

Transitions mark updates as non-urgent so urgent input stays responsive during heavy re-renders

Transitions defer all updates by a fixed delay so the browser can finish its painting first always

Transitions animate component mounting and unmounting to smooth out heavy layout shifts on screen

Both share logic by mutating props directly, slowing renders; Hooks reuse that logic by caching results across every component.

Both share logic through global stores, coupling features; Hooks reuse that logic by isolating each component into its own context.

Both share stateful logic by wrapping components, adding tree nesting; Hooks reuse that logic without changing the component tree.

Both share logic only across class components, blocking reuse; Hooks reuse that logic by converting classes into functions at runtime.

It customizes the ref handle a parent receives, exposing chosen methods

It forwards a ref through a component automatically to the nearest child element

It memoizes a ref so its identity stays stable across every single re-render

It synchronizes a ref's current value with component state on each render

It replaces the virtual DOM with direct, synchronous mutations to the real DOM

It batches every network request alongside renders to reduce overall update latency

It enables interruptible, incremental rendering instead of synchronous, uninterruptible work

It compiles components ahead of time into optimized, statically rendered HTML output

It defers all state updates until the browser is idle to keep the UI responsive

It caches state updates and replays them only when a component finally unmounts cleanly

It groups multiple state updates into one re-render, even inside promises and timeouts

It splits one large state update into several smaller renders to avoid blocking work

Both phases are interruptible, letting React pause and resume DOM updates freely at any point in time.

Both phases run synchronously, so neither one can be paused once a re-render has actually begun.

The Commit phase computes changes and is interruptible; the Render phase applies them to the DOM synchronously.

The Render phase computes changes and is interruptible; the Commit phase applies them to the DOM synchronously.

The Virtual DOM is React's in-memory diffing tree; the Shadow DOM is a browser encapsulation feature React skips.

The Shadow DOM is React's in-memory diffing tree; the Virtual DOM is a browser encapsulation feature React relies on.

Both are browser-native APIs for encapsulating styles, and React uses the Shadow DOM for component isolation.

Both are React abstractions where the Shadow DOM diffs nodes and the Virtual DOM scopes component styles.

React traverses to re-mount every node from scratch; on large trees this guarantees constant-time updates regardless of size.

React traverses to recompute CSS styles for each node; reconciliation cost depends solely on the stylesheet complexity.

React traverses to diff each node and find what changed; on large trees this reconciliation work can get expensive.

React traverses only changed nodes directly via the DOM; tree size therefore has no real impact on render performance.

Hydration sends HTML back to the server for diffing; mismatches arise from CSS errors, and selective hydration merges duplicate DOM nodes automatically.

Hydration attaches listeners to server HTML; mismatches arise when client output differs from markup, and selective hydration hydrates regions independently.

Hydration re-renders the whole page on the client; mismatches arise from slow networks, and selective hydration preloads all data before rendering begins.

Hydration converts HTML into a Virtual DOM copy; mismatches arise from missing keys, and selective hydration delays all events until fully loaded.

Server Components render only on the server with no client runtime, so they lack the hooks and interactivity that useState needs.

Server Components render on the client after fetching, so useState is blocked to prevent duplicate state across the network boundary.

Server Components run in a sandbox without imports, so useState fails because the state object cannot be serialized to JSON safely.

Server Components compile to static HTML at build time, so useState is unavailable because the build step has no event loop at all.

No; SSR keeps components server-only to shrink bundles, while RSC renders HTML once mainly to speed up the initial page load.

Yes; both render the entire app into static HTML at build time, eliminating the need for any client-side JavaScript runtime.

Yes; both stream components to the browser for hydration, differing only in which bundler configuration each one happens to require.

No; SSR renders components to HTML for initial load, while RSC keeps components server-only to shrink bundles and fetch data.

The server fully renders the HTML before sending, so the browser caches markup earlier, lowering TTFB across requests.

The server sends HTML in chunks as it renders, so the browser receives initial markup sooner, lowering TTFB.

The server compresses the complete HTML payload, so the browser parses markup faster, lowering TTFB on slow networks.

The client requests HTML in chunks on demand, so the server defers all rendering work, lowering TTFB after hydration.

It batches external store updates into a single state value that re-renders only when the component finally unmounts.

It lets components subscribe to an external store and read a consistent snapshot, avoiding tearing during concurrent rendering.

It caches external API responses automatically and revalidates them on a fixed interval to keep the data fresh.

It replaces useEffect for all side effects by deferring external reads until after the browser paints the screen.

It creates a mutable store and, unlike other hooks, can only be called inside Server Components.

It memoizes expensive values and, like other hooks, cannot be used within conditionals or loops.

It triggers side effects after render and, like other hooks, must be called only at the top level.

It reads a resource like a promise or context and, unlike other hooks, can be called conditionally.

It stores loading and success flags in context so that every component can share one consistent status.

It shows a temporary optimistic value during an async action and reverts automatically if the action fails.

It preloads the next expected server response and swaps it in before the user even triggers any action.

It debounces rapid state updates so the UI only re-renders once the async action has finally resolved.