React Interview Questions: From Beginner to Expert

React remains the dominant UI library in the frontend ecosystem, and interviewers at startups and FAANG companies alike use React-specific questions to measure depth of knowledge [1]. This guide walks you through the most commonly asked questions in order of difficulty—from entry-level fundamentals all the way to expert-tier architecture and React 19 internals—so you can walk into any frontend interview fully prepared.

Beginner: Core Concepts Every Candidate Must Know

1. What is React, and what problem does it solve? React is a JavaScript library for building composable user interfaces maintained by Meta. It solves the problem of keeping the UI in sync with application state by tracking changes and updating only the affected parts of the DOM [2].

2. What is JSX? JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Tooling like Babel compiles JSX down to React.createElement() calls at build time [2].

3. What is the difference between props and state? Props are read-only inputs passed from a parent component to a child; state is mutable data managed internally by a component. When state changes, React re-renders the component and its subtree [3].

4. What is the Virtual DOM? Instead of touching the real browser DOM directly, React first applies changes to a lightweight in-memory representation of the UI. It then diffs the new virtual tree against the previous one and commits only the minimal real DOM mutations required [7].

5. What are controlled vs. uncontrolled components? In a controlled component, form element values are driven by React state via value and onChange. In an uncontrolled component, the DOM owns the value and you read it via a ref [3].

Intermediate: Hooks, Lists, and Side Effects

6. Name the core React Hooks and their purpose. React Hooks—introduced in React 16.8—are functions that enable state and lifecycle features in functional components [1]:

useState – manage local, simple state
useEffect – run side effects such as data fetching or subscriptions
useContext – consume a context value without a wrapper component
useRef – persist a mutable value across renders without causing re-renders
useReducer – handle complex state transitions with explicit action types [2]

7. Why are key props critical in lists? When rendering arrays, React uses key to match elements between renders. Stable, unique keys let React move, insert, and remove items efficiently. Without them, React may unmount and remount items unnecessarily—losing their internal state [1].

8. How does the useEffect dependency array work? An empty array [] runs the effect once on mount. Listing variables makes it re-run whenever those values change. Omitting the array runs it after every render. Common bugs include stale closures and missing dependencies [4].

9. When should you use React Context? Context is ideal for global, low-frequency data like authentication status, locale, or theme. However, if data changes frequently—such as form inputs—every consumer re-renders on each change, which can hurt performance [1]. Split contexts by update frequency and memoize provider values when needed.

10. What is code splitting, and how do you implement it? Code splitting reduces initial bundle size by loading JavaScript on demand. In React, use React.lazy with a dynamic import() and wrap the component in <Suspense fallback={…}> [2].

Advanced: Performance, Reconciliation, and Fiber

11. How does React’s reconciliation algorithm work? Reconciliation is the process React uses to compute the minimal DOM update when state or props change. React builds a new virtual DOM tree, diffs it against the previous one using an O(n) heuristic (elements of different types produce different trees), and then commits the patch in a single synchronous pass [7].

12. What is React Fiber? React Fiber is a complete rewrite of the React core algorithm introduced to enable incremental rendering. It breaks rendering into small units of work, allowing React to pause, prioritize, or abort in-progress renders—powering startTransition, useDeferredValue, and the concurrent rendering model [4].

13. useMemo vs. useCallback—what is the difference? useMemo caches the result of a computation; useCallback caches the function reference itself. Both avoid unnecessary work on re-renders. However, with the React Compiler stable in React 19, most components no longer need these manually—the compiler injects auto-memoization at build time [1]. Reach for them only when profiling reveals a concrete bottleneck [8].

14. What are custom hooks, and why do they matter? Custom hooks are user-defined functions starting with use that extract and share stateful logic between components without altering the component tree. Common examples include useFetch, useDebounce, and useLocalStorage [3].

15. When is useReducer preferable over useState? useReducer shines when state has multiple sub-values or when the next state depends on the previous one in non-trivial ways. It keeps transitions explicit, auditable, and easily testable—following the same pattern as Redux [5].

16. Explain the render and commit phases. React’s work is split into two phases: the render phase (reconciliation), which is interruptible and runs pure functions, and the commit phase, which applies the resulting mutations to the real DOM in a single synchronous pass. This split is what makes concurrent mode safe—the commit is always atomic [7].

Expert: React 19, Server Components, and Architecture

17. What is the React Compiler? The React Compiler is a build-time tool shipped stably with React 19 that automatically injects memoization logic across the component tree. It delivers hand-optimized performance without requiring manual useMemo, useCallback, or React.memo calls in new code [1].

18. What are React Server Components (RSC)? Server Components render exclusively on the server and are never shipped to the browser. They can access databases and file systems directly and compose seamlessly with Client Components. For any Next.js role in 2026, an inability to distinguish a Server Component from a Client Component is effectively disqualifying [5].

19. Explain useActionState. useActionState accepts an action function and initial state, returning [state, dispatchAction, isPending]. Dispatching the action sets isPending to true, runs the function, and replaces state with its return value on resolution—replacing what previously required three separate useState calls for data, loading, and error [6].

20. What is useOptimistic? useOptimistic immediately renders an optimistic version of state while an async action is in-flight, then automatically reverts to the real state once the action settles. It is ideal for likes, chat messages, or list reorders where a network round-trip would feel sluggish [6].

21. How do you architect a large-scale React application? Senior questions probe architectural judgment, not syntax recall. Key considerations include selecting a state management strategy proportional to complexity (local state → Context → Zustand/Redux Toolkit), leveraging RSC for data-heavy server-rendered views, applying route-level code splitting, relying on the React Compiler for memoization, and enforcing a clean separation between UI components and business logic [5].

22. How do you approach performance optimization in React? Performance is a measurement discipline first. Start with the React Profiler and bundle analysis tools before reaching for React.memo or virtualization libraries like react-window. Benchmark Time to Interactive (TTI) to know whether a change actually moved the needle [9].

Beginner: Core Concepts Every Candidate Must Know

Intermediate: Hooks, Lists, and Side Effects

Advanced: Performance, Reconciliation, and Fiber

Expert: React 19, Server Components, and Architecture

Sources