25 Must-Know React Interview Questions for 2026 (With Detailed Answers)

Why React Dominates Frontend Interviews

React powers the frontends of Facebook, Instagram, Netflix, Airbnb, and thousands of startups. With over 40% market share among frontend frameworks, React expertise is the most sought-after skill for frontend developers in 2026. Whether you're interviewing for a startup or a FAANG company, these 25 questions will prepare you for what's coming.

Fundamentals (Questions 1-8)

1. What is the Virtual DOM and how does React use it?

The Virtual DOM is a lightweight JavaScript representation of the real DOM. When state changes, React creates a new Virtual DOM tree, diffs it against the previous one (reconciliation), and applies only the minimal set of changes to the real DOM. This makes React fast because direct DOM manipulation is expensive.

2. What is JSX and why does React use it?

JSX is a syntax extension that lets you write HTML-like code in JavaScript. It gets compiled to React.createElement() calls by Babel. JSX makes component code more readable and provides compile-time error checking.

3. Explain the difference between controlled and uncontrolled components.

Controlled components have their form data managed by React state (via useState). Uncontrolled components store form data in the DOM itself (accessed via useRef). Controlled components are preferred because they give you full control over form validation and submission.

4. What are React keys and why are they important?

Keys help React identify which items in a list have changed, been added, or removed. They should be stable, unique identifiers (like database IDs), not array indices. Using array indices as keys can cause subtle bugs when list items are reordered.

5. What is prop drilling and how do you avoid it?

Prop drilling is passing props through multiple intermediate components that don't need them. Solutions include: React Context API for theme/auth data, state management libraries (Zustand, Redux), or component composition patterns.

6. Explain the React component lifecycle.

In functional components with hooks: useState initializes state (mounting), useEffect with dependencies handles side effects (mounting + updating), and useEffect cleanup functions handle unmounting. Class components use componentDidMount, componentDidUpdate, and componentWillUnmount.

7. What is the difference between state and props?

Props are read-only data passed from parent to child. State is mutable data managed within a component. Props flow down, events flow up. When state changes, the component re-renders.

8. How does React handle events differently from vanilla JavaScript?

React uses SyntheticEvents — a cross-browser wrapper around native events. Events are camelCased (onClick vs onclick), handlers receive SyntheticEvent objects, and React uses event delegation at the root level for performance.

Hooks Deep Dive (Questions 9-15)

9. Explain useState vs useReducer. When would you use each?

useState is ideal for simple, independent state values. useReducer is better for complex state logic with multiple sub-values or when the next state depends on the previous one. Think of useReducer as a mini Redux inside your component.

10. What are the rules of hooks?

Two rules: (1) Only call hooks at the top level — never inside loops, conditions, or nested functions. (2) Only call hooks from React function components or custom hooks. These rules ensure hooks maintain consistent order between renders.

11. How does useEffect cleanup work?

The function returned from useEffect runs before the component unmounts AND before the effect re-runs. Common use cases: clearing timers, unsubscribing from WebSockets, canceling API requests, and removing event listeners.

12. What is useMemo and when should you use it?

useMemo memoizes expensive computed values. Only use it when you have a demonstrably expensive calculation AND its dependencies don't change on every render. Don't prematurely optimize — measure first.

13. Explain useCallback and its relationship with React.memo.

useCallback memoizes function references. Combined with React.memo on child components, it prevents unnecessary re-renders when parent state changes but the callback's dependencies haven't.

14. What is useRef and how does it differ from useState?

useRef creates a mutable reference that persists across renders without causing re-renders when updated. Common uses: accessing DOM elements, storing previous values, and holding mutable values like timer IDs.

15. How do you create a custom hook? Give an example.

A custom hook is a function starting with "use" that encapsulates reusable stateful logic. Example: useFetch(url) that manages loading, data, and error states for API calls. Custom hooks can use other hooks internally.

Performance & Advanced (Questions 16-21)

16. How do you optimize React app performance?

Key strategies: React.memo for preventing unnecessary re-renders, code splitting with React.lazy and Suspense, virtualization for long lists (react-window), useMemo/useCallback for expensive operations, and proper key usage in lists.

17. What is code splitting and how does React implement it?

Code splitting breaks your bundle into smaller chunks loaded on demand. React uses React.lazy() for component-level splitting and Suspense for showing fallback UI while loading. Route-based splitting is the most impactful strategy.

18. Explain React's reconciliation algorithm.

React uses a heuristic O(n) diffing algorithm: (1) Elements of different types produce different trees. (2) Keys indicate which children are stable across renders. (3) React compares same-level nodes and batches DOM updates for efficiency.

19. What are React Server Components?

Server Components render on the server with zero client-side JavaScript. They can directly access databases, file systems, and APIs. They reduce bundle size and improve performance. Client Components handle interactivity. Next.js 14+ uses this by default.

20. What is Suspense and how is it used in React 19?

Suspense lets you declaratively handle loading states. In React 19, it works with Server Components for streaming SSR, data fetching, and code splitting — providing a unified way to handle async operations in your component tree.

21. Explain React's error boundaries.

Error boundaries are components that catch JavaScript errors in their child component tree, log them, and display a fallback UI instead of crashing the entire app. They're implemented using componentDidCatch and getDerivedStateFromError in class components.

State Management & Patterns (Questions 22-25)

22. Compare Context API, Redux, and Zustand.

Context API: Built-in, great for low-frequency updates (themes, auth). Can cause unnecessary re-renders. Redux: Powerful but verbose, best for complex state with middleware needs. Zustand: Lightweight, minimal boilerplate, great DX — increasingly the go-to choice in 2026.

23. What is the React Compiler (React Forget)?

The React Compiler automatically memoizes components and values, potentially eliminating the need for manual useMemo, useCallback, and React.memo. It analyzes your code at build time and adds optimizations automatically.

24. Explain the render props pattern vs custom hooks.

Both share logic between components. Render props pass a function as a prop to control rendering. Custom hooks extract reusable logic into functions. Hooks are generally preferred in modern React as they're cleaner and avoid "wrapper hell."

25. How do you handle authentication in a React app?

Common pattern: Store JWT/session token after login, use React Context to provide auth state globally, create a ProtectedRoute component that redirects unauthenticated users, and include tokens in API request headers via an Axios interceptor.

Ace Your React Interview with MockExperts

Reading answers is just step one. To truly prepare, you need to explain these concepts out loud under pressure — just like a real interview. MockExperts' AI interviewer asks follow-up questions, challenges your understanding, and provides detailed feedback on your explanations.

Try a free AI mock interview now and see where you stand.