React Interview Questions for 2026 (With Coding Exercises)

React interview questions in 2026 fall into seven areas: rendering and reconciliation, hooks, state management, performance, React 19 and Server Components, live coding, and testing. Most loops pair a conceptual round ("why does this component re-render?") with a 45 to 60 minute live coding exercise, such as building an autocomplete or a validated form without libraries. This guide gives you the questions that actually come up, short model answers, and five practice exercises with the criteria interviewers use to grade them.

Key Takeaways

• React 19.2 (October 2025) is the latest release line this guide covers; check react.dev for newer versions. Expect questions on Actions, useActionState, useOptimistic, the use API, <Activity>, and useEffectEvent.
• Server Components questions are now standard at Next.js shops. Know what 'use client' marks and what can cross the server/client boundary.
• The React Compiler (stable since October 2025) changes the memoization conversation. Explain both manual useMemo and why the compiler makes most of it unnecessary.
• Live coding rounds grade state modeling, edge cases (loading, empty, error, race conditions), and accessibility more than visual polish.
• Testing questions focus on React Testing Library: query by role, test behavior instead of implementation, and use userEvent over fireEvent.

How Are React Interviews Structured in 2026?

A React interview is usually one part of a broader frontend engineer interview loop. The React-specific pieces tend to look like this:

Many interviewers also ask core language questions before touching React, so review closures, the event loop, and this with our JavaScript interview questions guide.

Rendering, Reconciliation, and Keys

These questions test whether you have a correct mental model of when and why React does work.

What triggers a re-render? A component re-renders when its state changes, when its parent re-renders, or when a context it consumes changes. Props changing is not the trigger on its own; the parent re-rendering is. This is why wrapping a child in memo helps only if its props are referentially stable.

What is reconciliation? Reconciliation is the process where React compares the new element tree to the previous one and computes the minimal set of DOM changes. React uses two heuristics: elements of different types produce different trees (so the subtree is torn down and rebuilt), and keys identify which children in a list are the same across renders.

Why are keys important, and why is the array index a bad key? Keys tell React which list item is which. If you use the index and then insert an item at the top, every item's key shifts, so React reuses the wrong component instances. Input values, focus, and local state end up attached to the wrong rows.

// Bug: typing in a row, then adding an item to the top, moves the text
{items.map((item, i) => <Row key={i} item={item} />)}

// Fix: stable identity from the data
{items.map((item) => <Row key={item.id} item={item} />)}

A strong follow-up answer: you can also change a key on purpose to reset a component's state, for example <Profile key={userId} /> to discard a form's draft when the user changes.

What is the difference between rendering and committing? The render phase calls your components to produce elements and must be pure. The commit phase applies changes to the DOM, then runs layout effects and, after paint, regular effects. Side effects inside the render body break this contract, which is why Strict Mode double-invokes components and effects in development.

React Hooks Interview Questions and Common Pitfalls

Hooks questions are where most candidates lose points, because the bugs are subtle.

What are the rules of hooks? Call hooks only at the top level of a component or custom hook, never inside conditions, loops, or nested functions. React tracks hooks by call order, so a conditional hook shifts every later hook's state to the wrong slot.

What is a stale closure? A stale closure happens when a function captures a value from an old render and keeps using it. The classic example is an interval that always reads the initial count:

useEffect(() => {
  const id = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(id);
}, []);

count is frozen at 0, so the counter sticks at 1. The fix is a functional update, setCount((c) => c + 1), which removes the dependency entirely.

What does useEffectEvent solve? Added in React 19.2, useEffectEvent lets you read the latest props or state inside an effect without making the effect re-run when they change. A typical case is logging an analytics event with the current theme when a chat connection opens, without reconnecting every time the theme changes.

useMemo vs useCallback vs memo? useMemo caches a computed value, useCallback caches a function reference, and memo skips re-rendering a component when its props are shallowly equal. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Other hooks pitfalls interviewers probe:

• Fetching in useEffect without cleanup, so a slow earlier response overwrites a newer one.
• Missing dependencies silenced with an ESLint disable comment instead of fixing the design.
• Using useEffect to derive state that could be computed during render.
• Reading a ref's .current during render, which makes output unpredictable.
• Forgetting that state updates are batched and the new value is not visible until the next render.

Which State Management Approach Should You Choose?

Interviewers for experienced roles want a decision framework, not a favorite library. The core idea: separate server state (data owned by a backend) from client state (UI state owned by the browser).

Why not put everything in Context? Every consumer re-renders when the context value changes. For frequently updated values, that means large parts of the tree re-render. You can split contexts or memoize the value, but a store with selector subscriptions is usually the better fit.

When is useReducer better than useState? When the next state depends on the previous one in several related ways, or when many event handlers update the same object. Reducers also make state transitions easy to unit test.

Performance: Memoization, Transitions, and the React Compiler

Performance questions separate mid-level from senior candidates.

How do you find a performance problem? Measure first. Use the React DevTools Profiler to see which components rendered and why, and in React 19.2 the custom React Performance tracks in the browser's Performance panel. Fixing without profiling is a common red flag.

What does the React Compiler change? The React Compiler reached v1.0 in October 2025. It is a build-time tool that automatically memoizes components and values, so most manual useMemo, useCallback, and memo calls become unnecessary. A good interview answer: you still need to understand memoization because the compiler relies on components following the rules of React, and many codebases have not adopted it.

What do useTransition and useDeferredValue do? Both mark updates as non-urgent so urgent ones, like typing, stay responsive.

const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);

return (
  <>
    <input value={query} onChange={(e) => setQuery(e.target.value)} />
    <SlowResults query={deferredQuery} />
  </>
);

Use useTransition when you own the state update (wrap the setter in startTransition). Use useDeferredValue when you receive a value and want a lagging copy. Since React 19, transitions can wrap async functions, which is the foundation of Actions.

Other performance answers worth having ready: virtualize long lists, code-split with lazy and Suspense, avoid creating new object props in hot paths, and keep state as close as possible to where it is used.

React 19 Features and Server Components Interview Questions

React 19 shipped in December 2024, and React 19.2 arrived on October 1, 2025. Interviewers mostly ask about the 19.x line.

What is a React Server Component? A Server Component renders only on the server (at build time or per request), can read data directly with async/await, and sends no JavaScript for itself to the browser. Components are server components by default in frameworks like Next.js App Router.

What does 'use client' do? It marks a module as an entry point into the client bundle. That module and everything it imports run on the client and can use state, effects, and browser APIs. It does not mean "render only on the client"; client components are still prerendered to HTML.

What can be passed from server to client components? Only serializable props: primitives, plain objects, arrays, dates, promises, JSX, and Server Functions. Regular functions and class instances cannot cross the boundary. A common pattern is passing a Server Component as children into a client component wrapper.

What are Server Functions? Functions marked with 'use server' that the client can call like a normal async function, with React handling the network request. Interviewers increasingly ask about their security: treat every Server Function as a public endpoint, validate input, and check authorization. In December 2025 a critical remote code execution flaw in the React Server Components protocol (CVE-2025-55182) was disclosed and patched in 19.0.1, 19.1.2, and 19.2.1. Mentioning that you track such advisories is a credible senior signal.

Five React Live Coding Exercises With Evaluation Criteria

React coding interviews use small widgets because they reveal state design, async handling, and edge cases in under an hour. Build each one from scratch without UI libraries, then grade yourself against the criteria. Narrate as you go; our guide to thinking out loud during coding interviews covers how.

1. Autocomplete with debounce

Build an input that fetches suggestions from an API as the user types, with keyboard support.

function useDebouncedValue<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

function Autocomplete() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<string[]>([]);
  const debounced = useDebouncedValue(query, 300);

  useEffect(() => {
    if (!debounced) {
      setResults([]);
      return;
    }
    const controller = new AbortController();
    fetch(`/api/search?q=${encodeURIComponent(debounced)}`, { signal: controller.signal })
      .then((r) => r.json())
      .then(setResults)
      .catch((e) => {
        if (e.name !== "AbortError") setResults([]);
      });
    return () => controller.abort();
  }, [debounced]);

  return (
    <div>
      <input
        role="combobox"
        aria-expanded={results.length > 0}
        aria-controls="suggestions"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul id="suggestions" role="listbox">
        {results.map((r) => (
          <li key={r} role="option" aria-selected={false}>{r}</li>
        ))}
      </ul>
    </div>
  );
}

What graders look for: debouncing, aborting or ignoring stale responses, arrow key and Enter handling, ARIA combobox roles, and empty and error states. If the interviewer pushes on scale, the backend side is covered in designing a typeahead system.

2. Infinite scroll list

Load 20 items, then fetch the next page when the user nears the bottom. The strong solution uses IntersectionObserver on a sentinel element instead of a scroll listener, guards against duplicate requests while one is in flight, stops when the API reports no more pages, and disconnects the observer on unmount.

3. Form with validation

Build a sign-up form with email, password, and confirm-password fields. Show errors on blur and on submit, disable submit while pending, and show a server error. In a React 19 codebase, useActionState is a clean fit:

const [state, formAction, isPending] = useActionState(
  async (_prev: FormState, formData: FormData) => {
    const errors = validate(formData);
    if (Object.keys(errors).length) return { errors };
    return await signUp(formData);
  },
  { errors: {} }
);

Graders check that errors are linked to inputs with aria-describedby, focus moves to the first invalid field, and validation logic lives in a pure, testable function.

4. Sortable, filterable data table

Render a list of users with column sorting and a text filter. The key insight interviewers want: store only the source data, sort key, direction, and filter text in state, then derive the visible rows during render. Candidates who keep a separate filteredRows state and sync it with an effect lose points.

5. Nested comments tree

Render arbitrarily nested comments with collapse and reply. This tests recursive components, normalized versus nested state shape, and immutable updates deep in a tree. Explain why a flat Record<id, Comment> map with childIds makes replies and edits simpler.

The hardest part of these rounds is usually not React itself but freezing when the async logic misbehaves under time pressure. Our guide on what to do when stuck in a coding interview helps you recover without losing the room.

Testing React Components

Testing questions show up in both conceptual rounds and take-home assignments, where missing tests often sink an otherwise good submission.

What is the guiding principle of React Testing Library? Test what the user sees and does, not implementation details. Query elements by accessible role and name, simulate real interactions, and assert on visible output.

test("shows an error for an invalid email", async () => {
  const user = userEvent.setup();
  render(<SignUpForm />);
  await user.type(screen.getByRole("textbox", { name: /email/i }), "nope");
  await user.click(screen.getByRole("button", { name: /sign up/i }));
  expect(await screen.findByText(/enter a valid email/i)).toBeInTheDocument();
});

Follow-up questions to prepare:

• getBy vs queryBy vs findBy? getBy throws if missing, queryBy returns null (use it to assert absence), and findBy returns a promise for async UI.
• Why userEvent over fireEvent? userEvent simulates the full sequence of browser events a real interaction triggers, such as focus, keydown, and input.
• How do you mock network calls? Mock at the network layer with a tool like Mock Service Worker rather than mocking fetch inside each component.
• What belongs in end-to-end tests? Critical user flows like sign-up and checkout, usually with Playwright, while unit and component tests cover logic and edge cases.

How to Prepare for a React Coding Interview in Two Weeks

A focused plan beats reading every blog post. In week one, review the rendering model and hooks pitfalls above, then build exercises one through three under a 45-minute timer. In week two, build exercises four and five, write tests for at least two of them, and rehearse explaining Server Components and the React Compiler in under two minutes each.

If the role is at a large company, read the company-specific loop first. Meta's interview process, for example, weights general coding heavily even for frontend roles, so do not skip algorithm practice entirely. Practice with a partner when you can, since a pair programming interview rewards collaboration as much as correct code.