React Interview Questions
25 React interview questions with worked answers, complexity notes, and runnable code you can edit in the browser — ordered easy to hard so you build up steadily. Free, no signup. Open any question for the full answer.
The mental model behind the hooks
“What is a hook” gets you nowhere; the interview wants the model underneath. React works in phases: it renders (calls your components to produce a description of the UI), reconciles (diffs that description against the previous one), and commits (applies the minimal set of DOM changes). Effects run after commit, not during render, which is why you cannot read layout in the render body and why the dependency array matters so much. If you can narrate that cycle, most React questions decompose into “which phase is this about?”
Re-renders are the topic that separates comfort from mastery. A component re-renders when its state changes, when its parent re-renders, or when a context value it reads changes — and understanding this is how you diagnose the sluggish app. The fixes follow from referential identity: useMemo and useCallback preserve the identity of values and functions across renders so that memoized children and effect dependencies do not fire needlessly. Used without a reason, they are noise; used to stabilize a specific reference, they are the tool.
State management is a placement question before it is a library question: does this state belong local to a component, lifted to a shared parent, in context, in the URL, or on the server? Getting that right eliminates most of the problems a state library is brought in to solve. Increasingly, interviews add a machine-coding round — build a typeahead, a modal, a tabs component live — which tests whether you can turn this model into working code under time pressure. These questions build from the render model up to exactly that.
Easy
- render → reconcile → commit Mental Model
Walk through what happens when state changes. What are the three phases? - Rules of Hooks — and why Hooks Rules
What are the rules of hooks? Why can't you call a hook inside a condition? - Controlled vs uncontrolled inputs Forms & State Ownership
What is the difference between a controlled and an uncontrolled input, and when do you choose each? - What JSX compiles to JSX Fundamentals
What is JSX, really? What does ` ` compile to, and why must components be capitalized? - useRef as a mutable instance variable Refs
Besides pointing at a DOM node, what is useRef for? How is a ref different from state, and when do you reach for one? - Lifting state up & colocation State Management
Two sibling components need the same data. Where should the state live? What are 'lifting state up' and 'colocation'?
Medium
- useEffect dependencies & cleanup Effects
Explain the dependency array and cleanup. What's the fetch-in-effect race condition and how do you fix it? - useMemo, useCallback & React.memo Referential Identity
When do useMemo / useCallback actually help? Why does passing an inline object/function break React.memo? - Context vs Redux — when to use which State Management
When is Context enough and when do you reach for Redux? What's the Context re-render pitfall? - Extract logic into a custom hook Custom Hooks
Write a reusable useDebouncedValue(value, delay) hook and explain when to build a custom hook. - Error boundaries Resilience
What is an error boundary, what does it catch and not catch, and how do you use one? - useReducer vs useState State Management
When should you reach for useReducer instead of useState? - useLayoutEffect vs useEffect Effects / Timing
When would you reach for useLayoutEffect instead of useEffect, and what's the cost of getting it wrong? - forwardRef and useImperativeHandle Refs & Imperative Handles
How do you let a parent call a method on a child component (e.g. focus an input inside a custom ), and when is that appropriate? - React.lazy, Suspense & code splitting Code Splitting & Suspense
How do you split a large bundle so a rarely-used route (say, an admin dashboard) doesn't bloat the initial load, and how does Suspense fit… - Compound components & render props Component Patterns
You're building a reusable (or ) for a design system. Compare the compound-component pattern and render props for sharing state between a… - Automatic batching & StrictMode double-render Rendering Behavior
In React 18, how many re-renders do two setState calls inside a setTimeout trigger, and why does your effect/console.log appear to run…
Hard
- Build a typeahead / autocomplete Machine Coding
Build an autocomplete: debounced input, async suggestions, loading/empty states, keyboard nav, no race conditions. - Diagnose & fix a slow list Performance
A list of 10,000 rows scrolls badly and typing in a filter lags. How do you diagnose and fix it? - useTransition & useDeferredValue Concurrent Rendering
A search input filters a large list and typing feels laggy. How do React 18's concurrent features fix this, and what's the difference… - Subscribing to external stores (useSyncExternalStore) External Stores
You need a component to re-render when a non-React store changes (a Redux-like store, a browser API like navigator.onLine, or a custom… - Server Components vs Client Components Server Components
What are React Server Components (RSC), how do they differ from Client Components and from traditional SSR, and what are the rules for… - React 19 Actions & form hooks React 19 / Actions
What are Actions in React 19? Explain useActionState, useFormStatus, useOptimistic, and the use() hook, and the problem they collectively… - SSR hydration & hydration mismatches SSR / Hydration
What is hydration in SSR, why do 'hydration mismatch' errors happen, and how do you fix them? - Reconciliation & the diffing algorithm Reconciliation
How does React's reconciliation (diffing) algorithm decide what to update? Why is it O(n) instead of O(n³), and what role do keys play?
Other topics
HTML/CSS · Browser · JavaScript · TypeScript · System Design · Accessibility · Web Performance · Testing · Networking/Security · DSA