Interview questionsUpdated 12 Oct 2026 · Team InterviewPlan

React Developer Interview Questions and Answers

React interviews in 2026 go deeper than useState and props. Panels ask how rendering really works, how you manage server and client state, how you keep large apps fast and how React Server Components and Next.js change the picture. These questions and model answers reflect real React project work.

What interviewers test in a React developer interview

React rounds usually combine concept questions with a live coding task such as building a filterable list, a form with validation or a small data-fetching component. Interviewers watch how you structure components and state, not just whether it works.

Senior candidates get questions on architecture: where state should live, how to avoid unnecessary re-renders across a large app and how to split client and server responsibilities in Next.js.

  • Rendering: reconciliation, keys, batching and when components re-render
  • Hooks: rules of hooks, effects, dependencies and custom hooks
  • State: local, lifted, context, global stores and server state
  • Performance: memoisation, virtualisation, code splitting and profiling
  • Ecosystem: Next.js App Router, TypeScript and testing

Technical topics to revise

Rebuild a small app with TypeScript, TanStack Query and a form library, then profile it with React DevTools. Being able to show the Profiler flame chart in your head helps answer performance questions confidently.

  • useEffect cleanup, dependency arrays and avoiding effects for derived state
  • useMemo, useCallback, React.memo and when they are not needed
  • useReducer, context splitting and Redux Toolkit or Zustand
  • TanStack Query caching, invalidation and optimistic updates
  • React Hook Form with Zod validation
  • Next.js App Router, server components, server actions and caching
  • Suspense, lazy loading and error boundaries
  • React Testing Library and Jest or Vitest

How to structure your answers

Explain the concept, then show where it went wrong or right in your code. For example, describe an infinite render loop you fixed by correcting effect dependencies.

In live coding, start with a simple, correct component tree, keep state as local as possible, and talk through how you would handle loading, errors and empty states.

How InterviewPlan AI helps you prepare

React mock interviews ask hooks, rendering and architecture questions and give feedback on how clearly you explain trade-offs. Coding help supports practice tasks, and Resume AI helps you describe performance and product impact.

Interview Copilot gives speaker-labelled transcription and resume-grounded answer drafts in real time during interviews. Once hired, React Job Support offers live expert-plus-AI help with tickets and code reviews in your first 90 days, at $5 per hour with 200 AI credits included.

Questions and model answers

9 questions you are likely to hear.

  1. Why are keys important when rendering lists in React?

    Why they ask: Keys affect reconciliation correctness and performance, and misuse causes subtle bugs.

    Sample answer: Keys let React match list items between renders, so it knows which items were added, removed or moved. With stable, unique keys like database IDs, React keeps the right component state attached to the right item. Using the array index as a key breaks this when items are reordered or inserted, because state follows the position instead of the item. I fixed a bug in a task board where editing one card's text appeared in a different card after sorting; the list used index keys, and switching to the task ID solved it immediately.

  2. What are common mistakes with useEffect?

    Why they ask: Effect misuse is the most common source of React bugs and performance problems.

    Sample answer: The biggest mistake is using effects for things that are not side effects, like computing derived state from props, which causes extra renders. That should be calculated during render or memoised. Other mistakes are missing dependencies, which leads to stale values, adding objects or functions created every render as dependencies, which causes infinite loops, and forgetting cleanup for subscriptions or timers. For data fetching I now prefer TanStack Query or server components over raw effects. In one codebase, removing about a dozen unnecessary effects simplified components and fixed several flickering UI issues.

  3. When should you use useMemo and useCallback?

    Why they ask: Interviewers check whether you optimise deliberately rather than everywhere.

    Sample answer: useMemo caches a computed value and useCallback caches a function reference between renders. I use them when a calculation is genuinely expensive, like filtering and sorting thousands of rows, or when a stable reference matters because it is passed to a memoised child or used in an effect dependency. Wrapping everything adds complexity and small overhead for little gain. I measure first with the React DevTools Profiler. On a trading dashboard, memoising a grid's row data and the cell renderer callback cut re-render time per price update from around 40 milliseconds to under 10.

  4. How do you decide between context, Redux Toolkit and a server state library?

    Why they ask: This tests architectural judgement about where state belongs.

    Sample answer: I first separate server state, which is data from APIs, from client state, like UI toggles or form drafts. Server state goes into TanStack Query or RTK Query, which handles caching, refetching and invalidation. For client state, I keep it local or lift it as needed. Context works well for low-frequency global values like theme or the current user, but every consumer re-renders when the value changes. For complex, frequently updated client state shared widely, I use Redux Toolkit or Zustand. Moving API data out of Redux into TanStack Query on one project removed a lot of boilerplate.

  5. What are React Server Components and how do they differ from client components?

    Why they ask: This checks knowledge of modern React and Next.js App Router.

    Sample answer: Server components render on the server and send a serialised result to the client, so their code is never shipped in the JavaScript bundle. They can fetch data directly, for example from a database, but cannot use state, effects or browser APIs. Client components, marked with use client, run in the browser and handle interactivity. In Next.js App Router, I keep pages and data-heavy sections as server components and push use client down to small interactive leaves like a filter dropdown. On a product listing page this reduced the client bundle significantly and improved LCP on mobile.

  6. How would you render a list of 10,000 items without freezing the UI?

    Why they ask: This tests performance techniques for real data volumes.

    Sample answer: I would virtualise the list with a library like TanStack Virtual or react-window so only the visible rows plus a small buffer are in the DOM. Rows would be memoised components with stable keys and props. If the data needs filtering, I would debounce the input and use useDeferredValue or startTransition so typing stays responsive while the list updates. If possible, I would also paginate or filter on the server. For a logistics client's shipment table, virtualisation took initial render from several seconds to a few hundred milliseconds and made scrolling smooth.

  7. How do you handle errors in a React application?

    Why they ask: Interviewers check resilience and user experience thinking.

    Sample answer: For rendering errors I use error boundaries around major sections, so one broken widget shows a fallback instead of blanking the whole page. Error boundaries do not catch errors in event handlers or async code, so I handle those with try and catch and show user-friendly messages. For API errors, TanStack Query gives error states I render explicitly, with a retry option. I report errors to a monitoring tool like Sentry with component context. In one release, Sentry showed a crash only on Safari from an unsupported date format, which we fixed within hours.

  8. How do you test React components?

    Why they ask: This shows engineering maturity and quality practices.

    Sample answer: I use React Testing Library with Vitest or Jest and test behaviour the way a user sees it: find elements by role or label, simulate events with user-event and assert on visible output. I avoid testing implementation details like internal state. For API calls I use Mock Service Worker so tests run against realistic responses. Custom hooks get tested with renderHook. For critical flows like checkout I add a few Playwright end-to-end tests. In my last team, focusing tests on user behaviour meant a large refactor from class components to hooks needed almost no test changes.

  9. Tell me about a React feature you built that you are proud of.

    Why they ask: This reveals ownership, technical depth and impact.

    Sample answer: At a fintech startup I built a multi-step loan application form that had been causing high drop-off. I used React Hook Form with Zod schemas per step, saved drafts to the server so users could resume on another device, and added inline validation with clear messages. I made every field keyboard and screen reader accessible and tested on low-end Android phones. Completion rate improved significantly after launch, and support tickets about lost form data dropped close to zero. The form pattern became a shared component for two other teams.

FAQ

Questions people ask about react developer.

Is Next.js required for React interviews in 2026?

Not always, but many React roles now use Next.js. Learn the App Router, server and client components, data fetching and caching basics. Even for single-page apps, understanding server components shows you are current with React's direction.

Do React interviews still ask about class components?

Rarely for new code, but some companies maintain older codebases. Know lifecycle methods and how they map to hooks, such as componentDidMount to an effect with an empty dependency array, in case you work on legacy code.

What should I build to prepare for React interviews?

Build a small app with routing, API data, a form with validation, a list with filters and tests. Use TypeScript. Being able to explain each decision in your own project prepares you for both concept and project questions.

Can I get help on a React project after joining?

Yes. React Job Support from InterviewPlan AI gives live expert-plus-AI help during your first 90 days on a new job, covering tickets, code reviews and stand-ups. It is $5 per hour, and hours never expire.

P.S.

Reading helps. Practising out loud helps more.

Start free with 5 live minutes and 100 AI credits for Resume AI, Job Search, Auto-Apply, mock interviews and Behavioral Coach.