React 19+ interview questions and answers

Actions: async functions in transitions that manage pending state, errors and optimistic updates, with useActionState, useFormStatus and useOptimistic, and <form action={fn}>. The use() API reads promises and context during render. Server Components and Server Actions are stable. ref is a normal prop for function components, <Context> works as a provider, document metadata tags can be rendered anywhere, and stylesheet and script loading are integrated with Suspense.

On each render React builds a new element tree and diffs it with the previous one. Elements of the same type at the same position are updated in place; a different type remounts the subtree. In lists, key tells React which item is which, so it can move, add or remove items correctly. Index keys break when items are reordered or inserted: state and DOM get attached to the wrong item.

useEffect runs after the commit to synchronise with something outside React: subscriptions, timers, network requests, DOM APIs. The dependency array lists the reactive values it uses; it re-runs when they change. The returned cleanup runs before the next run and on unmount. In development Strict Mode runs effects twice to expose missing cleanup. Do not use effects for derived data or event-driven logic.

The React Compiler is a build-time tool that automatically memoises components and values based on their dependencies, so you rarely need useMemo, useCallback or memo by hand. It assumes your code follows the Rules of React (pure render, no mutation of props or state). Next.js 16 and Vite can enable it in config.

React builds a tree of elements describing the UI, compares it with the previous one, and applies the minimal changes to the real DOM. The point is a declarative model (describe the UI for the current state) with efficient updates, not that it is always faster than hand-written DOM code.

Since React 18, updates inside event handlers, promises, timeouts and native events are batched automatically, so several setState calls cause one re-render. flushSync forces an immediate update when you truly need the DOM updated synchronously.

Call hooks only at the top level of components or custom hooks, never in conditions, loops or after early returns. React identifies each hook by call order, so changing the order between renders would mix up their state.

When two components need the same changing data, move it to their closest common parent and pass it down with props and callbacks. This keeps a single source of truth. If many distant components need it, consider context or a store instead.

useActionState(action, initial) wraps an action and gives you its latest returned state and a pending flag. useOptimistic(state, update) shows a temporary value immediately while the action runs, then React swaps in the real state when it finishes, or reverts if it fails. Together they make forms feel instant.

use(promise) suspends the component until the promise resolves and returns its value, and use(context) reads context. Unlike hooks, use can be called inside conditions and loops. Promises should come from a cache or be created by a Server Component and passed down, not created on every render.

They run only on the server, so they can read data directly, keep secrets private, and send zero JavaScript for their own code. Large libraries used only for rendering stay off the client. They compose with Client Components for interactivity, cutting bundle size and request waterfalls.

Keep state as close as possible to where it is used. Lift it to the nearest common parent when siblings need it. Use context for values many components read but rarely change, such as theme or the current user. Use an external store (Zustand, Redux Toolkit) for complex, frequently updated shared client state, and a server-cache library (TanStack Query) for server data.

A transition marks an update as non-urgent. React keeps the UI responsive to urgent input (typing) while it renders the transition in the background, and can interrupt it. useTransition returns isPending and startTransition; in React 19 the function can be async, which is the basis of Actions.

Context passes values through the tree without props. Every consumer re-renders when the provider value changes, so passing a new object each render or putting fast-changing data in a broad context causes many re-renders. Split contexts, memoise values, or use a store with selectors.

A function starting with use that calls other hooks to package reusable logic, such as useDebounce or useOnlineStatus. Each component using it gets its own state; custom hooks share logic, not state.

For deriving data from props or state (compute it during render), for handling user events (do it in the handler), or for resetting state when a prop changes (use a key). Effects are for synchronising with external systems such as subscriptions, timers or the DOM.

A <Suspense fallback> shows its fallback while a child is waiting for data or code (lazy components, use(promise), framework data). Nested boundaries let parts of the page appear independently, and transitions keep current content visible instead of falling back again.

useRef holds a mutable value that persists across renders without causing re-renders. Use it for DOM nodes (focus, measure, scroll), timers or previous values. In React 19, refs can be passed as props and ref callbacks can return cleanup functions.

Splitting the bundle so code loads only when needed: const Chart = lazy(() => import('./Chart')) inside a <Suspense> boundary. Split by route and by heavy, rarely used components.

A controlled input gets its value from state and reports changes through onChange, so React is the source of truth. An uncontrolled input keeps its own value in the DOM, read with a ref or from FormData on submit. React 19 form actions make uncontrolled forms with FormData very convenient.

A class component with getDerivedStateFromError or componentDidCatch catches errors thrown while rendering its children and shows a fallback. They do not catch errors in event handlers or async code. Frameworks such as Next.js provide them through error.tsx, and react-error-boundary offers a hook-friendly wrapper.

<Activity mode="visible" | "hidden"> hides a subtree without unmounting it: effects are cleaned up and updates are deferred while hidden, but state is kept, so switching back (such as between tabs) is instant and keeps form input.

Keep state local, split components so changes affect smaller trees, pass children instead of rendering them inside a stateful parent, avoid creating new objects in props when not needed, use selectors with stores, and let the React Compiler memoise. Measure with the React DevTools Profiler before optimising.

createPortal(children, domNode) renders children into another DOM node, such as document.body for modals and tooltips, while they stay in the React tree for context and event bubbling.

Components can render <title>, <meta> and <link> tags anywhere, and React hoists them into the document head. Stylesheets with precedence and async scripts are deduplicated and ordered correctly.

Pass a function to <form action={fn}>; React calls it with FormData, handles pending state (useFormStatus), and resets uncontrolled fields after success. useActionState adds returned state such as errors, and useOptimistic shows instant results.

It returns a lagging copy of a value that updates at lower priority, so an expensive child (like a filtered list) re-renders after urgent updates (like typing). Combined with memo, it keeps inputs responsive.

Render them with React Testing Library, find elements by role and label like a user would, interact with user-event, assert on visible results, and mock network calls with MSW rather than mocking components.

It double-invokes render functions and effects (mount, unmount, mount) to reveal impure rendering and missing cleanups, and warns about deprecated APIs. It has no effect in production.

Subscribing to external stores (state libraries, browser APIs) in a way that is safe with concurrent rendering, avoiding tearing where different parts of the UI show different values.

1. AuseActionStateCorrect answer
2. BuseFormState in React 20
3. CuseServer
4. DuseReducer

Why: React 19 renamed the canary useFormState to useActionState.

1. AThrough context
2. BThey cannot
3. COnly via forwardRef
4. DAs a regular prop named refCorrect answer

Why: ref is now a normal prop; forwardRef is no longer needed.

1. ASo React can match items between rendersCorrect answer
2. BTo speed up fetch
3. CThey are optional
4. DFor CSS

Why: Keys identify items for correct updates, moves and state preservation.

1. AOnly on page reload
2. BBefore every render
3. CNever
4. DBefore the effect re-runs and on unmountCorrect answer

Why: Cleanup undoes the previous run's setup.

1. AAt the top level of components or custom hooksCorrect answer
2. BInside loops
3. CInside conditions
4. DIn class methods

Why: Order must be the same every render.

1. ANever batched
2. BRun twice
3. CIgnored
4. DBatched automaticallyCorrect answer

Why: Automatic batching applies everywhere.

1. AReload the page
2. BGive it key={id}Correct answer
3. CCall useEffect to clear state
4. DUse forceUpdate

Why: A new key remounts it.

1. AuseLayoutEffect
2. BuseDeferredValue
3. CuseOptimisticCorrect answer
4. DuseId

Why: useOptimistic renders an optimistic state until the action settles.

1. AAccess the DOM
2. BRun on the server only
3. CBe called inside conditions and loopsCorrect answer
4. DReplace useState

Why: use is not bound by the rule of calling hooks at the top level.

1. AuseFormStatusCorrect answer
2. BuseFormData
3. CuseSubmit
4. DuseForm

Why: useFormStatus (react-dom) reports whether the enclosing form is submitting.

1. ARemoves hooks
2. BConverts JSX to Vue
3. CMemoises components and values automatically at build timeCorrect answer
4. DCompiles React to WebAssembly

Why: It inserts memoisation so manual useMemo/useCallback are rarely needed.

1. AReact.memo
2. BuseMemo
3. CuseLazy
4. DReact.lazyCorrect answer

Why: Pair it with Suspense.

1. ARenders children into another DOM nodeCorrect answer
2. BCreates a new app
3. COpens a window
4. DMakes an iframe

Why: Events still bubble through React.

1. AIt disables memo
2. BIt runs effects twice
3. CIt clones the DOM
4. DAll consumers re-render when its value changesCorrect answer

Why: Split or memoise values.

1. AuseDeferredValueCorrect answer
2. BuseLayoutEffect
3. CuseRef
4. DuseId

Why: It defers a value at low priority.

1. AComputing derived data from propsCorrect answer
2. BSubscribing to a socket
3. CStarting a timer
4. DSyncing with a third-party widget

Why: Compute it during render.

1. A"use server"
2. B"use client"Correct answer
3. C"client only"
4. D"use browser"

Why: It marks the boundary where client code starts.

1. AsetTimeout
2. BstartTransitionCorrect answer
3. CflushSync
4. DuseRef

Why: Transitions can be interrupted by urgent updates.

1. AChild render
2. BEvent handlersCorrect answer
3. CLifecycle methods
4. DConstructors of children

Why: Event handler errors must be handled with try/catch.

1. AuseIdCorrect answer
2. BuseKey
3. CuseUnique
4. DuseRandom

Why: useId avoids hydration mismatches for accessibility attributes.

1. ANo re-renderCorrect answer
2. BA re-render
3. CAn effect
4. DA remount

Why: Refs are mutable boxes.

1. AuseReducer
2. BuseSyncExternalStoreCorrect answer
3. CuseEffect only
4. DuseContext

Why: It prevents tearing.

1. AState between all users
2. BThe DOM
3. CProps automatically
4. DLogic, not stateCorrect answer

Why: Each call has its own state.

1. AThrows an error
2. BRenders in the body as text
3. CIs hoisted to the document headCorrect answer
4. DIs ignored

Why: Built-in metadata support.

1. AforceUpdate
2. BstartTransition
3. CflushSyncCorrect answer
4. Dact

Why: Use rarely.

1. AA ref
2. BJSON string
3. CFormDataCorrect answer
4. DAn event object only

Why: React 19 form actions.

1. AOnly effects
2. BNetwork requests
3. CNothing
4. DThe subtree's stateCorrect answer

Why: State is preserved; effects are cleaned up until it is visible again.

1. AuseInsertionEffect only
2. BuseDeferredValue
3. CuseEffect
4. DuseLayoutEffectCorrect answer

Why: useLayoutEffect is for measuring layout before the browser paints.

1. AThe previous route
2. BUI while children wait for data or codeCorrect answer
3. CErrors
4. DNothing

Why: Error boundaries handle errors.

1. AJSX
2. BA new ref
3. CA cleanup functionCorrect answer
4. DA promise

Why: It runs when the element is removed.