Top 20 React Interview Questions for 2026

The Virtual DOM is a lightweight copy of the real DOM. When state changes, React updates the Virtual DOM first. It then compares this updated Virtual DOM with the previous version (a process called 'diffing'). Once it identifies the differences, React efficiently updates only the changed elements in the real DOM (reconciliation). This minimizes direct manipulation of the slow real DOM, improving performance.

Hooks let you use state and other React features in functional components. 'useState' manages local state. 'useEffect' handles side effects (fetching data, subscriptions). 'useMemo' memoizes expensive calculations to avoid re-computation on every render. 'useCallback' memoizes functions to prevent them from being recreated on every render, useful for passing callbacks to optimized child components.

Prop drilling occurs when data is passed from a parent component down to a deeply nested child through multiple intermediate components that don't need the data themselves. It makes code hard to maintain. It can be avoided by using the Context API for global state, or state management libraries like Redux or Zustand. Component composition (passing components as children or props) is another effective solution.

In controlled components, form data is handled by React state; the input's value is controlled by React. In uncontrolled components, form data is handled by the DOM itself using refs. Controlled components offer more flexible data manipulation and validation, while uncontrolled components can be simpler for integrating with non-React code or simple forms.

The Context API provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. It is designed to share data that can be considered 'global' for a tree of React components, such as the current authenticated user, theme, or preferred language. Use it to avoid prop drilling for global data.

Redux is a predictable state container for JavaScript apps. It helps write applications that behave consistently by storing the entire state of the application in a single central store. State updates are triggered by dispatching 'actions' which are handled by pure functions called 'reducers'. It's useful for complex applications with frequent state updates, deep component trees, or when different parts of the app need to access the same state.

Keys are special string attributes you need to include when creating lists of elements. They help React identify which items have changes, been added, or been removed. Keys give the elements a stable identity, which is crucial for efficient reconciliation/DOM updates. Using index as a key is discouraged if the order of items may change, as it can negatively impact performance and component state.

TypeScript adds static typing to React, allowing you to define shapes for props (Interfaces) and state. This catches errors at compile time and improves developer experience with autocompletion. ESLint is a linter that finds and fixes problems in your code. In React, specific plugins (like eslint-plugin-react-hooks) ensure you follow best practices, such as correctly declaring hook dependencies to prevent bugs.

Optimization techniques include: 1) Memoization using React.memo, useMemo, and useCallback to prevent unnecessary re-renders. 2) Code-splitting using React.lazy and Suspense to load components only when needed. 3) Virtualization (e.g., react-window) for rendering large lists efficiently. 4) Keeping state local when possible. 5) Optimizing images and assets. 6) Using the Production Build to minify code.

A Higher-Order Component (HOC) is a function that takes a component and returns a new component, reusing component logic. They were common class-based patterns for cross-cutting concerns (like logging or auth) but are often replaced by Hooks today.

Render Props is a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

Fragments allow you to group a list of children without adding extra nodes to the DOM. React components must return a single parent. Fragments (<>...</>) let you return multiple elements without wrapping them in a redundant <div>.

Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI. They serve as a catch block for the component tree. Note: They must be class components.

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, or popups to break out of overflow:hidden or z-index constraints.

CSR (Client-Side Rendering) builds UI in the browser (good for Apps). SSR (Server-Side Rendering) builds HTML on server per request (good for SEO). SSG (Static Site Generation) builds HTML at build time (fastest, good for blogs). Next.js supports all three.

Class components help manage state and lifecycle methods using ES6 classes. Functional components are plain JS functions using Hooks for state. Functional components are now the standard due to simpler syntax and hooks support.

A Custom Hook is a JavaScript function starting with 'use' that calls other hooks. It extracts reusable logic (like fetching data or tracking window size) from components, keeping them clean and DRY.

Synthetic Events are React's cross-browser wrapper around the browser's native event. They ensure events work identically across all browsers and have the same interface as native events (e.g., preventDefault()).

StrictMode highlights potential problems in an application. It runs checks in development mode only, such as detecting unsafe lifecycles or unexpected side effects by double-invoking constructors and hooks.

JSX is a syntax extension for JavaScript that looks like HTML. It makes writing UI components intuitive. Under the hood, it compiles to React.createElement() calls.