React interview questions and answers for React 19.3

This guide covers the React questions front-end interviewers ask in 2026, from why keys matter to how the React Compiler changes memoization and what React 19.3 added. After working through it you should be able to explain rendering, state, effects and Server Components clearly, and write the small snippets interviewers ask for on a whiteboard or in a shared editor.

React 19.3 was released on 9 September 2026, a year after React 19.2, and React itself now lives at the React Foundation under the Linux Foundation. The answers below follow react.dev and the official release posts, and the React 19.3 exports used here were checked against the published npm package.

Beginner questions: components, props and state

1. What is React, and what is a component?

React is a JavaScript library for building user interfaces from components. A component is a function that takes props and returns a description of UI (JSX). React calls your components to work out what the screen should look like and then updates the real DOM to match, so you describe the result rather than writing the DOM changes by hand.

2. What is the difference between props and state?

Props are inputs passed from a parent; a component must treat them as read-only. State is data a component owns and changes over time with a setter such as the one returned by useState. Changing state schedules a re-render of that component and its children. If two components need the same state, lift it up to their closest common parent and pass it down.

3. Why does React need a key on list items?

Keys tell React which item is which between renders, so it can keep the right state and DOM node attached to the right item when the list is reordered, filtered or inserted into. Use a stable, unique id from the data. Array indexes are only safe for static lists; with reordering they attach state (such as typed input) to the wrong row.

<ul>
  {todos.map((todo) => (
    <li key={todo.id}>{todo.title}</li>
  ))}
</ul>

4. Why does setCount(count + 1) called twice only add one?

State updates are applied on the next render, and within one event handler count is a fixed snapshot. Both calls compute the same value. Use an updater function when the next state depends on the previous one:

setCount((c) => c + 1);
setCount((c) => c + 1); // now adds 2

5. What are the Rules of Hooks?

Call hooks only at the top level of a function component or a custom hook, never inside loops, conditions or nested functions, and never from ordinary JavaScript functions. React identifies each hook by its call order, so the order must be the same on every render. The new use API is the exception: it can be called conditionally. eslint-plugin-react-hooks enforces the rules.

6. Controlled or uncontrolled inputs?

A controlled input takes its value from state and updates it in onChange, so React state is the source of truth; that suits instant validation and dependent fields. An uncontrolled input keeps its own value in the DOM, and you read it on submit, for example from FormData in a form Action. Uncontrolled inputs mean less code for simple forms.

Intermediate questions: effects, refs and forms

7. What is useEffect for, and when should you not use it?

Effects synchronise a component with an external system: a network connection, a subscription, a timer or a non-React widget. Return a cleanup function to undo the work. You do not need an effect to compute values from props or state (calculate them during render) or to respond to a user event (do it in the event handler). Many interview bugs come from effects that should not exist.

useEffect(() => {
  const conn = createConnection(serverUrl, roomId);
  conn.connect();
  return () => conn.disconnect();
}, [serverUrl, roomId]);

8. Why do effects run twice in development?

In Strict Mode, React mounts, unmounts and remounts components once in development to expose effects that are missing cleanup. If your app breaks when an effect runs twice, the cleanup is incomplete. It does not happen in production. Since React 19.3, effects are also double-invoked in Strict Mode during hydration, matching client-rendered roots.

9. What does useEffectEvent solve?

Sometimes an effect needs the latest value of something (a theme, a logging flag) without re-running when it changes. useEffectEvent, stable since React 19.2, wraps that non-reactive logic. The Effect Event always sees the latest props and state, and it must not be listed in the dependency array or called outside effects.

const onConnected = useEffectEvent(() => {
  showNotification("Connected!", theme);
});
useEffect(() => {
  const conn = createConnection(serverUrl, roomId);
  conn.on("connected", () => onConnected());
  conn.connect();
  return () => conn.disconnect();
}, [roomId]);

10. How do refs work in React 19?

useRef holds a mutable value that survives renders without causing one, most often a DOM node. In React 19, function components receive ref as an ordinary prop, so forwardRef is no longer needed, and ref callbacks can return a cleanup function. React 19.3 adds Fragment refs: a ref on <Fragment> lets you focus, observe or listen to a group of children without a wrapper <div>.

11. What are Actions, useActionState and useOptimistic?

An Action is an async function run in a transition; React tracks its pending state, errors and form resets for you. <form action={fn}> calls it with the form's FormData. useActionState wraps an Action and returns its last result, a dispatch function and an isPending flag. useOptimistic shows an expected result immediately and falls back to the real value when the request finishes or fails.

const [error, submit, isPending] = useActionState(
  async (prev, formData) => {
    const err = await updateName(formData.get("name"));
    return err ?? null;
  },
  null,
);
return (
  <form action={submit}>
    <input name="name" />
    <button disabled={isPending}>Save</button>
    {error && <p role="alert">{error}</p>}
  </form>
);

Advanced questions: performance, concurrency and the server

12. Do you still need useMemo, useCallback and memo?

Less often. React Compiler 1.0 (October 2025) is a build-time tool that memoizes components and hooks automatically, sometimes more precisely than hand-written memoization, and it works with React 17 and later. The React team recommends relying on the compiler for new code and keeping useMemo and useCallback as escape hatches, for example when a memoized value is an effect dependency. In existing code, leave memoization in place or test carefully before removing it.

13. What do transitions and useDeferredValue do?

They mark updates as non-urgent. Wrapping a state update in startTransition lets React keep the UI responsive to typing and clicks while it renders the expensive update in the background, and it can abandon a stale render. useDeferredValue gives you a lagging copy of a value, so a slow list can render behind a fast input. In React 19.3, separate transitions render independently, so a slow one no longer holds up unrelated ones.

14. What are Server Components?

Components that run only on the server (at build time or per request). They can read data directly, add no JavaScript to the client bundle, and pass serialisable props to Client Components, which are marked with the 'use client' directive and can use state, effects and browser APIs. Frameworks such as Next.js implement them. In React 19.3, a Server Component can render a Context imported from a client module directly, without a wrapper provider. A strong answer adds that Server Functions are endpoints, so their inputs must be validated and authorised like any API.

15. What are <Activity> and <ViewTransition>?

<Activity mode="hidden"> (React 19.2) hides a subtree while preserving its state and unmounting its effects, so you can pre-render a likely next screen or keep a tab's form input when the user switches away. <ViewTransition>, stable in React 19.3, animates elements entering, leaving or updating using the browser's View Transition API. It animates updates made inside a transition, a Suspense reveal or useDeferredValue, and addTransitionType lets the same update animate differently (for example "next" or "previous").

16. How do you render a component only in the browser?

React 19.3 added browser() in react-dom. Calling use(browser()) makes the component suspend during server rendering, so the nearest Suspense fallback goes into the HTML, and render normally on the client after hydration. It is the clean way to read localStorage or the user's time zone without a hydration mismatch.

17. How do you find a performance problem in a React app?

Measure first. Use the React DevTools Profiler to see which components re-render and why, and the React Performance Tracks in Chrome DevTools (added in React 19.2) to see scheduler priorities and component work on the same timeline as network and JavaScript. Typical fixes: move state down so fewer components re-render, split large lists with virtualisation, lazy-load routes, and avoid creating effects that set state on every render.

What interviewers look for

• The render model: UI is a function of state; state updates are snapshots.
• Restraint with effects: derive during render, handle events in handlers, clean up what you start.
• Accessible markup: real buttons and labels, role="alert" for errors, focus management.
• Current React: Actions, the compiler, Server Components and what React 19.3 changed.
• Evidence-based performance work: profile before optimising.

How to practise

1. Build a small to-do list with add, toggle, delete and filter, using stable keys and a form Action.
2. Add an effect that subscribes to window resize and confirm the cleanup works in Strict Mode.
3. Profile it, then enable React Compiler and compare re-renders.
4. Explain each decision aloud in under a minute.