Top 10 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.