React Expert

Moving state into a global store so it is accessible from any component in the tree.

Moving shared state to the closest common ancestor so sibling components stay in sync.

Moving state into a ref so updates no longer trigger unnecessary re-renders of parents.

Moving local state into a child component so the parent re-renders less frequently overall.

Passing props through many intermediate layers; solved only by adding Redux or another state library.

Re-rendering deep child trees too often; solved with useMemo and splitting into smaller components.

Passing props through many intermediate layers; solved with the Context API and component composition.

Mutating props inside children directly; solved by memoizing components with React.memo and useCallback.

Passing too many props to one component at once; it becomes a problem when render performance noticeably degrades

Passing props through many intermediate components that don't use them; it hurts maintainability at deep levels

Mutating props directly inside a child component; it becomes a problem once the parent re-renders and overwrites them

Reading props before they are defined on mount; it becomes a problem when undefined values break the first render

A ref stores a mutable value that persists without causing a re-render when changed.

A ref behaves like state but is reserved only for storing DOM node elements.

A ref triggers a synchronous re-render the moment its current value is updated.

A ref stores derived state that recomputes automatically whenever its dependencies change.

Controlled inputs cannot be validated live; uncontrolled inputs always re-render the whole form tree on input.

Controlled inputs are driven by React state; uncontrolled inputs keep value in the DOM, useful for file inputs.

Controlled inputs need no event handlers; uncontrolled inputs require an onChange on every keystroke typed.

Controlled inputs keep value in the DOM; uncontrolled inputs are driven by state, useful for live validation.

When you need asynchronous state updates that automatically batch network requests for you.

When state logic is complex with many sub-values or transitions, centralizing updates in one reducer.

When state must be shared globally across the entire app without passing any props at all.

When a component has only a single boolean value that toggles between two simple states.

React freezes all state objects; mutating directly throws a runtime error that stops the tree.

React compares references to detect changes; mutating directly skips re-renders and shows stale UI.

React deep-compares every object; mutating directly causes infinite re-render loops that crash the app.

React batches mutations automatically; mutating directly only delays the re-render until the next tick.

Pass the previous state as a second argument, which React merges with the new value automatically.

Pass an updater function receiving the previous state, ensuring correctness when updates are batched.

Pass a function returning a promise, ensuring updates resolve in order before the next render.

Pass the new value directly, which React always reads from the freshest state during batching.

It schedules the update for the next tick, so the current render completes with stale data.

It triggers an infinite loop of re-renders, and React throws a 'too many re-renders' error.

It silently ignores the update because state setters only work inside event handlers and effects.

It updates state once but skips the next render, leaving the component showing the old value.

Use state for data a component owns and changes over time; use props to pass that data down to children

Use state for data passed from parents and props for any data that a single component owns internally over time

Use props for data that changes often and state for static data, because props re-render faster than state ever can

Use state only for primitives and props only for objects, since props cannot hold mutable primitive values safely

A callback ref is a function React calls with the node on attach/detach; use it to run logic when the node changes

A callback ref stores its value on the .current key; use it to avoid re-renders when state changes

A callback ref only works on class components; use it when you cannot call the useRef hook safely

A callback ref returns a frozen node snapshot; use it whenever you need to read measurements that never update again

Data flows in both directions automatically between parent and child, which keeps every component perfectly in sync

Data is stored globally and read by any component, so flow direction never matters and updates stay fully predictable

Data flows up via props while children mutate parent state directly, which removes the need for explicit callbacks

Data flows down via props while changes flow up via callbacks, making state updates predictable and easy to trace

Fragments add a hidden wrapper node that browsers ignore, so flexbox can still target it without breaking the layout

Fragments move children into a portal outside the tree, which avoids extra nodes but detaches them from flex parents

Fragments render a lightweight span node instead of a div, which keeps the DOM smaller while still scoping flex rules

Fragments group children without adding a DOM node, so layouts like flexbox apply directly to the real elements

State and props are both read-only, but only state can be shared down the tree to multiple nested child components

Props are private and mutable within a component, while state is read-only and passed in from a parent component

State is private and mutable within a component, while props are read-only and passed in from a parent

State and props are both mutable, but only props trigger a re-render when their underlying values actually change

JSX compiles into HTML strings that React injects into the page directly

JSX is syntactic sugar compiled into React.createElement() calls returning objects

JSX is parsed natively by the browser into real DOM nodes during runtime

JSX is converted into template literals that React evaluates lazily later

Capitalization tells the bundler to tree-shake unused components during builds

Lowercase names are treated as DOM tags while capitalized names map to components

Capital letters are required by the JavaScript class syntax used to define them

Lowercase names cause naming collisions with built-in React reserved keywords

Function components cannot hold state, so they suit only presentational UI pieces

Class components are faster since they avoid recreating functions on every render

Class components support hooks too but require binding methods in the constructor

Function components use hooks for state and effects, making logic simpler to reuse

Using && with 0 renders true since the expression short-circuits to a boolean

Using && with 0 renders nothing since React always skips falsy values silently

Using && with 0 renders the 0 itself because it is falsy but still a value

Using && with 0 throws an error because numbers cannot be rendered as JSX nodes

The children prop is an array of sibling components rendered next to each other

The children prop holds references to child instances for direct method calls now

The content nested between a component's tags is passed as props.children to render

The children prop must be explicitly passed as an attribute named children always

A cross-browser wrapper over native events that normalizes behavior and enables consistent, efficient event handling

A separate event queue that replaces the DOM entirely so events never reach the underlying native browser elements

A logging layer that records every native event for debugging but otherwise behaves identically to raw browser events

A polyfill that adds new event types missing from older browsers while leaving existing native events fully untouched

Components are merged at build time into a single class, which reduces the runtime overhead of nested render trees

Components extend a shared base class to inherit behavior, which keeps reuse centralized and easier to reason about

Components are combined via props and children to reuse behavior, which is more flexible than class hierarchies

Components inherit state through context providers, which lets children override any parent method when it is needed

Components that re-render only when props or state change by shallow comparison

Components that avoid using state entirely and rely solely on context values

Components that automatically memoize all of their child components recursively

Components that never re-render after the first mount regardless of any change

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

No array runs once before mount; empty array runs after every render; populated array runs only when all values match.

No array runs only on unmount; empty array runs on every update; populated array runs once when any listed value resets.

No array runs after every paint; empty array runs twice on mount; populated array runs until its values stop changing.

No array runs after every render; empty array runs once after mount; populated array runs when listed values change.

They can call other hooks to encapsulate and reuse stateful logic, which ordinary helper functions are not allowed to do.

They isolate logic into separate files so the bundle splits cleanly, but they share the exact capabilities of helper functions.

They automatically re-render every consuming component on change, whereas helper functions must trigger updates manually via state.

They run faster than helpers because React memoizes them automatically and caches their return values between every render.

An async function blocks the main thread, but useEffect must run synchronously right after the browser paints the screen.

An async function loses access to props, but useEffect requires the callback to close over the latest state and prop values.

An async function cannot use await inside, but useEffect needs awaited calls to schedule the cleanup correctly.

An async function returns a Promise, but useEffect expects the return to be a cleanup function or undefined.

componentDidMount maps to useState, componentDidUpdate to useMemo, and unmount to useCallback cleanup.

componentDidMount, componentDidUpdate, and componentWillUnmount map to a single useEffect with a dependency array and cleanup.

componentDidUpdate maps to useLayoutEffect only, while mount and unmount logic must stay in a separate class wrapper.

render maps to useEffect, componentDidMount to useRef, and unmount to a cleanup passed into useState.

It batches pending state updates together; React runs it after every render but just before the browser paints the screen.

It tears down side effects like subscriptions; React runs it before the next effect run and when the component unmounts.

It resets the component's state to initial values; React runs it once immediately after the very first render completes.

It memoizes the effect's computed result for reuse; React runs it only when the dependency array values stay the same.

Call hooks only inside effects and handlers; React tracks each hook's state by the component's position within the tree.

Call hooks only at the top level and from React functions; React tracks each hook's state by its call order across renders.

Call hooks inside conditionals to skip unneeded ones; React tracks each hook's state by a unique key that you pass to it.

Call hooks in any order you prefer; React tracks each hook's state by the variable name you assign its returned value to.

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.

useMemo caches a computed value while useCallback caches a function; using them for cheap work adds overhead, not speed.

useMemo caches a function while useCallback caches a value; using them everywhere guarantees fewer renders and is always worth it.

useMemo caches API responses while useCallback caches handlers; using them on primitives stops React from re-rendering at all.

useMemo caches a component while useCallback caches its props; using them sparingly is risky because stale values leak into children.

They cache rendered HTML on the server so the client skips hydration entirely on the first load.

They precompile all components into one bundle so the browser parses everything faster during startup.

They run component code inside a web worker so the main thread stays free during initial render.

They split bundles so components load on demand, shrinking the initial download and reducing Time to Interactive.

React.memo caches event handlers between renders; useMemo caches the component's children element tree.

React.memo memoizes a value across renders; useMemo memoizes a component's output between mounts.

React.memo deep-compares state for updates; useMemo shallow-compares props to decide on re-rendering.

React.memo memoizes a whole component to skip re-renders; useMemo memoizes a computed value inside one.

React.memo re-renders on any prop change; shallow and deep comparisons both apply to hook dependencies.

React.memo performs a deep prop comparison by default; a shallow comparison only checks primitive props.

React.memo compares previous and next state deeply; shallow comparison is used only for context values.

React.memo skips re-renders via a shallow prop comparison; a deep comparison checks nested values too.

Profile with the React DevTools Profiler and browser performance tools to find slow or frequent renders.

Add console logs to every render and measure how long the browser tab takes to fully load once.

Increase the production bundle size limit until the warning disappears and the app stops re-rendering.

Count the number of components on screen, since render time grows directly with total component count.

It splits the dataset across web workers so each chunk renders on a separate background thread.

It preloads the entire dataset into memory so scrolling never triggers any additional network requests.

It compresses list items into a single canvas element, reducing the total number of React components.

It renders only the items currently visible in the viewport, avoiding DOM nodes for off-screen data.

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

Keys cache rendered items; random or index keys disable caching and force only full re-renders

Keys validate props; random or index keys skip validation and silently drop the invalid items

Keys identify items; random or index keys cause wrong reuse, state bugs, and slow updates

Keys sort list items; using an index sorts numerically while random values shuffle the order

It registers an event listener on the provider and re-renders the component only when its own props change.

It reads a context's current value and re-renders the component whenever the nearest provider's value changes.

It creates a new context object and re-renders every component in the tree whenever any piece of state updates.

It memoizes the provider's value and re-renders only the children that are wrapped in React.memo.

Use Context for widely-shared, stable data; overusing it re-renders all consumers on any change

Use Context only at the root level; overusing it duplicates state and desyncs the consumer values

Use Context for frequently changing data; overusing it caches values and prevents needed updates

Use Context for deeply nested local state; overusing it blocks parent components from re-rendering

Context only works for theming and locale, so a library is always required for any other shared state

Context is a complete state manager that fully replaces Redux, including middleware and devtools

Context stores global state in a single store and re-renders only the components that subscribe to it

Context shares data through the tree but doesn't manage or optimize state like a dedicated library

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

Components that catch render errors below them; only classes work since no Hook exists, and event handler and async errors slip through.

Components that catch errors at build time; only classes work since they predate Hooks, and errors in child lifecycle methods are missed entirely.

Components that catch every runtime error globally; only classes work since functions cannot hold state, and event handler errors are included.

Components that catch network and async errors; only classes work since Hooks cannot be conditional, and render-phase errors slip through entirely.

To render children on the server first so that hydration of nested overlays happens before the rest of the page tree.

To render children into a separate React root so that their state is fully isolated from the parent application tree.

To render children into a DOM node outside the parent, like a modal that must escape an overflow or z-index constraint.

To render children lazily into a hidden node so that expensive subtrees mount only when the parent becomes visible.

A component that renders another component lazily; Hooks now share logic by deferring all rendering until the data has resolved.

A function that takes a component and returns an enhanced one; Hooks now share logic without wrapper nesting or prop collisions.

A class that extends another component's behavior; Hooks now share logic by letting functions inherit from parent components directly.

A function that merges several components into one; Hooks now share logic by combining their render output into a single element.

A component takes a child component as a prop and clones it, injecting extra props before rendering it itself.

A component renders its props as plain markup automatically, so the caller never needs to define any markup.

A component takes a function prop and calls it with its internal state, letting the caller decide what to render.

A component exposes its state through context, letting any descendant read it without passing props down.

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 optimizes rendering performance by skipping unnecessary updates automatically at runtime

It highlights potential problems in development by double-invoking certain functions

It enforces stricter type checking on props and state throughout production builds

It prevents unsafe lifecycle methods from running by blocking them entirely in production

useEffect runs after paint, useLayoutEffect runs before it; flicker happens when the effect mutates visible layout.

useEffect runs on the server, useLayoutEffect runs on the client; flicker happens when the effect re-subscribes to a context value.

useEffect runs synchronously, useLayoutEffect runs asynchronously; flicker happens when the effect updates state on every render.

useEffect runs before paint, useLayoutEffect runs after it; flicker happens when the effect fetches data that delays the paint.

To surface slow renders and large bundles by re-running them and exposing components that take too long to mount twice.

To surface impure render logic and missing effect cleanup by re-running them and exposing code that isn't idempotent.

To surface hydration mismatches and key errors by re-running them and exposing markup that differs from the server output.

To surface stale closures and outdated props by re-running them and exposing values that were captured in an earlier render.

It generates stable unique IDs consistent across server and client renders

It produces a hashed ID derived from a component's current props and state

It creates a random ID each render to guarantee globally unique element keys

It returns an incrementing index used to track items inside a mapped list

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

The Virtual DOM is a faster browser-native DOM that renders elements directly without any diffing at all.

The Virtual DOM stores components on the server and syncs them down to the real DOM over the network.

The Virtual DOM is a lightweight in-memory tree; React diffs it to batch and minimize costly real DOM updates.

The real DOM is a lightweight copy that React updates first before flushing it into the Virtual DOM.

Any DOM event triggers it; parents always re-render every child without exceptions ever

State or prop changes trigger it; parents re-render children unless they're memoized

Only direct state changes trigger it; parents never force their children to re-render

Context changes alone trigger it; parents re-render children only when keys change

It re-renders the entire DOM tree from scratch whenever any single state value changes

It compares element types and keys, reusing nodes and updating only differences

It tracks every DOM node with unique IDs and queries the browser for changed elements

It compares text content of all nodes and rewrites any node whose text has changed

A compiled snapshot of HTML React ships to clients to skip rendering work entirely

An in-memory tree React diffs against the previous one to update the real DOM

A parallel DOM rendered off-screen that the browser swaps in after each render cycle

A browser cache of past DOM states React restores whenever a component fully unmounts

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.

It tells the bundler to ship the component's source to the browser and never execute it on the server at all.

It disables React hooks within the module so the component can run safely outside the server runtime entirely.

It marks a boundary so the module runs as a Client Component; it still renders on the server during SSR.

It forces the component to skip server-side rendering entirely and only hydrate after the page fully loads.

Fetching in Server Components caches results in localStorage, letting the client reuse them across page reloads.

Fetching on the server avoids client-side waterfalls and ships less JavaScript and data-fetching code to the browser.

Server Components automatically re-run useEffect on each request, so the data stays fresher than client fetching.

Client-side fetching is no longer supported in React 19, so Server Components are now the only way to load data.

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.

They convert every onSubmit handler into a Server Component so the form logic always runs on the server.

They replace forms with a global store that holds all input values and validates them before any submission.

They cache form input across navigations and resubmit it automatically whenever the network reconnects again.

They wrap async submissions in transitions, automatically managing pending, error, and optimistic state for you.

Refs are now banned in function components entirely, so all ref-related logic must move into class components.

ref can now be passed as a regular prop to function components, so forwardRef is no longer needed.

ref must be accessed through the new useImperativeHandle hook, which fully replaces forwardRef.

useRef now automatically forwards itself to child components, replacing the need for any wrapper function.

useActionState caches the action's result globally; useFormStatus subscribes any component to that cached result anywhere.

useActionState runs only on the server; useFormStatus runs only on the client to show submission progress bars.

useActionState manages an action's return value and pending state; useFormStatus reads the parent form's status from a child.

useActionState validates form fields on submit; useFormStatus resets the form once submission succeeds without errors.

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.