What are the most common React interview questions?

The most frequently asked React interview questions cover hooks (useState, useEffect, useMemo, useCallback), the Virtual DOM and reconciliation, component lifecycle, controlled vs uncontrolled components, Context API vs Redux, performance optimization with React.memo, error boundaries, code splitting with React.lazy, and React Server Components. Most interviewers prioritize depth of understanding over memorizing every API.

What React hooks questions are asked in frontend interviews?

Interviewers commonly ask the difference between useMemo and useCallback, when to use useReducer over useState, why hooks cannot be called conditionally, how to avoid stale closures in useEffect, and what the cleanup function does. Senior-level interviews add questions about useTransition, useDeferredValue, and useImperativeHandle.

What is the difference between React class and function components?

Function components are plain JavaScript functions that accept props and return JSX. Class components extend React.Component, use this.state and this.setState, and implement lifecycle methods. Since hooks were introduced in React 16.8, function components can do everything class components can — and are the modern standard. New code should always use function components.

How do I prepare for a React technical interview?

Focus on hooks deeply — especially useEffect dependency arrays, stale closures, and cleanup functions. Understand the reconciliation process well enough to explain why keys matter. Practice memoization trade-offs (when React.memo helps vs hurts). Be able to discuss state management choices — useState vs useReducer vs Context vs Zustand. Then practice output and behavior questions to build your mental execution model.

What React topics do top tech companies focus on?

Senior React interviews at product companies focus on performance optimization (rendering behavior, memoization, code splitting), state management architecture (Context, Redux, React Query), concurrent features (Suspense, useTransition), and design patterns (HOCs, compound components, render props vs custom hooks). Foundational hook questions are almost always included at every level.

Top 50 React Interview Questions (2025)

React Fundamentals (1–10)

1. What is React and what problem does it solve? React is a declarative UI library that keeps the DOM in sync with application state. Instead of manually updating the DOM on every state change, you describe what the UI should look like, and React figures out the minimum number of changes needed.

2. What is JSX? JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Babel transforms it to React.createElement() calls. It's not required but makes component structure visually clear.

3. What is the Virtual DOM? A lightweight JavaScript object tree that mirrors the real DOM. React diffs the new Virtual DOM against the previous one (reconciliation) and only applies the minimum required changes to the real DOM.

4. What is a React component? A function (or class) that accepts props and returns JSX describing a piece of UI. Function components are the modern standard. Components must return a single root element (or a Fragment).

5. What are props? Read-only inputs passed from parent to child. They make components reusable and parameterized. You cannot modify props inside a component — they are immutable from the child's perspective.

6. What is state? State is data that belongs to a component and can change over time. When state changes, React re-renders the component. Use useState for local state in function components.

7. What is one-way data flow? Data flows from parent to child via props. Children cannot directly modify parent state — they must call callback functions provided as props. This makes data flow predictable and easy to debug.

8. What is the difference between a controlled and uncontrolled component? Controlled: form input value is driven by React state (value + onChange). Uncontrolled: form input manages its own value via the DOM, accessed with a ref. Controlled components are preferred for validation and dynamic behavior.

9. What is a key prop and why is it required in lists? A key is a stable identity hint React uses to match list items across re-renders. Without keys, React can't determine which items were added, removed, or reordered — causing incorrect state association and missed DOM updates.

10. What is reconciliation? The process React uses to determine what changed between renders. React compares component types (same type = update, different type = rebuild) and then keys within lists to produce a minimal set of DOM mutations.

React Hooks (11–30)

11. What are hooks and why were they introduced? Hooks are functions that let function components use state and lifecycle features. Before hooks, function components were stateless; you had to use class components for anything stateful. Hooks removed that need.

12. What are the Rules of Hooks? 1) Only call hooks at the top level — never inside loops, conditions, or nested functions. 2) Only call hooks from React function components or custom hooks. These rules ensure hooks run in the same order every render, preserving state integrity.

13. What does useState return? A tuple: [currentValue, setterFunction]. The setter triggers a re-render with the new value. Passing a function to the setter (functional update) ensures you operate on the latest state, not a stale closure.

const [count, setCount] = useState(0)
setCount(c => c + 1)  // safe: always increments latest count

14. What is useState's lazy initializer? Passing a function to useState(() => expensiveCalc()) means the initializer runs only on the first render. Passing the result (useState(expensiveCalc())) runs it on every render — which defeats the purpose.

15. What does useEffect do? Lets you perform side effects after render: data fetching, subscriptions, DOM mutations, timers. It runs after the browser paints by default.

16. What are the three forms of useEffect's dependency array?

No array: runs after every render

Empty array []: runs once after mount

[dep1, dep2]: runs when any listed dependency changes

17. What is the useEffect cleanup function? The function returned from useEffect. It runs before the next effect fires (cleanup of previous) and when the component unmounts. Use it to cancel timers, abort fetches, and remove event listeners.

useEffect(() => {
  const id = setInterval(() => tick(), 1000)
  return () => clearInterval(id)  // cleanup
}, [])

18. What is useRef? Returns a mutable { current: value } object that persists across renders without causing re-renders when changed. Two uses: 1) DOM node references (ref={myRef}), 2) storing any mutable value that shouldn't trigger re-renders (e.g., a timer ID).

19. What is useMemo? Memoizes the result of an expensive computation and only recomputes when its dependencies change. Useful for expensive derived values to avoid recalculation on every render.

const filtered = useMemo(() => items.filter(i => i.active), [items])

20. What is useCallback? Memoizes a function reference so it remains stable across renders. Needed when passing callbacks to memoized child components — a new function reference on every render would break React.memo's equality check.

21. What is the difference between useMemo and useCallback? useMemo(fn, deps) returns fn's return value. useCallback(fn, deps) returns fn itself. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

22. What is useReducer? An alternative to useState for complex state logic. Takes a (state, action) => newState reducer and an initial state. Returns [state, dispatch]. Best when next state depends on previous state or when state has multiple sub-values.

23. What is useContext? Consumes the nearest value from a React Context. Avoids prop drilling. Any component calling useContext(MyContext) will re-render whenever the context value changes.

24. What are custom hooks? Functions that start with use and call other hooks. They let you extract and reuse stateful logic between components without changing component hierarchy. useFetch, useLocalStorage, useDebounce are common examples.

25. What is useLayoutEffect vs useEffect? Both take the same arguments. useEffect fires asynchronously after the browser paints. useLayoutEffect fires synchronously before paint — use it for DOM measurements that must happen before the user sees anything (prevents flicker). Default to useEffect.

26. What is useId? Generates a stable, unique ID per component instance, safe for server-side rendering. Use for linking labels to inputs (htmlFor/id) when the same component is rendered multiple times.

27. What is useDeferredValue? Accepts a value and returns a deferred version that "lags behind" when the app is busy. Use to keep the UI responsive during expensive re-renders triggered by user input.

28. What is useTransition? Returns [isPending, startTransition]. Marks a state update as non-urgent — React can interrupt it to handle more urgent updates (like user input). Shows a loading indicator via isPending.

29. What is useImperativeHandle? Used with forwardRef to customize the ref exposed to the parent. Instead of exposing the whole DOM node, you expose only specific methods (e.g., { focus, reset }).

30. What does the React Profiler do? The React DevTools Profiler measures render timing and identifies which components re-render and why. Use it to find unnecessary re-renders and validate memoization strategies.

State & Performance (31–40)

31. Why must you not mutate state directly? React uses reference equality to detect state changes. Mutating an existing object/array keeps the same reference — React won't see the change and won't re-render. Always return a new reference.

32. What is React.memo? A higher-order component that wraps a function component and skips re-rendering if props haven't changed (shallow comparison). Requires the parent to pass stable prop references — otherwise React.memo has no effect.

33. What is batching in React 18? React 18 batches all state updates — including those in timeouts, promises, and native event handlers — into a single re-render. Pre-18, only updates inside React event handlers were batched.

34. What is the Reconciler (Fiber)? The internal engine (rewritten in React 16) that implements reconciliation as a pausable, resumable linked-list traversal. Fiber enables time-slicing and concurrent features.

35. What is key prop instability? Using index as key causes React to reuse component instances incorrectly when the list order changes. This mismatches DOM state (input values, focus) with the wrong item. Use a stable unique ID as key.

36. What is prop drilling? Passing props through multiple component layers just to reach a deeply nested child. Solutions: React Context (small-medium scale), state management library (large scale), or component composition.

37. What is the Context re-render problem? When a Context value object is created inline (value={{ user, setUser }}), a new object reference is created on every parent render — making ALL consumers re-render even when the data hasn't changed. Fix: memoize the value with useMemo.

38. When should you use useReducer over useState? When: 1) next state depends on previous, 2) multiple state fields update together, 3) state transitions are complex enough to need named actions, or 4) you want to colocate update logic outside the component.

39. What is server state vs client state? Server state (remote data from APIs) is asynchronous, can go stale, and needs caching/invalidation. React Query and SWR manage it. Client state (UI flags, form values) is synchronous and can stay in useState/Context.

40. What is code splitting in React? Lazily loading parts of your bundle on demand using React.lazy + dynamic import(). Reduces initial bundle size so the app loads faster. Wrap lazy components in }>.

Patterns & Advanced (41–50)

41. What is a Higher-Order Component (HOC)? A function that takes a component and returns a new component with enhanced behavior. HOCs share cross-cutting concerns (auth, logging, theming). Convention: forward props, set displayName, forward refs.

42. What is the render props pattern? Passing a function as a prop to a component, which that component calls to determine what to render. The function receives internal state as its argument. Custom hooks have largely replaced render props.

43. What is a React Portal? ReactDOM.createPortal(children, domNode) renders children into a different DOM node (like document.body) while keeping them in the React tree. Events bubble up through the React tree, not the DOM tree. Used for modals and tooltips.

44. What is an Error Boundary? A class component that catches JavaScript errors in its subtree and displays a fallback UI instead of crashing the whole app. Implements getDerivedStateFromError (render phase) and/or componentDidCatch (commit phase, safe for side effects).

45. What is the Compound Component pattern? Components that share implicit state through Context — like