Top 50 React Interview Questions (2026)
Hooks, virtual DOM, state management, performance optimization and component patterns — all covered.
Interview Questions & Answers
What is React?
React is a JavaScript library for building user interfaces, developed by Facebook. It uses a component-based architecture and a virtual DOM to efficiently update and render UI components.
What is the Virtual DOM?
The Virtual DOM is a lightweight JavaScript representation of the real DOM. When state changes, React creates a new virtual DOM, diffs it with the previous one, and only updates the changed parts in the real DOM — making updates very fast.
What are React Hooks?
Hooks are functions that let you use state and other React features in functional components. Introduced in React 16.8. Common hooks: useState, useEffect, useContext, useRef, useMemo, useCallback.
What is the difference between useState and useReducer?
useState is for simple state (string, number, boolean). useReducer is for complex state logic with multiple sub-values or when the next state depends on the previous one. useReducer is similar to Redux.
What is useEffect and when does it run?
useEffect runs side effects in functional components. It runs after render by default. With empty dependency array [], it runs once on mount. With dependencies [value], it runs when dependencies change. Return a cleanup function to avoid memory leaks.
What is the difference between useMemo and useCallback?
useMemo memoizes a computed value — use when you have expensive calculations. useCallback memoizes a function reference — use when passing callbacks to child components to prevent unnecessary re-renders.
What is prop drilling and how to avoid it?
Prop drilling is passing props through multiple component layers that don't need them. Avoid it using: React Context API, Redux/Zustand for global state, or component composition.
What is React Context?
Context provides a way to share data between components without prop drilling. Create with createContext(), provide with Provider, consume with useContext(). Best for: theme, language, auth state.
What is the difference between controlled and uncontrolled components?
Controlled components have their state managed by React via useState — input value is always driven by state. Uncontrolled components manage their own state via DOM using refs. Controlled is preferred for form validation.
What is React.memo?
React.memo is a HOC that memoizes a functional component, preventing re-render if props haven't changed. Use it for components that render the same output given the same props and are expensive to render.
What are keys in React and why are they important?
Keys are unique identifiers for list items in React. They help React identify which items have changed, been added, or removed. Using index as key is an anti-pattern — use unique IDs instead.
What is the component lifecycle?
Mounting: constructor → render → componentDidMount. Updating: render → componentDidUpdate. Unmounting: componentWillUnmount. In functional components, useEffect replaces all lifecycle methods.
What is lazy loading in React?
Lazy loading defers loading components until they are needed. Use React.lazy() with Suspense to code-split your application. This reduces initial bundle size and improves performance.
What is the difference between class and functional components?
Class components use lifecycle methods and this.state. Functional components use hooks. Functional components are simpler, easier to test, and the modern standard. Class components are legacy.
What is Redux and when should you use it?
Redux is a predictable state container for global state management. Use it when: multiple components need the same state, state logic is complex, or you need time-travel debugging. For simpler cases, use Context + useReducer.
What is reconciliation in React?
Reconciliation is the process React uses to diff the virtual DOM and determine the minimum number of DOM operations needed. React uses a heuristic O(n) algorithm assuming elements of different types produce different trees.
What are Higher Order Components (HOC)?
An HOC is a function that takes a component and returns a new enhanced component. Used for reusing component logic (auth checks, logging). Pattern: const EnhancedComponent = hoc(WrappedComponent).
What is useRef?
useRef returns a mutable ref object that persists across renders. Used for: accessing DOM elements directly, storing mutable values that don't trigger re-renders (like timer IDs), and keeping previous state values.
What is code splitting?
Code splitting breaks your bundle into smaller chunks loaded on demand. In React: use React.lazy() + Suspense, dynamic import(), or route-based splitting with React Router. Improves initial load performance.
What are React Portals?
Portals render children into a DOM node outside the parent component hierarchy. Useful for modals, tooltips, and dropdowns that need to visually "break out" of overflow:hidden containers.
Want All 45 React Questions?
Sign up free to access complete notes — DSA, System Design, HR and more.
🚀 Access Full Notes Free →Ready for your React interview?
Build a professional resume to complement your preparation.
Build Free Resume →