Top 50 React Interview Questions and Answers

React remains the dominant frontend library in the industry. However, the expectations for React developers have shifted drastically. Interviewers no longer ask about Class Components or componentDidMount.

Today, React interviews focus heavily on React Server Components (RSC), Hooks deep-dives, Performance Optimization (memoization), and State Architecture.

Here are the most highly-tested React interview questions for 2026.

1. Core Architecture

Q: Explain the React Virtual DOM and the Reconciliation process.

Answer: React creates an in-memory representation of the real DOM called the Virtual DOM. When state changes, React generates a new Virtual DOM tree. The Reconciliation process uses a diffing algorithm to compare the new tree with the old tree. It identifies the exact changes needed (the "diff") and applies only those specific updates to the real DOM in a single batch. This minimizes expensive DOM manipulations.

Q: What is the purpose of the key prop in React lists?

Answer: The key prop is crucial for the Reconciliation algorithm. When rendering lists, React uses the key to uniquely identify elements. If an item is added, removed, or reordered, the key allows React to move the existing DOM node rather than destroying and recreating it from scratch. Never use the array index as a key if the list can be reordered, as it leads to unpredictable UI bugs and severe performance degradation.

2. Advanced Hooks

Q: Explain the difference between useMemo and useCallback.

Answer: Both hooks are used for performance optimization via memoization, but they memoize different things:

• useMemo memoizes the result of a heavy computation. It only recalculates the value when its dependencies change.
• useCallback memoizes a function instance. It returns the exact same function reference across re-renders unless its dependencies change. It is primarily used to prevent unnecessary re-renders of child components that are wrapped in React.memo and receive functions as props.

Q: What is a "stale closure" in React, and how does it happen with useEffect?

Answer: A stale closure occurs when a function (like a setTimeout inside a useEffect) captures variables from the scope of an older render, rather than the current state. This happens when you forget to include a state variable in the dependency array of the useEffect. React doesn't update the closure, so the function executes using outdated state values.

3. React 19 & Server Components

Q: What are React Server Components (RSC)?

Answer: RSCs are components that render exclusively on the server. Unlike traditional SSR (Server-Side Rendering) which sends HTML and a massive JavaScript bundle for hydration, Server Components send serialized UI directly to the client and send zero JavaScript to the browser. This drastically reduces bundle sizes and allows components to securely access server-side resources (like databases) directly.

Q: How do you pass data from a Server Component to a Client Component?

Answer: You pass data as standard props. However, the data must be serializable. You cannot pass functions, classes, or complex dates from a Server Component to a Client Component because they cannot be serialized across the network boundary.

4. Performance Optimization

Q: How do you prevent a component from re-rendering?

Answer:

1. State Colocation: Move state as far down the component tree as possible so state changes only affect the specific children that need it.
2. React.memo: Wrap the component in React.memo to skip rendering if its props haven't changed.
3. useMemo / useCallback: Ensure that objects and functions passed as props to memoized children maintain stable references.

Q: What is the Context API problem with performance?

Answer: When the value of a React Context provider changes, every single component that consumes that context via useContext will re-render, regardless of whether they actually care about the specific piece of state that changed. Solution: Split large contexts into smaller, granular contexts, or use a state management library like Zustand or Redux that supports selector-based subscriptions to prevent unnecessary renders.

[!TIP] Nail the Interview: The best way to pass a Senior React interview is not just to know the definitions, but to explain the trade-offs. When answering a question about useMemo, explain that it actually has a memory cost, and you shouldn't use it on cheap calculations!