Interview questions
Top 30 React Interview Questions (with answers)
Revision list of 30 react interview questions for frontend engineers, with concise answers and links to deeper Frontend Beauty guides. Composite list for practice—not a ranked survey.
Composite practice list based on common frontend interview themes and publicly discussed fundamentals. Ordering is editorial for learning, not a statistical “most asked” ranking from a single company.
- 30 questions
- react
How to use this list
- Answer out loud in 60–90 seconds, then check the written answer.
- Where a “Deeper guide” link appears, open it after you attempt the answer yourself.
- Pair with DSA, machine coding, and playground drills.
react
1.What is React’s core mental model?
UI is a function of state. You describe trees of elements; React reconciles descriptions and updates the host tree (DOM or native). Prefer data → view over imperative DOM mutation.
2.What is reconciliation in React?
The process of comparing the previous tree to the next one to decide what to insert, update, or remove. Same type at a position updates; different type remounts. Keys give list items identity.
3.Why do list keys matter?
Keys preserve identity across renders so state and DOM attach to the correct items. Index keys break when you reorder or insert—inputs and local state glitch. Prefer stable IDs from data.
4.What is the difference between props and state?
Props are inputs from the parent (read-only for the child). State is data the component owns and can update over time. Lift state to the closest common owner that needs to coordinate children.
5.What is a controlled input in React?
The input’s value is driven by React state via value + onChange. Uncontrolled inputs keep value in the DOM and use refs. Controlled forms make validation and programmatic resets easier.
6.How does useState’s functional update work?
setState(prev => next) uses the latest queued state, avoiding stale closures when the next value depends on the previous one. Prefer it inside async handlers and effects that schedule updates.
7.What is useEffect for—and what is it not for?
Effects synchronize with external systems (network, subscriptions, timers, non-React widgets). Do not use effects to transform data for render—compute during render. Put user-event logic in event handlers.
8.How should you think about the useEffect dependency array?
Include every reactive value the effect reads. Missing deps cause stale closures; unstable deps (new objects each render) cause loops. eslint-plugin-react-hooks exists for a reason.
9.What is a stale closure in React?
A function captured an old props/state value from a previous render. Fix with functional updates, correct effect deps, or refs for “latest value” when intentional.
10.When should you use useMemo and useCallback?
useMemo caches expensive derived values; useCallback stabilizes function identity for memoized children or effect deps. Measure first—blind memoization adds comparison cost and noise.
11.What does React.memo do?
It skips re-rendering a component when props are shallow-equal. New inline objects/functions every render defeat it. Fix prop stability before wrapping everything in memo.
12.What is useRef used for?
A mutable box that survives renders without causing re-render, and a way to hold host DOM nodes. Do not use ref reads/writes as a substitute for state that should appear on screen.
13.When do you use useLayoutEffect?
When you must measure or mutate the DOM before the browser paints to avoid a visual flash. Prefer useEffect for most work—layout effects block paint.
14.What problems does Context solve, and what are the costs?
It avoids prop drilling for low-frequency data (theme, locale, auth user). Any provider value change re-renders consumers—split contexts and memoize values for high-frequency data.
15.When is useReducer a better fit than useState?
When updates are multi-field, interdependent, or easier to reason about as named actions. Reducers centralize transitions and simplify tests of state logic.
16.What are error boundaries?
Components that catch render errors in their child tree and show fallback UI. They do not catch event-handler or async errors outside render—handle those separately and report to monitoring.
17.What is the difference between composition and inheritance in React?
React favors composition: children, slots, and wrappers. Inheritance hierarchies of components are rarely used; share behavior with hooks and utilities instead.
18.How does code splitting work with React.lazy?
React.lazy(() => import(...)) loads a component on demand; wrap with Suspense for a fallback. Use it for heavy routes/widgets to cut initial JS. Handle load failures.
19.What is concurrent rendering at a high level?
React may start, pause, abandon, or reuse render work. Keep render pure (no side effects). Use startTransition for non-urgent updates so typing stays responsive.
20.What is useTransition used for?
It marks state updates as non-urgent so React can keep the UI responsive for urgent input. Pair with isPending for loading affordances on deferred UI.
21.What causes hydration mismatches?
Server HTML must match the client’s first render. Random IDs, Date.now(), locale-dependent formatting, or browser-only APIs during render cause mismatches. Guard client-only UI.
22.What are Server Components conceptually?
Components that can render on the server by default in modern frameworks, shipping less client JS for non-interactive UI. Client components mark interactivity boundaries—“use client” should stay as low as practical.
23.Why can changing a key remount a component?
React treats a different key as a different identity—state resets and effects re-run. Useful to reset forms when the entity ID changes; harmful when keys thrash accidentally.
24.What is derived state and why is it often an anti-pattern?
Copying props into state without a clear reset strategy desyncs UI from props. Prefer computing during render, or fully control from the parent, or remount with a key when identity changes.
25.How do portals help with modals?
createPortal renders children into a different DOM node (e.g. document body) while keeping React context. Useful for stacking/overflow, but you still own focus trap and a11y.
26.What does Strict Mode do in development?
It double-invokes certain lifecycles/effects in dev to surface impure logic. Production runs once. Write effects with correct cleanup so double-mount is safe.
27.How should you test React components?
Prefer Testing Library: query by role/label/text, fire user events, assert what users see. Avoid testing internal state or implementation details. Missing roles often signal a11y bugs.
28.What is virtualization and when do you need it?
Rendering only visible rows/cells for long lists keeps the DOM small. Hundreds of simple rows may be fine; thousands of heavy rows usually need windowing.
29.What is dangerouslySetInnerHTML and what is the risk?
It injects raw HTML and bypasses React’s text escaping—XSS if the string is untrusted. Sanitize with a strict allowlist library or avoid HTML injection entirely.
30.How do you avoid prop drilling without overusing Context?
Compose with children/slots so intermediate components do not forward dozens of props. Use Context for truly wide, low-frequency concerns. Colocate state near usage.