This lesson gathers frequently asked React interview questions with detailed answers — from JSX fundamentals through hooks, state management, and performance.
Explain answers in your own words with small code examples. Interviewers probe understanding through follow-ups, not memorized definitions.
// Be ready to explain this idiomatically
function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(c => c + 1)}>{n}</button>;
}Explain state, re-render, and why functional update matters for rapid clicks.
Fundamentals → JSX, props, state, rendering
Hooks → useState, useEffect, rules of hooks
Architecture → state management, data fetching
Performance → memo, virtualization, profiling
Ecosystem → Router, TypeScript, testingShort answers to frequent questions.
| Question | Short Answer |
|---|---|
| What is React? | UI library building component trees with declarative rendering |
| Props vs state? | Props: read-only from parent. State: mutable, local |
| Rules of hooks? | Top level only, same order, functions/hooks only |
| useEffect purpose? | Sync component with external systems after render |
| Key prop purpose? | Stable identity for list reconciliation |
| Context vs Redux? | Context: built-in sharing; Redux: complex global client state |
Core conceptual questions interviewers ask.
Applied questions often ask to build or fix small components.
// Q: Fix stale count in interval
// Wrong: setCount(count + 1) every second
// Right:
useEffect(() => {
const id = setInterval(() => setCount(c => c + 1), 1000);
return () => clearInterval(id);
}, []);Pro Tip
For each answer, prepare a 30-second version and a 2-minute deep-dive — interviewers signal which they want.
React builds a lightweight tree describing UI for each render. It diffs the new tree against the previous one and applies minimal updates to the real DOM. You write declarative JSX; React optimizes DOM operations.
Hooks must be called at the top level in the same order every render so React can associate state with the correct component instance. Conditional or looped hook calls break that ordering and cause bugs.
Parent re-renders, context changes, or new object/function props trigger child re-renders. Fix by colocating state, splitting context, using React.memo with stable props, or profiling to find real bottlenecks.
Zustand suits smaller-to-medium global state with minimal boilerplate. Redux Toolkit fits larger teams needing middleware, strict patterns, DevTools, and complex slice architecture.
TanStack Query adds caching, deduplication, background refetch, stale-while-revalidate, and mutation invalidation — eliminating repetitive fetch/effect/loading boilerplate.
useMemo caches a computed value; useCallback caches a function
reference. Both accept dependency arrays and help optimization when paired with profiling
and stable prop patterns.
Error boundaries catch render/lifecycle errors in child trees. try/catch handles imperative code like event handlers and async functions. Use both appropriately.
Dynamic import() creates separate JS chunks loaded on demand. React.lazy
and route-based splitting reduce initial bundle size and improve load performance.
Passing props through many layers that don't use them. Avoid with composition (children), context for shared low-churn data, or state libraries for complex global client state.
CRA is in maintenance mode with slower Webpack dev builds. The React team recommends Vite or meta-frameworks like Next.js for new applications with modern tooling.