Top 20 ReactInterview Questions & Answers (2025)

React is a JavaScript library for building user interfaces, developed by Facebook. Its key features are the Virtual DOM for efficient updates, a component-based architecture for reusability, unidirectional data flow for predictable state management, JSX syntax for declarative UI, and hooks for state and side effects in functional components.

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup inside JavaScript. Babel transforms it into React.createElement() calls at build time. JSX is optional but makes component code far more readable — <Button color='red'>Click</Button> is much clearer than React.createElement(Button, {color:'red'}, 'Click').

The Virtual DOM is a lightweight in-memory JavaScript representation of the real DOM. When state changes, React builds a new Virtual DOM tree, diffs it against the previous one (reconciliation), and applies only the changed nodes to the real DOM. This batched, minimal update strategy avoids expensive full DOM re-renders.

Hooks are functions that let functional components use state and lifecycle features. The most common: useState (local state), useEffect (side effects), useContext (consume Context), useRef (mutable refs / DOM access), useMemo (memoize computed values), useCallback (memoize functions), and useReducer (complex state logic).

useState is ideal for simple, independent state values. useReducer is better when the next state depends on the previous state or when multiple sub-values need coordinated updates. useReducer takes a reducer function and initial state, returning the current state and a dispatch function — similar to Redux but local to the component.

useEffect runs side effects after render. With no dependency array it runs after every render; with [] it runs once on mount; with specific values it runs when those values change. The optional cleanup function runs before the next effect and on unmount — use it to cancel subscriptions, timers, or fetch requests.

In a controlled component React state is the single source of truth for the input's value — every keystroke triggers setState via onChange. In an uncontrolled component the DOM manages the value and you read it via a ref when needed. Controlled components are easier to validate and test; uncontrolled components are simpler for quick one-off inputs.

Props are read-only data passed from parent to child — a component cannot modify its own props. State is mutable data owned by the component that, when changed via setState/useState, triggers a re-render. Data flows downward through props; to pass data upward you pass callback functions as props.

Prop drilling is threading props through multiple intermediate components that don't use them, just to reach a deeply nested child. Solutions: React Context API for low-frequency global data (theme, auth), a state manager like Redux or Zustand for complex apps, or component composition patterns that reduce nesting depth.

Context provides a way to share values between components without explicitly passing props at every level. You create a context with React.createContext(), provide it via a Provider component, and consume it anywhere in the tree with useContext(). Best for values that rarely change — frequent updates in Context cause every consumer to re-render.

React.memo is a higher-order component that skips re-rendering a functional component if its props haven't changed (shallow comparison). Use it when a child component is expensive to render and its parent re-renders often. Don't use it everywhere — the comparison itself has a cost and shallow equality checks can miss nested object changes.

useMemo memoizes the return value of a function — the computation doesn't re-run unless dependencies change. useCallback memoizes the function reference itself. Use useMemo to avoid expensive recalculations; use useCallback to give a stable function reference to child components wrapped in React.memo, preventing them from re-rendering due to a new function instance each render.

useRef returns a mutable { current } object that persists across renders. Mutating .current does NOT trigger a re-render — unlike useState. Common uses: holding a reference to a DOM element (for focus, scroll, measurements) or storing a mutable value like a timer ID or the previous state value.

Keys are stable identifiers that help React track which list items changed, were added, or removed during reconciliation. Without keys, React re-renders all items on any change. Using array index as key causes bugs when items are reordered because React maps state to index, not to the actual item. Always use a stable, unique ID from your data.

Mounting: component is created and inserted (useEffect with [] runs after). Updating: state or props change, component re-renders (useEffect with dependencies runs after). Unmounting: component is removed (useEffect cleanup function runs). The cleanup function in useEffect fully replaces componentWillUnmount from class components.

Code splitting breaks your JavaScript bundle into smaller chunks loaded on demand, reducing initial page load time. In React, use React.lazy(() => import('./Component')) combined with <Suspense fallback={<Spinner/>}>. Route-based splitting — lazy loading each page/route — gives the highest performance gain for most apps.

A HOC is a function that takes a component and returns a new enhanced component with additional props or behavior. Common patterns: withAuth (checks login before rendering), withLogger, or withTheme. HOCs add power but make component trees harder to trace; custom hooks are the modern preferred alternative for sharing logic between components.

Custom hooks are JavaScript functions whose name starts with 'use' that can call other hooks. They let you extract and share stateful logic between components without changing the component tree. Examples: useFetch (API calls with loading/error state), useLocalStorage, useDebounce — all reusable across any component.

Context API is simple and built-in, suitable for low-frequency global state like auth or theme. Redux provides a single predictable state tree, middleware (Thunk, Saga) for async logic, and excellent devtools for time-travel debugging. Use Context for simple needs; use Redux (or Zustand, Jotai) when state is complex, frequently updated, or shared across many unrelated components.

SSR renders React components on the server to full HTML, sends it to the browser for fast first paint, then hydrates it with JavaScript for interactivity. Benefits: improved SEO and faster Time to First Byte. Next.js is the standard tool — use getServerSideProps for per-request SSR or getStaticProps for build-time static generation (SSG).