Top 50 React Interview Questions and Answers (2026 Updated)

Beginner React questions (1–15)

1. What is React? A declarative UI library that renders components from state and props using a virtual DOM diffing algorithm.
2. JSX vs HTML? JSX is syntactic sugar for createElement calls and supports JS expressions.
3. Components vs elements? Elements are plain objects describing what to render; components are functions or classes that return elements.

1. Props vs state? Props are inputs from a parent; state is locally owned and triggers re-renders on update.
2. Why keys in lists? Keys give React identity for list items so it can reuse and reorder DOM nodes correctly.
3. Controlled vs uncontrolled inputs? Controlled inputs read from React state; uncontrolled inputs read from the DOM via refs.
4. What is the virtual DOM? An in-memory tree React diffs against the previous tree to compute the minimum DOM mutations.

1. useState basics? Returns the current value and a setter; calling the setter schedules a re-render.
2. useEffect basics? Runs after commit; the dependency array controls when it re-runs; the return function cleans up.
3. Conditional rendering patterns? Ternary, short-circuit, and early returns.
4. What is Context? A way to pass values without prop drilling, but it re-renders all consumers when the value changes.

1. Fragment? Lets you return multiple elements without an extra DOM node.
2. Refs? An escape hatch for imperative DOM access or storing mutable values that should not trigger re-renders.
3. Why is setState asynchronous? React batches updates for performance and consistency.
4. What is reconciliation? The diffing process that maps the new element tree to DOM updates using component type and key identity.

Hooks deep-dive (16–30)

1. useEffect vs useLayoutEffect? Layout effect runs synchronously after DOM mutations and before paint, used for measurements.
2. useMemo? Caches a computed value across renders when dependencies are unchanged.
3. useCallback? Caches a function reference; useful for stable identity passed to memoized children.
4. Why might useMemo not help? If the computation is cheap or dependencies change every render, the cache is wasted.

1. useRef vs useState? useRef holds mutable values without re-rendering; useState triggers re-renders on change.
2. Custom hooks? Functions starting with use that compose hooks to reuse stateful logic across components.
3. Rules of hooks? Call at the top level; only inside React functions; same order every render.
4. useReducer vs useState? Reducer is better for complex state transitions and predictable updates.

1. useImperativeHandle? Customizes the ref exposed by forwardRef so parents can call methods on a child.
2. useDeferredValue? Lets you mark a value as low-priority so urgent updates render first.
3. useTransition? Marks a state update as non-urgent so React can keep the UI responsive.
4. useId? Generates a stable id for accessibility attributes that is hydration-safe.

1. useSyncExternalStore? Subscribes to an external store with concurrent-safe semantics.
2. When does a useEffect run twice in dev? React Strict Mode mounts, unmounts, and remounts effects to surface unsafe patterns.
3. Common useEffect bugs? Stale closures, missing dependencies, race conditions in async fetches, and missing cleanup.

Performance and architecture (31–40)

1. How does React.memo work? Skips re-rendering a component if its props are shallow-equal to the previous render.
2. Common causes of re-renders? Parent re-render, context change, state update, props identity churn, key changes.
3. How do you profile React? React DevTools Profiler, Lighthouse, web vitals, and the React Compiler in 2026.

34. Code splitting? React.lazy plus Suspense or framework-level dynamic imports to defer non-critical bundles. 35. Why avoid inline functions in hot paths? They break referential equality, defeating React.memo and useCallback in children.

1. Reconciliation pitfalls with keys? Using array index as key when items can reorder leads to mismatched DOM state.
2. State colocation? Move state as close to where it is used as possible to reduce re-render scope.
3. Lifting state up? Move shared state to the closest common ancestor when sibling components must stay in sync.

39. When to use Context vs Redux vs Zustand? Context is fine for low-frequency global values; external stores are better for frequently updated data with selectors. 40. How do you avoid prop drilling? Compose with children, use Context, use a state library, or split components.

Modern React 18/19 and server components (41–50)

1. Concurrent rendering? React can pause, resume, and abandon work to keep the UI responsive.
2. Suspense for data? Components can suspend while async data loads; the boundary shows a fallback.
3. Streaming SSR? The server sends HTML in chunks so users see content earlier; works with Suspense.

44. Server components vs client components? Server components run on the server, never ship JS, can access data directly; client components handle interactivity. 45. When to use a client component? When you need state, effects, browser APIs, or event handlers.

46. The React Compiler? Auto-memoizes components and hooks at build time so manual useMemo and useCallback are less necessary. 47. Actions and useActionState? Built-in form action support that handles pending state, optimistic updates, and error states.

1. useOptimistic? Lets you render an immediate optimistic value while a real mutation is in flight.
2. Hydration errors? Mismatch between server and client rendered HTML; common causes include time, randomness, and locale.
3. SEO with React? Use SSR or SSG, set canonical and meta tags per route, and avoid blocking render on client-only data.

How to answer React questions live with AI assist

Use a real-time AI interview assistant to capture the question, generate a compact outline, and speak the answer in your own words. The strongest pattern is: define the term, give a one-line example, then explain the tradeoff. For example, for useMemo: "It caches a computed value between renders. I use it when the computation is expensive and the inputs are stable. The tradeoff is that for cheap computations the bookkeeping cost is higher than the savings."

Personalize answers from your real React work. If you optimized a list, mention the rendered count, the keying strategy, and the measured improvement. If you migrated to server components, mention the bundle size delta and the data-fetching shift. CrackInterviewAI screenshot mode is useful when interviewers paste a code snippet and ask for output, fixes, or refactors during the call.

Practice React interviews with CrackInterviewAI

Use real-time transcription, screenshot mode, and answer outlines to handle React, hooks, and server component questions with more structure.

View pricing · Explore features

Frequently asked questions

How many React interview questions should I prepare for 2026?

Cover the 50 in this guide plus 10 personal project deep-dives. That combination handles most fresher, mid, and senior loops.

Are server components asked in junior interviews?

Often only at a high level. Be able to explain what they are and when you would use them; deep internals are reserved for senior rounds.

Can AI help me answer React questions in a live interview?

Yes. Use a real-time interview assistant to capture the question and produce a speaking outline you can adapt with your own examples.

Keep exploring

Return to the CrackInterviewAI homepage to download the Windows app, or browse all guides on the interview prep blog.

Related guides

• AI Interview Assistant: How Real-Time Interview Answers Help You Stay Clear Under Pressure
• Coding Interview Help Tool: A Practical Guide to AI Support for Live Technical Rounds
• Live Interview Support Software: What to Look For Before a Remote Technical Interview
• System Design Interview Prep with AI: A 30-Day Plan for Mid and Senior Engineers