Essential React interview questions covering hooks, rendering, patterns, and performance. Each answer links to an interactive visualization.
Showing 66 of 66 questions
Explain that JSX is not HTML but compiles to JavaScript function calls
Learn more →Know the difference between the classic and automatic JSX transform
Learn more →Explain the one-way data flow and why React enforces it
Learn more →Discuss when to lift state up versus use context to avoid prop drilling
Learn more →Explain why React favors composition over inheritance
Learn more →Give examples of the slot pattern for complex layouts
Learn more →Explain the 0 && gotcha and how to fix it with Boolean() or > 0
Learn more →Discuss when to use early returns vs ternaries vs && for clarity
Learn more →Explain the reconciliation algorithm and why keys help React diff efficiently
Learn more →Describe concrete bugs that happen with index keys in dynamic lists
Learn more →Explain batching: React 18 batches all state updates, not just event handlers
Learn more →Know why Object.is() comparison means you must create new references for objects
Learn more →Explain the mental model: effects synchronize with external systems, not lifecycle events
Learn more →Know how to prevent race conditions with AbortController or an ignore flag
Learn more →Explain the difference between useRef and useState for persisting values
Learn more →Know when refs are appropriate vs when state is more correct
Learn more →Explain the re-render behavior: all consumers re-render when the provider value changes
Learn more →Discuss strategies to mitigate context re-renders: splitting, memoizing, selectors
Learn more →Compare useState vs useReducer: useReducer shines when state transitions are complex or interdependent
Learn more →Explain how discriminated unions prevent invalid state combinations at the type level
Learn more →Explain that useMemo is an optimization, not a semantic guarantee
Learn more →Discuss when NOT to use useMemo: simple calculations, primitive values, rarely changing data
Learn more →Explain that useCallback without React.memo on children is pointless overhead
Learn more →Know that useCallback(fn, deps) is syntactic sugar for useMemo(() => fn, deps)
Learn more →Draw the timeline: render -> DOM mutation -> useLayoutEffect -> paint -> useEffect
Learn more →Give concrete examples where useEffect causes flicker and useLayoutEffect fixes it
Learn more →Explain that custom hooks share logic but not state between components
Learn more →Compare custom hooks to HOCs and render props as patterns for code reuse
Learn more →Explain the two heuristics: different types rebuild subtrees, keys match list children
Learn more →Discuss why O(n) is achievable instead of O(n^3) generic tree diff
Learn more →Map class lifecycle methods to hooks: componentDidMount -> useEffect with [], componentDidUpdate -> useEffect with deps
Learn more →Explain the shift from lifecycle thinking to synchronization thinking
Learn more →List the three triggers: state change, parent re-render, context change
Learn more →Explain why passing inline objects or functions as props breaks React.memo
Learn more →Explain the trade-off: controlled gives more power but more boilerplate
Learn more →Discuss when uncontrolled is actually the better choice like simple search forms
Learn more →Explain why refs are an escape hatch and when declarative solutions are better
Learn more →Know useImperativeHandle for exposing a controlled API through refs
Learn more →Know exactly what error boundaries catch and what they do not
Learn more →Explain the strategy of multiple boundaries at different granularity levels
Learn more →Compare compound components to configuration-based APIs and explain the flexibility trade-off
Learn more →Reference real-world libraries like Radix UI or Headless UI that use this pattern
Learn more →Explain the historical context: render props solved the same problem custom hooks do now
Learn more →Know when render props are still useful over custom hooks (when JSX structure is shared)
Learn more →Compare HOCs to hooks: hooks are simpler, compose better, and do not add wrapper elements
Learn more →Know real-world examples like Redux connect() or React Router withRouter()
Learn more →Explain the split state/dispatch pattern and why it reduces unnecessary re-renders
Learn more →Discuss when to reach for a library like Zustand over raw context
Learn more →Explain that events bubble through the React tree, not the DOM tree, for portals
Learn more →Know the use cases: modals, tooltips, toasts, anything that needs to escape stacking contexts
Learn more →Explain that memo is an optimization and should be guided by profiling
Learn more →Know the full chain: memo + useCallback + useMemo work together
Learn more →Explain route-level vs component-level splitting and when each is appropriate
Learn more →Know how to handle load failures with error boundaries for lazy components
Learn more →Explain the evolution: Suspense for code splitting first, then for data fetching
Learn more →Discuss how Suspense eliminates waterfall loading with parallel data fetching
Learn more →Explain the difference between useTransition (wraps the setter) and useDeferredValue (wraps the value)
Learn more →Know that concurrent rendering is opt-in via createRoot and transitions
Learn more →Explain the serialization boundary between Server and Client Components
Learn more →Know that Server Components can render Client Components but not vice versa
Learn more →Explain how useActionState eliminates the useState + isPending + try/catch boilerplate pattern
Learn more →Know that use() breaks the Rules of Hooks intentionally — it can be conditional because it uses a different internal mechanism
Learn more →Explain that the compiler is a build-time static analysis tool, not a runtime library
Learn more →Know what the compiler replaces (useMemo, useCallback, memo) and what it does not (useEffect, algorithmic optimization)
Learn more →Explain progressive enhancement: Server Action forms work as HTML forms before JS loads, then enhance to async
Learn more →Know the difference between Server Components (data fetching at render) and Server Actions (mutations from interactions)
Learn more →