30 React Interview Questions for 2026 Roles

30 React interview questions with spoken-style answers for freshers, mid-level, and senior roles—covering hooks, Suspense, Server Components, and more.

React Interview Questions: 30 Most Asked (2026)

Most React interview question guides fall into two traps. Either they list 100 questions with one-sentence definitions nobody can actually say out loud, or they stop at class-component trivia that hasn't been relevant for years. Neither helps you in a real interview.

This page covers 30 React interview questions — the ones that actually come up — split into three tiers: fresher, mid-level, and experienced. Every answer is written so you can speak it, not just scan it. Modern React (hooks, Suspense, Server Components, React Query) is the focus. Class-component lifecycle methods show up only where interviewers still ask about them.

How these questions are organized

Three tiers, based on what interviewers expect at each level:

• Fresher (Q1–Q10): Core concepts. You need crisp, confident answers. Interviewers are checking whether you understand the model, not whether you've memorized the docs.
• Mid-level (Q11–Q20): Hooks depth, performance tradeoffs, architecture decisions. Interviewers want to hear you reason about when and why, not just what.
• Experienced (Q21–Q30): System design, debugging, modern patterns. Expect follow-ups. The answer starts a conversation, not ends one.

One thing worth internalizing: interviewers care about your thought process and your ability to explain decisions, not perfect recall. A recruiter-side perspective on React interviews put it well — the goal is to see how you think, not whether you've memorized trivia. That framing applies to every question below.

React interview questions for freshers

Q1 — What is React and why do companies use it?

React is a JavaScript library for building user interfaces using a component-based model. You compose your UI from small, reusable pieces, each managing its own logic and rendering. The Virtual DOM makes updates fast by diffing changes and only touching the real DOM where needed. Companies like Facebook, Instagram, Netflix, and Airbnb use it because the component model scales well across large teams and codebases.

Q2 — What is JSX and how does the browser understand it?

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Browsers don't understand it directly — a build tool like Babel or the TypeScript compiler transpiles JSX into `React.createElement()` calls before the code ships. Interviewers ask this to check whether you understand the build pipeline, not just the syntax.

Q3 — What is the Virtual DOM and how does reconciliation work?

The Virtual DOM is a lightweight in-memory representation of the real DOM. When state changes, React builds a new Virtual DOM tree, diffs it against the previous one, and applies only the minimal set of real DOM updates needed. This process is called reconciliation. It's what makes React fast without you manually managing DOM mutations.

Q4 — What is the difference between props and state?

Props are read-only data passed from a parent component to a child. State is local, mutable data owned by the component itself. A controlled input, for example, gets its value from state and updates it via an `onChange` handler — the component drives the DOM, not the other way around.

Q5 — What are React Fragments and why use them?

Fragments let you group multiple elements without adding an extra DOM node. Use `<React.Fragment>` or the shorthand `<>...</>`. This matters when wrapper `<div>`s would break your CSS layout or add meaningless nodes to the accessibility tree.

Q6 — What is the difference between a controlled and uncontrolled component?

A controlled component stores its form value in React state — you set `value` and handle `onChange`. An uncontrolled component lets the DOM hold the value and you read it with a `ref` when you need it. Controlled is the default recommendation; uncontrolled is useful for simple forms or integrating with non-React code.

Q7 — What are keys in lists and why do they matter?

Keys give React a stable identity for each list item during reconciliation. Without them (or with array indices as keys), React can't reliably track which items changed, moved, or were removed — leading to bugs and wasted re-renders. Use a unique, stable identifier from your data.

Q8 — What is useState and when would you use it?

`useState` is the basic hook for adding local state to a function component. It returns the current value and a setter function. For updates that depend on the previous value, use the functional form: `setValue(prev => prev + 1)`. This avoids stale-closure bugs in async code.

Q9 — What does useEffect do and what is the dependency array?

`useEffect` runs side effects after render — data fetching, subscriptions, manual DOM changes. The dependency array controls when it re-runs: an empty array means "mount only," specific values mean "re-run when these change," and no array means "every render." Return a cleanup function for subscriptions or timers.

Q10 — What is lifting state up?

When two sibling components need to share state, you move that state to their nearest common ancestor and pass it down as props. This is React's primary pattern for shared state before you reach for Context or an external store.

React interview questions for mid level developers

Q11 — When would you use useReducer instead of useState ?

`useReducer` is a better fit when your state has multiple sub-values that update together, or when the next state depends on the previous one in complex ways. It centralizes update logic into a reducer function and dispatches actions — similar to Redux, but local to the component.

Q12 — What is useCallback and when does it actually help?

`useCallback` memoizes a function reference so it stays stable across renders. It helps when you pass callbacks to memoized child components (`React.memo`) — without it, the child re-renders every time because the function reference changes. If the child isn't memoized, `useCallback` adds overhead for no benefit.

Q13 — What is useMemo and how is it different from useCallback ?

`useMemo` memoizes a computed value; `useCallback` memoizes a function reference. Common misconception: `useMemo` is a free optimization. It isn't — it adds memory overhead and comparison cost. Use it when the computation is genuinely expensive or when the result is passed as a prop to a memoized child.

Q14 — What are custom hooks and when should you write one?

A custom hook is a function starting with `use` that encapsulates stateful logic. Write one when you find yourself duplicating the same `useState` + `useEffect` pattern across components — `useFetch`, `useDebounce`, `useLocalStorage` are classic examples. They share logic, not UI.

Q15 — What is prop drilling and how do you fix it?

Prop drilling is passing data through multiple intermediate components that don't use it, just to reach a deeply nested child. The first fix is the Context API. If your context updates frequently and causes unnecessary re-renders, consider Zustand for lightweight global state or Redux Toolkit for complex state graphs.

Q16 — What is React Context and what are its performance pitfalls?

Context lets you share values across a component tree without prop drilling. The pitfall: every consumer re-renders whenever the context value changes — even if the specific slice they use didn't change. Mitigations include splitting contexts by concern, memoizing the value object, and keeping frequently-changing state out of context.

Q17 — What is React.memo and when does it help?

`React.memo` wraps a component and skips re-rendering if its props haven't changed (shallow comparison). It backfires when you pass new object or function references on every render — the shallow comparison always fails, so the memo check runs but never saves anything. Pair it with `useMemo` and `useCallback` on the parent side.

Q18 — What is the difference between useEffect and useLayoutEffect ?

Both run after render, but `useLayoutEffect` fires synchronously before the browser paints. Use it when you need to read layout measurements (like element dimensions) and make a synchronous DOM update to avoid a visible flicker. For everything else — data fetching, subscriptions, logging — `useEffect` is correct.

Q19 — What is an error boundary and how do you implement one?

An error boundary is a class component that catches JavaScript errors in its child tree and renders a fallback UI instead of crashing the whole app. You implement it with `static getDerivedStateFromError()` and optionally `componentDidCatch()`. Place them around route-level sections or feature boundaries. There's no hook equivalent yet.

Q20 — How does React Router v6 differ from v5?

v6 replaced `Switch` with `Routes`, `useHistory` with `useNavigate`, and introduced relative paths by default. Nested routes are declared inside the parent route element using `<Outlet>`, making layouts more composable. If you're upgrading, the biggest change is that route matching is now ranked, not first-match.

React interview questions for experienced developers

Expect follow-ups here. The initial answer opens the conversation — the interviewer will push on tradeoffs, alternatives, and real-world scenarios.

Q21 — What is the React Fiber architecture and why was it introduced?

Fiber is React's internal reconciliation engine, introduced in React 16 to replace the old synchronous, recursive stack reconciler. It breaks rendering work into units that can be paused, prioritized, and resumed. This enables Concurrent Mode features like Suspense and `useTransition` — without Fiber, React couldn't interrupt a long render to handle a high-priority update.

Q22 — What is Suspense and how does it work with data fetching?

Suspense lets you declaratively specify a loading state for a subtree. A component "suspends" by throwing a promise; Suspense catches it and renders the fallback until the promise resolves. For data fetching, libraries like React Query and SWR integrate with Suspense so you can write `const data = useSuspenseQuery(...)` and let the boundary handle loading. React 18 made this pattern stable.

Q23 — What are React Server Components and how do they differ from SSR?

Server Components run only on the server and send serialized UI to the client — zero client-side JavaScript for those components. SSR renders the full tree to HTML on the server but still ships the entire JS bundle for hydration on the client. Server Components reduce bundle size and keep sensitive logic server-side. In practice, you encounter them in the Next.js App Router, where files are Server Components by default unless you add `"use client"`.

Q24 — When would you choose Zustand, Redux Toolkit, or React Query for state?

Tier it by what the state represents. Local UI state (modal open, form input) → `useState` or `useReducer`. Shared UI state across a few components → Context or Zustand. Server state (data from an API that needs caching, revalidation, background refresh) → React Query or SWR. Complex global state with many reducers, middleware, and devtools needs → Redux Toolkit. Most apps reach for Redux when React Query plus Zustand already covers what they actually need.

Q25 — How do you debug unnecessary re renders in a React app?

Start with the React DevTools Profiler — it shows which components re-rendered and why. Look for referential instability: new objects or functions created on every render that break `React.memo` checks. The `why-did-you-render` library automates that detection. Common culprits are inline object props, unstable context values, and missing `useCallback`/`useMemo` on parent-side references.

Q26 — What is code splitting and how do you implement it in React?

Code splitting breaks your bundle into smaller chunks loaded on demand. In React, use `React.lazy()` with `<Suspense>` for component-level splitting. Route-level splitting is the highest-impact starting point — each route loads its own chunk. Use a bundle analyzer to find the largest modules and split those next.

Q27 — What is hydration and what causes hydration errors?

Hydration is the process where React attaches event listeners and state to the server-rendered HTML on the client. If the client tree doesn't match the server HTML — different text, missing nodes, conditional rendering based on `window` — React throws a hydration mismatch error. Fix it by ensuring the same output on both sides, or use `useEffect` for client-only logic that runs after hydration.

Q28 — What is forwardRef and when do you need it?

`forwardRef` lets a parent pass a `ref` through a component to a child DOM element inside it. You need it when building reusable UI components (buttons, inputs, modals) where the consumer needs direct DOM access for focus management, measurement, or animation. Without `forwardRef`, the ref stops at the wrapper component.

Q29 — How would you design a large React app's folder and state structure?

Feature-based folders over type-based folders. Co-locate components, hooks, tests, and styles by feature rather than spreading them across global `/components`, `/hooks`, `/styles` directories. Keep state as local as possible — lift only when siblings need it, use Context or Zustand for cross-feature state, and avoid premature global state. This is an open-ended question — interviewers want to hear your reasoning and tradeoffs, not a single correct answer.

Q30 — What is a SyntheticEvent and why does event.target.value fail inside a setTimeout ?

React wraps native browser events in SyntheticEvent objects for cross-browser consistency. In older React versions (pre-17), these events were pooled and reused — their properties were nullified after the event handler returned. If you accessed `event.target.value` inside a `setTimeout`, the event had already been cleared and the value was `null`. The fix was `event.persist()`. React 17+ removed pooling, but interviewers still ask this because it tests whether you understand the async timing trap and React's event system internals.

How to practice React interview questions

Reading answers is step one. Saying them out loud is where the real prep happens. Pick a question, close the answer, and explain it as if you're talking to an interviewer. Then check your reasoning against the answer above. If you stumbled on the why, not just the what, that's the gap to close.

Interviewers are evaluating your thought process — how you reason through a problem, how you explain tradeoffs, how you recover when you're not sure. That matters more than perfect recall.

If you want to practice with real-time feedback, Verve AI's mock interview lets you run through React questions with an AI interviewer that listens and responds like a real person. The Interview Copilot does the same thing during live interviews — it listens to the conversation and suggests answers in real time, invisible to the interviewer. Both are useful for different stages: mock for prep, copilot for the real thing.

---

Thirty questions, three levels, modern React. Pick the tier that matches the role you're targeting and drill those first. The fresher section should be automatic. The mid-level section should feel comfortable. The experienced section is where you should spend most of your time if you're aiming for senior roles — those are the questions where your reasoning matters more than your answer.