React Interview Questions & Answers for 2026

The Virtual DOM is a lightweight JavaScript representation of the real DOM. When state or props change React creates a new Virtual DOM tree, diffs it against the previous one using a reconciliation algorithm (Fiber), and computes the minimum set of real DOM operations needed. This diffing assumes elements of the same type produce similar trees and uses keys to match list items. Reconciliation makes React fast by batching DOM updates and avoiding expensive full re-renders.

Only call hooks at the top level of a function component — never inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. These rules exist because React tracks hook calls by their order of invocation. If hooks are called conditionally the order changes between renders and React cannot correctly associate state with the right hook. The eslint-plugin-react-hooks enforces these rules automatically.

Both run after render but at different times. useEffect runs asynchronously after the browser paints — it does not block the visual update, making it suitable for data fetching, subscriptions, and logging. useLayoutEffect runs synchronously after React mutates the DOM but before the browser paints — use it when you need to measure DOM elements or prevent flicker from an immediate DOM update. In practice use useEffect by default and switch to useLayoutEffect only when you observe visual glitches.

React Context is built-in and suitable for low-frequency updates like theme, locale, and auth state. Every component consuming the context re-renders when the value changes, which causes performance issues for frequently-updated state like form data or lists. Redux (or Zustand/Jotai) maintains state outside the component tree and allows granular subscriptions so components only re-render when their specific slice changes. Choose Context for simple global values, Redux/Zustand for complex shared state with frequent updates.

React.memo is a higher-order component that memoises a functional component and skips re-rendering if its props have not changed (shallow comparison). Use it for components that are expensive to render and receive the same props frequently — for example, a large list item inside a list that re-renders when parent state changes. Do not use it everywhere; the comparison itself has a cost. Pair it with useCallback for function props and useMemo for object props, otherwise the shallow comparison always fails.

Code splitting breaks the JavaScript bundle into smaller chunks that are loaded on demand. React.lazy() allows lazy-loading a component: const Chart = React.lazy(() => import("./Chart")). Wrap it in Suspense with a fallback UI while it loads. Route-level code splitting is the most impactful — each page loads its own bundle only when visited. This reduces initial bundle size, improves Time to Interactive, and is critical for large applications. Webpack and Vite both handle the chunk splitting automatically.

In a controlled component the form element value is stored in React state and updated via onChange handlers — React is the single source of truth. In an uncontrolled component the DOM itself holds the value and you read it via a ref when needed. Controlled components give you real-time validation, conditional field enabling, and consistent state but require more boilerplate. Uncontrolled components are simpler for one-time reads like file uploads. React Hook Form bridges both approaches for performance.

Start by profiling with React DevTools Profiler to identify which components re-render too often. Common fixes: add React.memo to expensive child components, useCallback for event handlers passed as props, useMemo for expensive computed values, and code split with React.lazy at the route level. Virtualise long lists using react-window. Avoid deriving state in render — compute it once outside. Keep state as low in the tree as possible to limit re-render scope. Measure before and after every change.