React 19: Top 15 Interview Questions for Senior Devs

React 19 Is a Paradigm Shift — Your Interview Prep Must Reflect That

React has been the dominant frontend framework for nearly a decade. But React 19 isn't just an incremental update — it's a fundamental rethinking of how React applications are built, optimized, and scaled. Server Actions, the React Compiler, new async hooks, and deeply integrated form handling have reshaped what "senior React developer" means in 2026.

If you're preparing for a senior frontend or full-stack role, your interviewers will probe you on React 19 specifics. These 15 questions represent what top companies are actually asking.

The Architecture Questions (Q1–Q5)

Q1: What is the React Compiler and what problem does it solve?

Entry-level answer: The React Compiler automatically optimizes React code, removing the need for manual memoization.

Senior-level answer: The React Compiler (previously codenamed "React Forget") is a build-time transformation that analyzes your component code and automatically inserts useMemo, useCallback, and React.memo optimizations where it determines they are safe and beneficial. It understands React's rules of hooks and component model deeply enough to guarantee that these insertions won't change observable behavior.

The problem it solves is the "memo tax" — the cognitive overhead and maintenance burden of manually managing memoization across a large codebase. Senior developers know that premature memoization can actually hurt performance (extra shallow comparison overhead) while insufficient memoization causes cascade re-renders. The compiler removes this judgment call entirely by having complete visibility into data flow at compile time.

Follow-up they might ask: "If the compiler handles memoization, should we remove all our existing useMemo calls?" Answer: The compiler is additive, not replacement. You should remove manual memoization where the compiler covers it (most cases), but keep it for cases the compiler can't analyze — like memoizing values held in refs or cross-module optimization boundaries.

Q2: Explain Server Actions. How do they differ from API routes?

Key distinction: API routes are HTTP endpoints — they're always network calls, always explicit, always require you to define fetch logic on the client. Server Actions are functions that execute on the server but are called directly from client components, with the network serialization handled transparently by the framework.

With API routes, you write:

• A POST /api/submit handler with request parsing and response serialization
• Client-side fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) })
• Error handling on both sides

With Server Actions (using 'use server' directive in Next.js 14+/React 19), you write a single async function and call it directly. The framework handles RPC serialization, progressive enhancement, and form integration automatically.

Security implication: Server Actions still execute on the server with full access to your database and secrets. They are never exposed as standalone HTTP endpoints (no GET method), but they are still HTTP POST requests under the hood — so you must still validate and authenticate inside the action, not trust client data.

Q3: What is the 'use' hook and when should you use it?

The use hook is React 19's unified primitive for consuming async resources in the render phase. Unlike traditional hooks, use can be called conditionally and inside loops.

Primary use cases:

• Promises: const data = use(fetchUserData(userId)) — suspends the component until the promise resolves, working in concert with a <Suspense> boundary above it.
• Context: const theme = use(ThemeContext) — equivalent to useContext but can be called conditionally, which enables powerful patterns where context consumption is conditional on other logic.

When NOT to use it: Don't call use(promise) with a new promise created each render, as this will cause an infinite suspension loop. Always pass memoized or stable promise references.

Q4: How does React 19 improve form handling?

React 19 introduces first-class support for forms through three integrated primitives:

• useActionState(action, initialState): Manages the state of a form action — pending status, result, and errors. Replaces the common pattern of useState + manual loading/error state management for forms.
• useFormStatus(): Provides the submission status of the nearest parent <form> — pending, data, method, action. Enables submit buttons and spinners that are automatically aware of form state without prop drilling.
• useOptimistic(state, updateFn): Manages optimistic UI updates — temporarily applies a UI state before the server confirms the action, then reverts if the action fails.

Together, these completely replace complex form libraries (Formik, React Hook Form) for most common patterns directly within React, with Server Action integration baked in.

Q5: What are the key differences between React Server Components and Client Components?

Dimension	Server Components	Client Components
Execution environment	Server only (Node.js runtime)	Browser (+ server during SSR)
Bundle size impact	Zero (not sent to client)	Adds to JS bundle
State & hooks	No useState, useEffect, event handlers	Full hooks support
Data access	Direct DB, filesystem, secrets	Via API calls only
Interactivity	None	Full interactivity
Default in Next.js 14+	Yes (all components)	Opt-in with 'use client'

The mental model: Server Components are like async template engines — they fetch data and produce HTML. Client Components are your interactive islands. The key architectural insight is that Server Components can import and render Client Components, but not the reverse (Client Components cannot import Server Components).

The Hooks Deep-Dive (Q6–Q10)

Q6: Walk me through useActionState with a real-world example.

Scenario: A user submits a contact form that calls a Server Action.

// Server Action
async function submitContact(prevState, formData) {
  'use server';
  const email = formData.get('email');
  if (!email.includes('@')) return { error: 'Invalid email' };
  await db.contacts.create({ email });
  return { success: true };
}

// Client Component
function ContactForm() {
  const [state, action, isPending] = useActionState(submitContact, null);
  return (
    <form action={action}>
      <input name="email" type="email" />
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">Thank you!</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

Key points: useActionState wires the Server Action directly to the form, provides the previous state to the action (enabling safe state transitions), and exposes isPending for loading states — all without manual state management.

Q7: What is useOptimistic and when is it appropriate?

useOptimistic is for scenarios where you want to show an immediate UI update before server confirmation — and gracefully revert if the server rejects the action.

Classic use case: Like/Unlike button. When a user clicks Like, you immediately show the liked state and increment the counter. The Server Action runs in the background. If it succeeds, the optimistic state is confirmed. If it fails (network error, rate limit), the hook automatically reverts to the actual server state.

When NOT to use it: Don't use optimistic updates for operations with strict consistency requirements (financial transactions, inventory management) where incorrect transient state could mislead users into making wrong decisions.

Q8: How has Suspense evolved in React 19?

Suspense was introduced in React 16.6 primarily for code splitting. In React 19, it's become the universal async state management primitive:

• Data fetching: Works with the use hook to suspend components while data loads
• Server rendering streaming: Enables progressive streaming of HTML, sending UI in chunks as server data becomes available (dramatically improves TTFB)
• Transitions: Works with useTransition to prevent Suspense fallbacks on non-urgent navigations

The key conceptual shift: Suspense is no longer just about lazy-loading components — it's about declaring where loading states should appear in your component tree, with the actual data fetching happening at any level below.

Q9: Explain the relationship between useTransition and Suspense.

useTransition marks a state update as non-urgent (a "transition"). When combined with Suspense:

• Without transition: Navigating to a new page that suspends immediately shows the Suspense fallback (e.g., a skeleton), which can feel jarring.
• With transition: React keeps showing the current page while the new page loads, only switching when ready. The isPending flag lets you show a subtle loading indicator instead of a full skeleton.

This is how Next.js App Router's page transitions work — providing the smooth navigation feel of an SPA while preserving SSR benefits.

Q10: What changed about ref handling in React 19?

React 19 makes refs first-class props on function components. Previously, accessing a child's DOM node required wrapping the child in forwardRef, which was verbose boilerplate. In React 19, refs can be passed directly as props — no forwardRef wrapper needed:

// React 19 — ref as a regular prop
function MyInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// Usage — just pass ref like any prop
<MyInput ref={inputRef} placeholder="Enter text" />

The old forwardRef API still works for backward compatibility, but is considered legacy.

Performance & Architecture (Q11–Q15)

Q11: How should you approach performance optimization in a React 19 app?

The hierarchy of concern has shifted significantly with React 19:

1. Move computation to the server: Data fetching in Server Components eliminates client-server waterfalls and reduces bundle size — this is the highest-leverage optimization.
2. Let the React Compiler handle memoization: Before manually adding useMemo, check if the compiler is already handling it.
3. Streaming with Suspense: Prioritize above-the-fold content with selective Suspense boundaries.
4. Code splitting with React.lazy: Route-level splitting is table stakes; component-level for heavy third-party integrations.
5. Virtualization for long lists: react-window or react-virtual for lists > 100 items.

Q12: What is the Document Metadata API in React 19?

React 19 introduces built-in support for managing <title>, <meta>, and <link> tags from within components — without needing react-helmet or framework-specific solutions. These tags are automatically hoisted to the <head> regardless of where they appear in your component tree, and deduplicated by React.

This is particularly valuable for Server Components, where metadata can be derived directly from fetched data and streamed in the document head before the body loads.

Q13: How do Error Boundaries work with Server Components in React 19?

Server Components can throw errors that need to be caught. The pattern is:

• Wrap your Server Component data-fetching in a Client Component Error Boundary
• Use <Suspense> and Error Boundaries together: Suspense handles the loading state; the Error Boundary handles fetch failures
• In Next.js 14+, error.tsx files in the App Router automatically create Error Boundaries for route segments

Key insight: Error Boundaries still require class components (componentDidCatch) or framework wrappers in React 19 — there is no hook equivalent yet, though the React team has indicated this is a planned improvement.

Q14: When would you choose React 19 over other frameworks like SvelteKit or Astro?

This is a nuanced question that senior interviews often include to probe your architectural judgment:

• Choose React 19 (Next.js): Large teams (React's ecosystem, tooling, and talent pool are unmatched), complex interactive applications, companies already invested in the React ecosystem, when you need Server Actions and full-stack TypeScript cohesion.
• Consider Astro: Content-heavy sites where most pages are mostly static, when you need to mix multiple UI frameworks (React components alongside Svelte/Vue), or when you want the absolute minimum JavaScript shipped.
• Consider SvelteKit: Smaller teams where bundle size and raw performance are priorities, or when you prefer Svelte's compile-time reactivity model over React's virtual DOM.

The senior answer acknowledges that React is not always the right choice — it shows architectural maturity rather than framework tribalism.

Q15: How does React 19 change how you architect state management?

React 19 significantly reduces the need for global client state management in many applications:

• Server data is now a first-class concern: Data that was previously fetched on the client and stored in Redux/Zustand is now fetched in Server Components and streamed to the client. No client cache needed for server state.
• Form state is handled by useActionState: Eliminating the need for form libraries in most cases.
• Only truly client-local state needs libraries: UI state (modals, sidebars, selected items) still benefits from Zustand or Jotai for non-trivial apps.

The architectural recommendation for a new React 19 app in 2026: Start with Server Components for all data fetching, useActionState for forms, useState for simple UI state, and add Zustand only when you have genuine cross-component client state that can't be derived from server data.

How to Prepare for React 19 Interviews

Reading about React 19 features is necessary but not sufficient. Interviewers will probe your experience, not just your theoretical knowledge. To prepare effectively:

1. Build something with React 19 + Next.js 14+: Create a full-stack feature that uses Server Components, Server Actions, and useActionState. The Vercel docs are excellent.
2. Understand the "why": For each new feature, internalize the problem it solves — interviewers always follow up "what is X?" with "when and why would you use it?"
3. Practice explaining out loud: Use MockExperts' AI interviewer to practice answering these questions in real-time, with follow-up probing questions that stress-test your understanding.

Start your React 19 mock interview with MockExperts — the AI interviewer is calibrated to senior frontend interview standards.