React Interview Questions 2026 (With Answers)

React remains the dominant library for building user interfaces, but its ecosystem has evolved dramatically by 2026. With the mature adoption of React Server Components (RSC), concurrent rendering, and advanced hooks, interviews have shifted from testing basic state management to evaluating a deep understanding of React's modern architecture.

Whether you're exploring your first frontend role or aiming for a staff engineering position, preparation is key. We've compiled 50 essential, up-to-date React interview questions, categorized by experience level, to help you ace your next interview.

🟢 Junior Level: Foundations & Basics

At the junior level, interviewers want to ensure you have a solid grasp of React's core principles, component lifecycle, and basic hooks.

1. What is React, and how does it differ from other frameworks like Angular? Answer: React is a JavaScript library for building user interfaces, primarily focused on the view layer. Unlike Angular, which is a full-fledged MVC framework, React relies on external libraries for routing and global state management. It uses a declarative paradigm and a Virtual DOM.
2. What is the Virtual DOM? Answer: The Virtual DOM is a lightweight, in-memory representation of the real DOM. React uses it to computationally determine the minimum number of changes required (reconciliation) before updating the actual browser DOM, improving performance.
3. What is JSX? Answer: JSX is a syntax extension for JavaScript that looks similar to XML/HTML. It is syntactic sugar for React.createElement() calls, making it easier to write and visualize UI components.
4. What is the difference between state and props? Answer: props (properties) are passed down from a parent component and are read-only. state is local and managed within the component itself; changing state triggers a re-render.
5. How do you pass data from a child component to a parent component? Answer: By passing a callback function from the parent to the child via props. The child then calls this function with the data as an argument.
6. What is useState, and how do you use it? Answer: useState is a React Hook that lets you add state variables to functional components. It returns an array with two values: the current state and a function to update it.
7. What is the purpose of the useEffect hook? Answer: useEffect lets you perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM. It runs after the initial render and optionally after specific dependencies change.
8. Why are keys required in React lists? Answer: Keys help React identify which items have changed, been added, or been removed. They give elements a stable identity, minimizing unnecessary re-renders of the list.
9. What is prop drilling, and how can you avoid it? Answer: Prop drilling is passing props through multiple layers of components that don't need the data themselves, just to get it to a deeply nested child. You can avoid it using React Context, Redux, or Zustand.
10. What is a Fragment (<>...</>) in React? Answer: A Fragment lets you group a list of children without adding extra nodes (like extra <div> wrappers) to the DOM.
11. Explain the difference between uncontrolled and controlled components. Answer: A controlled component's form data is handled by React state. An uncontrolled component keeps its own internal state, and you use a ref to access its current value.
12. What does StrictMode do? Answer: StrictMode is a tool for highlighting potential problems in an application. It doesn't render any visible UI but runs extra checks and warnings for its descendants in development mode.
13. How do you handle events in React? Answer: Using camelCase syntax for event handlers (e.g., onClick instead of onclick) and passing a function rather than a string. You also don't return false to prevent default behavior; you must explicitly call e.preventDefault().
14. What are synthetic events in React? Answer: React wraps native browser events in a cross-browser proxy called SyntheticEvent, ensuring consistent behavior across all browsers.
15. What is the difference between null and undefined when passed to an input's value prop? Answer: Passing undefined makes the component uncontrolled. Passing null acts as a controlled component with an explicitly empty value (often leading to a warning if changed back and forth).

🔵 Mid-Level: Data Flow & Architecture

For mid-level developers, the focus shifts to architectural patterns, advanced hooks, and optimizing data flow.

16. Explain the concept of lifting state up. Answer: When multiple child components need to share and react to the same changing data, you move the state up to their closest common parent component.
17. What is Context API, and when should you use it? Answer: The Context API provides a way to pass data through the component tree without having to manually pass props at every level. It's best used for relatively static global data like theme, user authentication status, or language preference.
18. How does useReducer differ from useState? Answer: useReducer is suited for managing more complex state logic that involves multiple sub-values or when the next state depends on the previous one. It follows a Redux-like pattern using actions and a reducer function.

19. What represents the dependency array in useEffect, and what happens if you omit it? Answer: It tells React when to re-run the effect. If omitted, the effect runs after every render. If empty ([]), it runs only once after the initial mount. If it contains variables, it runs when those variables change.
20. Describe the purpose of useMemo and useCallback. Answer: useMemo caches the result of an expensive calculation between renders. useCallback caches a function definition to prevent it from being recreated on every render, which is useful when passing callbacks to optimized child components.
21. What is a custom hook? Answer: A JavaScript function whose name starts with "use" and that calls other React hooks. It allows you to extract and reuse stateful logic across multiple components.
22. What are High-Order Components (HOCs) and are they still relevant? Answer: Functions that take a component and return a new component, injecting additional props or behavior. While still used, custom hooks have largely replaced HOCs for reusing logic.
23. What is ref forwarding? Answer: Using React.forwardRef() allows a component to pass a ref it receives further down to one of its children, which is especially useful in highly reusable UI component libraries.
24. How does error boundary work in React? Answer: Error boundaries are class components that implement static getDerivedStateFromError() or componentDidCatch(). They catch JavaScript errors anywhere in their child component tree and display a fallback UI instead of crashing the whole app.
25. Explain the concept of React Portals. Answer: Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component, useful for modals, tooltips, and popups.
26. What is lazy loading in React? Answer: Using React.lazy() and Suspense to defer loading a component's code until it's actually needed, reducing the initial bundle size and improving load performance.
27. What is the difference between useLayoutEffect and useEffect? Answer: useLayoutEffect fires synchronously after all DOM mutations but before the browser paints the screen. useEffect fires asynchronously after the browser paints.
28. How do you fix the "stale closure" problem in React hooks? Answer: Ensure all reactive variables used inside a hook are included in its dependency array. Alternatively, use functional state updates (setCount(prev => prev + 1)).
29. What is Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)? Answer: CSR renders the UI in the browser entirely via JavaScript. SSR generates the full HTML on the server and sends it to the client, improving initial load times and SEO.
30. What is hydration in React? Answer: The process where React attaches event listeners to the pre-rendered HTML sent from the server (SSR), bringing the static page to life as a fully interactive app.
31. Explain the concept of progressive enhancement in React. Answer: Building apps where core functionality works without JavaScript, and React acts as an enhancement layer once loaded (often integrated tightly with newer frameworks like Next.js or Remix).
32. Why shouldn't you mutate state directly in React? Answer: React won't detect the change because it relies on referential equality to trigger re-renders. Always use the setter function provided by useState, or return a new object/array.
33. What does it mean if a component is "pure"? Answer: A pure component always renders the same output given the same props and state, without causing any side effects. (Historically tied to React.PureComponent and React.memo).
34. How do you optimize context rendering performance? Answer: By splitting large contexts into smaller, granular contexts, or memoizing the value passed to the Provider so children don't re-render unless the underlying data genuinely changes.
35. What are the rules of Hooks? Answer: 1) Only call hooks at the top level (don't call them inside loops, conditions, or nested functions). 2) Only call hooks from React function components or custom hooks.

🟣 Senior Level: Advanced Concepts & Performance

Senior interviews focus heavily on underlying abstractions, avoiding performance bottlenecks, and the newest paradigm shifts like React Server Components.

36. Explain React Server Components (RSC) and how they differ from SSR. Answer: SSR generates HTML on the server but still sends the component's JS code to hydrate the client. RSCs run exclusively on the server, never sending their code to the client, directly returning serialized UI data. They drastically reduce bundle sizes.
37. How does React's Concurrent Mode work under the hood? Answer: It allows React to interrupt a long-running render process to handle high-priority events (like user typing), keeping the UI responsive. It does this by yielding control back to the browser periodically.
38. What is useTransition, and what problem does it solve? Answer: It lets you mark a state update as a non-urgent "transition." React will prioritize urgent updates (like typing) over the transition (like filtering a large list), keeping the app responsive.
39. Explain the useDeferredValue hook. Answer: It lets you defer updating a part of the UI. If you have an urgent state change and a non-urgent UI dependent on it, useDeferredValue provides a stale copy of the value until the urgent render finishes.
40. How would you debug and profile a React performance issue? Answer: By using the React DevTools Profiler to record render times, analyzing components that render unnecessarily, inspecting commit phases, and using Chrome DevTools for deeper JS execution analysis.
41. What is fine-grained reactivity, and how does React compare to frameworks using it (like Solid.js)? Answer: Fine-grained reactivity explicitly tracks individual pieces of state and only updates the precise DOM nodes tied to them. React uses a Virtual DOM to compare full component trees; it doesn't know what changed, only that the component needs a re-render.
42. Explain the role of useSyncExternalStore. Answer: A unified hook provided for library authors (like Redux or Zustand) to read and subscribe to external data sources safely in a concurrent React world, avoiding "tearing" (inconsistent UI states).
43. What is HTML Streaming and how does React handle it? Answer: React can stream HTML from the server to the client in chunks (via renderToPipeableStream). Combined with Suspense, this allows the browser to show parts of the page before the entire UI is generated on the server.
44. What are the architectural trade-offs of using Redux vs Context + useReducer? Answer: Redux brings a single global store, powerful DevTools, middleware, and optimized re-rendering, but introduces boilerplate and bundle size. Context is built-in and simpler but can cause excessive re-renders if not carefully optimized.
45. How does React's event delegation work natively vs earlier versions (pre-v17)? Answer: Before v17, React attached all event handlers to the document object. From v17 onwards, React attaches them to the root DOM container where the React tree is mounted, allowing multiple React versions to coexist peacefully.
46. What is "tearing" in UI concurrency? Answer: A visual inconsistency where a user sees two different values for the same piece of data on the screen at the same time because a high-priority interrupt allowed an external data store to update mid-render.
47. How would you architecture a React application for Micro-Frontends? Answer: Utilizing Webpack Module Federation to load independent React applications dynamically at runtime, ensuring shared dependencies are negotiated to minimize load times.
48. How does the key prop impact component unmounting and mounting? Answer: Changing a key forces React to completely unmount the existing component instance and mount a new one, aggressively resetting its state, which is a powerful pattern for form resets.
49. Explain "waterfalling" in data fetching and how React Server Components address it. Answer: Waterfalling occurs when nested components trigger sequential, slow network requests back to the server. RSCs can fetch data directly on the server concurrently or closely connected to the database, eliminating the client-server latency roundtrips.
50. How do you ensure accessibility (a11y) in a complex React application? Answer: By rigorously using semantic HTML, aria- attributes, managing focus correctly (especially during routing or opening modals using ref), and leveraging tools like eslint-plugin-jsx-a11y.

Final Thoughts

Mastering modern React requires shifting your mental model from simpler lifecycle thinking to understanding concurrency, server-side execution paradigms, and sophisticated reconciliation algorithms.

By familiarizing yourself with these questions, you'll be well-prepared to handle any technical interview challenge in 2026. Good luck! ⚛️