React Interview Questions (2026): Hooks, State & Performance

React interviews in 2026 have moved past “what is JSX.” Interviewers want to know whether you understand why React re-renders, how hooks actually work, and how you’d keep a real app fast. Below are the questions that come up most, grouped by theme, each with a concise answer you can say out loud confidently.

Fundamentals & hooks

What’s the difference between state and props? Props are read-only data passed into a component by its parent; state is data a component owns and can change over time with a setter. Changing either triggers a re-render, but a component can never mutate its own props.

Explain the useState hook and why updates are asynchronous. useState returns a value and a setter. Calls to the setter are batched and applied before the next render, so reading the state variable right after setting it gives the old value. When the new value depends on the old one, use the functional form:

setCount(prev => prev + 1);

What does the dependency array in useEffect control? It decides when the effect re-runs. [] runs once after mount; [a, b] re-runs whenever a or b changes; omitting it entirely runs the effect after every render. Return a cleanup function to cancel subscriptions or timers before the next run or on unmount.

What problem do the rules of hooks solve? Hooks must be called at the top level, in the same order, on every render — never inside conditionals or loops. React tracks hook state by call order, so a conditional hook would misalign the state slots between renders.

When would you reach for useReducer over useState? When state is complex or the next state depends on the previous one through several actions (think a form with many fields, or an undo stack). useReducer centralises transition logic in a pure reducer, which is easier to test and reason about than scattered setState calls.

Rendering & the virtual DOM

How does React decide what to re-render? When state or props change, React re-runs the component to produce a new virtual DOM tree, diffs it against the previous tree (reconciliation), and applies the minimal set of real DOM mutations. A parent re-render re-renders children by default unless they’re memoised.

Why do lists need a key, and why not the array index? Keys let React match elements between renders so it reuses DOM nodes instead of recreating them. Using the array index breaks this when items are reordered, inserted, or deleted — React can mismatch state to the wrong row, causing subtle bugs. Use a stable unique id.

What’s the difference between controlled and uncontrolled components? A controlled input has its value driven by React state (value={x} + onChange); React is the single source of truth. An uncontrolled input keeps its own value in the DOM and you read it via a ref. Controlled is preferred for validation and dynamic behaviour.

Performance optimisation

What do React.memo, useMemo and useCallback actually do?

• React.memo skips re-rendering a component if its props are shallow-equal to last time.
• useMemo caches the result of an expensive calculation between renders.
• useCallback caches a function reference so memoised children don’t re-render because a new function was created each parent render.

The key caveat: these aren’t free — they add memory and comparison cost. Profile first; don’t sprinkle them everywhere.

A list of 10,000 rows is janky. How do you fix it? Virtualise it — render only the rows in the viewport with a windowing library (e.g. react-window). Also memoise row components, stabilise callbacks with useCallback, and avoid recreating objects in render. Mention measuring with the React Profiler first.

What causes unnecessary re-renders, and how do you find them? Common causes: passing new object/array/function literals as props each render, context value changing identity, or a high-up state change cascading down. Find them with the React DevTools Profiler (“highlight updates”), then memoise the right boundary.

State management & data

When do you actually need a state library like Redux or Zustand? When state is shared across many distant components, persisted, or has complex update logic. For most apps, component state plus the Context API or a server-state library (TanStack Query) is enough. “Lift state up, then reach for a library only when prop-drilling hurts” is the answer interviewers want.

Why is the Context API not a full replacement for Redux? Context is great for low-frequency global values (theme, auth user) but every consumer re-renders when the context value changes, with no built-in selector optimisation. Heavy, frequently-updating state benefits from a dedicated store with selective subscriptions.

The 2026 shift: Server Components

What are React Server Components and why do they matter? Server Components render on the server, send no JavaScript to the client, and can fetch data directly — shrinking bundle size and improving load time. Client Components ("use client") handle interactivity. Knowing where the boundary goes — keep interactive bits as Client Components, push data-fetching and static UI to the server — is now a frequent senior-level question.

How to stand out

Don’t just recite definitions — explain the why and name a trade-off (“useMemo saves compute but costs memory; I’d profile before adding it”). Interviewers can tell the difference between memorised and understood in about ten seconds.

Rehearse these aloud with OnJob’s AI mock interviews to get a confidence score on your explanations, then sign up free and browse matched frontend and full-stack roles. If you’re aiming for full-stack, pair this with our guide on how to get a full-stack developer job.

FAQ

What React topics are most asked in interviews in 2026? Hooks (especially useState, useEffect and useReducer), the rules of hooks, reconciliation and keys, performance tools (React.memo, useMemo, useCallback), state-management trade-offs, and — increasingly — React Server Components and the client/server boundary.

What’s the difference between useMemo and useCallback? useMemo memoises the return value of an expensive computation, while useCallback memoises a function reference so memoised child components don’t re-render just because a new function was created on the parent’s render. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Do I need to know Redux for React interviews? Not always — many teams now use Context plus a server-state library like TanStack Query. But you should be able to explain when a store like Redux or Zustand is justified (shared, frequently-updating, complex state) and why Context alone isn’t always enough.

Free OnJob tools & guides

Interview questions by role Real questions + what a strong answer covers. Free mock tests Practice and benchmark before the real thing. ATS resume checker Clear the filters before you interview.