Top 20 React 19 Interview Questions (Updated for 2026)

1. What is the React Compiler (React Forget) and how does it change optimization?

In legacy React (React 18 and below), developers had to manually optimize renders using useMemo, useCallback, and React.memo to avoid un-necessary re-renders. The React Compiler is a build-time tool that compiles React code down to heavily optimized JS, automatically memoizing component renders, hook values, and dependency arrays at the granular level.

It achieves this by performing strict static analysis of the rules of React (e.g., ensuring components are pure). This means manual memoization hooks are essentially obsolete in React 19, resulting in cleaner, safer, and faster codebases.

2. Can you explain the rule of purity the React Compiler enforces?

To safely auto-memoize code, the React Compiler expects your components and hooks to be strictly pure. Specifically:

• They must not mutate values created outside their local scope (e.g., modifying global variables or arguments).
• Renders must produce the same React Element given the same inputs (props and state).
• Side effects must be strictly deferred to event handlers or useEffect.

If the compiler detects a rule violation, it will safely skip that component and delegate optimization back to the developer without crashing the build.

3. How does the use() hook differ from standard React hooks?

The use() hook is a brand new API in React 19 designed to read async resources (Promises) or Context values directly inside render. Unlike standard hooks, use() can be called conditionally and inside loops.

// Example of use() reading a promise conditionally
function WeatherPanel({ weatherPromise, showDetails }) {
  if (!showDetails) return <p>Preview Mode</p>;

  // Reading promise inside a conditional block!
  const weather = use(weatherPromise);
  return <div>Temperature: {weather.temp}°C</div>;
}

4. How does use() resolve the "Wrapper Hell" associated with Context?

Previously, to consume multiple context values, you had to call useContext() at the top level of the component. If the context wasn't needed under certain conditions, you still incurred the hook overhead. With use(Context), you can consume contexts inside conditional branches or dynamically as needed, flattening the component architecture.

5. What is the relationship between use() and Suspense?

When you pass a Promise to the use() hook, React will suspend the rendering of that component until the Promise resolves. The nearest parent <Suspense> boundary will catch this suspension and display the specified fallback UI (like a loading skeleton). This makes data fetching feel native and synchronous.

---

Server Actions & Async Transactions (Questions 6-10)

6. What are Server Actions and how do they benefit single-page apps?

Server Actions are async functions executed on the server, triggered directly from client-side interactive elements (like forms). They bridge the gap between client and server, letting you write database mutations, API requests, and authentication flows directly in your components without manually setting up API endpoints (/api/mutate) and managing loading states.

7. Explain the useActionState hook (formerly useFormState).

useActionState is the standard React 19 hook for managing the state of an async Action. It tracks the pending state, returns the latest result of the Action, and updates automatically when the form triggers the mutation.

import { useActionState } from 'react';

// The server/async action
async function subscribeNewsletter(prevState, formData) {
  const email = formData.get("email");
  try {
    await saveToDatabase(email);
    return { success: true, message: "Subscribed!" };
  } catch (err) {
    return { success: false, message: err.message };
  }
}

function SubscribeForm() {
  const [state, formAction, isPending] = useActionState(subscribeNewsletter, null);

  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button type="submit" disabled={isPending}>
        {isPending ? "Subscribing..." : "Subscribe"}
      </button>
      {state && <p>{state.message}</p>}
    </form>
  );
}

8. How does useFormStatus simplify child components inside forms?

In legacy React, to know if a parent form was submitting, you had to pass loading states down through props. In React 19, useFormStatus lets a child component (like a custom submit button) read the pending status of its parent form automatically, regardless of depth.

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Saving..." : "Save Changes"}
    </button>
  );
}

9. What is useOptimistic and how does it improve User Experience?

useOptimistic is a hook that lets you render a "temporary" successful state while an async transaction is in flight. Once the async action finishes (or fails), the state automatically updates to the actual database state, preventing slow UI jumps.

// Example of useOptimistic inside a chat room
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newText) => [...state, { text: newText, sending: true }]
);

10. How do React 19 async Actions handle error boundary recovery?

When an async action fails, the resulting Promise rejection is captured by the nearest <ErrorBoundary>. React 19 automatically batches state updates during async transactions, ensuring that if a database save fails, the UI rolls back cleanly to its stable pre-mutation state.

---

Document Metadata, Assets & Advanced features (Questions 11-15)

11. How does React 19 natively handle Document Metadata (title, meta, link tags)?

Previously, libraries like "react-helmet" were required to update head tags. In React 19, components can natively declare tags like <title>, <meta>, and <link> anywhere in the component tree. React automatically hoists these tags to the document "head" during rendering.

12. What are the new Resource Preloading APIs in React 19?

React 19 introduces explicit preloading APIs to fetch stylesheets, scripts, and fonts early in the lifecycle, optimizing Largest Contentful Paint (LCP):

• preload("style.css", { as: "style" })
• preconnect("https://api.mockexperts.com")
• prefetchDNS("https://fonts.googleapis.com")

This allows your apps to perform parallel asset requests while JavaScript is initialising.

13. How does React 19 handle Web Components compatibility?

React 19 provides full Web Components support. In older versions, custom elements often had issues mapping props to properties and handling custom DOM events. React 19 correctly parses properties and listens to custom events natively, resolving decades-long interoperability issues.

14. What is the new ref cleanup function feature in React 19?

Previously, to clean up a ref when a component unmounted, you had to use a callback ref and check for null. In React 19, callback refs can return a cleanup function directly (similar to useEffect).

// Return a cleanup function directly!
<input ref={(node) => {
  if (node) {
    node.addEventListener("focus", handleFocus);
  }
  return () => {
    node?.removeEventListener("focus", handleFocus);
  };
}} />

15. Explain how React 19 improves Suspense-driven Hydration.

React 19 supports streaming Server-Side Rendering (SSR) with concurrent hydration. If a component suspends on the client, React will hydrate the rest of the application without waiting for the suspended component to resolve, ensuring the page becomes interactive much faster.

---

Practical Scenarios & System design (Questions 16-20)

16. Design a real-time search auto-complete input using React 19.

Using standard React hooks, you would need complex debounce timers. In React 19, we combine the lightweight use() hook with custom transitions to stream search results dynamically:

function AutoComplete({ fetchResultsPromise }) {
  // Read pending state naturally
  const results = use(fetchResultsPromise);

  return (
    <ul>
      {results.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

17. How would you migrate an legacy Next.js or React 18 site to React 19?

1. Upgrade dependencies: npm install react@rc react-dom@rc. 2. Run the React Compiler upgrade check script to flag potential impurity bugs. 3. Replace custom meta-tag engines with native document tags. 4. Remove manual useMemo and useCallback declarations during code refactoring to let the Compiler take over. 5. Leverage async Transitions instead of manual loader state flags.

18. What is the difference between useTransition and standard async handling?

useTransition lets you wrap state transitions inside a non-blocking context. During a transition, the UI remains fully responsive. In React 19, transitions have been upgraded to support async functions, automatically tracking pending states and handling promise resolution boundaries.

19. What is the "Actions" concept in React 19?

An Action is an async transition. Whenever you pass an async function to a form element (e.g., <form action={asyncAction}>), React automatically manages:

• Pending state: Automatically sets loaders.
• Optimistic updates: Allows immediate preview.
• Error boundaries: Catches rejected promises safely.

This reduces the amount of state boilerplate you need for mutations by 90%.

20. Why do some large UK/US enterprise codebases disable manual memoization in React 19?

In massive codebases, manual memoization (useMemo) is highly prone to human error—such as forgetting dependencies or memoizing objects that don't need it (adding performance overhead). Enterprise teams disable manual memoization in their linters, relying completely on the React Compiler to enforce consistent, static optimizations across the entire developer team.