These React interview questions are written for React 19 and for teams using the React Compiler, Server Components, or both. They suit frontend leads building a first technical round and developers who want to check their mental model before an interview. Each question explains what a strong answer covers, with red flags where candidates often slip. Pick 6 to 8 that match your stack. If your app is a single-page app without a server framework, skip the Server Components section.
What a strong React interview checks
- Rendering model: what triggers a render and how React decides what to update.
- Hooks fluency: state, effects, refs and memoization used for the right reasons.
- Data flow: where state should live and how data reaches components.
- Modern React: Server Components, Actions and Suspense.
- Performance and testing: measuring before optimizing, and testing behavior rather than internals.
React interview questions: rendering and hooks
1. What causes a React component to re-render?
What good looks like: its own state changes, its parent re-renders, or a context it reads changes. A parent re-render re-renders children by default even if their props are the same. React.memo skips that when props are shallowly equal. A strong candidate notes that rendering means calling the component, and React only touches the DOM where the output changed.
Red flag: "It re-renders when props change," with no mention of parents or context.
2. Why do list items need keys, and why is the array index often a bad key?
What good looks like: keys tell React which item is which between renders, so it can keep the right state and DOM node with the right item. If you insert, delete or reorder, index keys shift, and state such as an input's text can end up on the wrong row. Use a stable ID that's unique among siblings.
3. What are the rules of hooks, and why do they exist?
What good looks like: call hooks only at the top level of a function component or custom hook, never inside conditions, loops or regular functions. React tracks hooks by call order on each render, so a hook that's sometimes skipped breaks that order. The ESLint hooks plugin catches most violations.
4. What is useEffect for, and when shouldn't you use it?
What good looks like: effects synchronize a component with something outside React, such as a subscription, a timer, a non-React widget or a network request. The dependency array lists every value from the component the effect reads, and the cleanup function undoes the setup. You don't need an effect to compute values from props or state: calculate them during render. In development, Strict Mode mounts, unmounts and remounts each component once to expose missing cleanup.
Red flag: an effect that sets state from props on every change, causing an extra render and bugs.
5. If you call setCount(count + 1) three times in one click handler, what happens?
What good looks like: the count goes up by one, not three. Each call reads the same count from that render, and React batches the updates into one re-render. Use the updater form, setCount(c => c + 1), to build on the latest pending value. Since React 18, updates are batched automatically everywhere, including in timeouts and promises.
6. Controlled or uncontrolled inputs: what's the difference?
What good looks like: a controlled input takes its value from state and updates it through onChange, so React is the source of truth. An uncontrolled input keeps its own value in the DOM, and you read it with a ref or from form data on submit. Controlled suits live validation and dependent fields. Uncontrolled is simpler for plain forms, especially with React 19 form Actions.
7. When do useMemo, useCallback and memo actually help, and what changes with the React Compiler?
What good looks like: they help when a computation is truly expensive, or when a stable reference prevents a memoized child or an effect from re-running. Used everywhere, they add noise and their own cost. The React Compiler (stable since its 1.0 release in 2025) analyzes components at build time and memoizes automatically, so in compiled code most manual memoization can go. Strong candidates say they would profile first either way.
8. When do you use a ref instead of state?
What good looks like: use a ref for a value that must persist between renders but shouldn't trigger a render when it changes, such as a timer ID or a DOM node. Don't read or write ref.current during rendering. In React 19, function components can accept ref as a normal prop, so forwardRef is no longer needed for new code.
9. What are the costs of React Context?
What good looks like: when the provided value changes, every component reading that context re-renders. Passing a new object on each render, like value={{ user, setUser }}, triggers this every time. Fixes include memoizing the value, splitting fast-changing and slow-changing data into separate contexts, or using a store with selectors for high-frequency state.
Modern React: Server Components, Actions and Suspense
10. What is the difference between a Server Component and a Client Component?
What good looks like: Server Components run on the server (at build time or per request), can be async and read data directly, and send no JavaScript of their own to the browser. They can't use state, effects or browser APIs. The 'use client' directive marks the boundary where Client Components begin. Strong candidates know 'use server' marks Server Functions, not Server Components, and that Server Components need a framework that supports them.
Red flag: thinking Server Components are the same as server-side rendering.
11. How do Actions and useActionState change form handling in React 19?
What good looks like: you can pass a function to a form's action prop, and React runs it in a transition, tracking the pending state for you. useActionState returns the latest result, a wrapped action and an isPending flag. useFormStatus (from react-dom) lets a child such as a submit button read the parent form's pending state, and useOptimistic shows the expected result before the server confirms.
12. What does Suspense do, and how does the use API fit in?
What good looks like: Suspense shows a fallback while something inside it is waiting, such as lazy-loaded code or data. The use API reads a promise or context, and unlike hooks it can be called inside conditions. In Client Components, the promise must come from a cache or from a Server Component, not be created fresh during render, or it will suspend forever.
13. What causes hydration mismatch errors, and how do you fix them?
What good looks like: the HTML rendered on the server differs from the client's first render. Typical causes are dates and times, random values, checks like typeof window in render, and invalid HTML nesting. Fixes: use useId for generated IDs, move browser-only values into an effect, and fix the markup.
Practical scenarios
14. A search box sends a request on every keystroke and sometimes shows results for an older query. Fix it.
What good looks like: debounce the input, then in the effect create an AbortController and abort it in the cleanup so stale responses are dropped, or ignore any response that doesn't match the latest query. A strong candidate mentions that a data library like TanStack Query handles caching and race conditions for you.
15. A table with 10,000 rows is slow to scroll and type into. What do you do?
What good looks like: profile first with the React DevTools Profiler to see what renders and why. Then virtualize the list so only visible rows render (TanStack Virtual or react-window), keep row components stable with good keys, and move the input's fast-changing state away from the table. useDeferredValue can keep typing responsive while the filtered list catches up.
16. Two sibling components need the same filter state. Where should it live?
What good looks like: lift it to their nearest common parent and pass it down. If the filter should survive a refresh or be shareable, put it in the URL's search parameters. Reach for a global store only when many distant components need it.
17. How would you test a component that fetches and displays data?
What good looks like: render it with React Testing Library, find elements by role and accessible name, and simulate the user with user-event. Mock the network at the request level (for example with Mock Service Worker) instead of mocking the component's internals, and test loading, success and error states.
18. You're starting a new React app in 2026. How do you set it up?
What good looks like: not Create React App, which the React team deprecated in early 2025. For a full app, start with a framework such as Next.js or React Router in framework mode. For a client-only app or widget, use a build tool like Vite. The answer should depend on routing, data loading and server needs, not habit.
Behavioral (STAR)
19. Tell me about a component API you designed for other developers.
What good looks like: a real shared component, how they chose its props, how they handled edge cases and accessibility, how they documented it, and a Result such as adoption across teams or fewer one-off copies.
20. Describe a React performance problem you fixed and how you proved it.
What good looks like: a measured before and after (Profiler timings, interaction latency, or a Web Vitals change), the root cause they found, and why their fix addressed it rather than masking it.
Red flag: "I wrapped everything in useMemo and it felt faster."
A simple scoring rubric
Running this interview with AI
React is part of NTRVSTA's exam library, alongside JavaScript and Angular. The AI interviewer runs the round live and adjusts as it goes. If a candidate explains re-renders and keys well, it moves into Server Components and performance scenarios. If they struggle, it stays with core hooks and can offer a hint, so you learn whether they can take a nudge and recover.
Each candidate's report includes a score breakdown and video snippets of key moments, ready to share with the hiring manager. For context on what the scores mean, read how AI interviews are scored, and see our ranking of AI interview software. You may also want our JavaScript, frontend developer and Node.js interview questions.
Questions
Do React interviews in 2026 need to cover Server Components?
Only if your app uses a framework that supports them, such as the Next.js App Router. Otherwise ask one conceptual question so you know the candidate understands the client and server split, and spend the rest of the time on hooks and rendering.
Is it fair to ask about the React Compiler?
Yes, as a concept. The compiler reached a stable 1.0 release in 2025, so a current candidate should know it memoizes automatically. Don't expect deep configuration knowledge unless your team already uses it.
Should a React interview include a live coding task?
A small one helps, such as building a filtered list with a search box in 30 minutes. Allow documentation, watch how they structure state and effects, and ask them to explain choices as they go.
Want to watch an adaptive AI interviewer run a React round? Grab a 20-minute demo slot, or try a sample interview yourself with no setup.
