Frontend Beauty
ESC

Type to search the knowledge base.

React Interview Common Questions

A map of React interview topics — rendering model, hooks, performance, patterns — with practice prompts and links to deep dives.

intermediate4 min read
  • interview
  • react
  • hooks
  • performance

React interviews rarely reward memorizing lifecycle method names from 2017. Strong loops check whether you understand rendering, state, effects, and tradeoffs — then whether you can build a small component under time.

Use this page as a question map, not a script. Pair with JavaScript Interview Guide for language depth.

What interviewers score

  1. Mental model — what triggers a render; what “pure component” means
  2. Hooks correctness — dependencies, stale closures, rules
  3. Structure — state colocation, composition over prop soup
  4. Performance literacy — when memo helps vs cargo cult
  5. Accessibility & UX in component design rounds

Core model

Topic Can you… Learn
Render vs commit Explain render phase purity vs DOM commit Reconciliation
State updates Batching; why setState is async-ish useState patterns
Props / children Composition; avoid boolean prop explosion Composition vs inheritance
Keys Why index keys break list state Keys in lists
Controlled inputs Value + onChange source of truth Forms in React

Prompt: “What happens when you call setState?” — walk: schedule update → render → reconcile → commit → effects.

Hooks table

Topic Can you… Learn
Rules of Hooks Why top-level only; eslint role Rules of Hooks
useEffect Sync vs async world; cleanup; deps useEffect fundamentals
Stale closures Fix with deps, functional updates, refs Closures
useMemo / useCallback Measure first; stable identities for children useMemo and useCallback
useRef Mutable box; DOM refs; no re-render useRef
Custom hooks Extract reusable stateful logic Custom hooks design
useContext Avoid overusing for high-frequency state Context API basics
useReducer Complex state transitions; testable useReducer

Prompt: Implement useDebouncedValue and explain cleanup.

Prompt: “Why is this effect infinite-looping?” — object/array deps created each render.

Performance

Topic Can you… Learn
Re-renders Trace who re-renders when parent state changes Reconciliation
React.memo Shallow compare props; children function trap React.memo
Lists Virtualization concept for huge feeds List virtualization · Infinite scroll
Code split lazy + Suspense route-level Code splitting
Concurrent Transitions / deferred values at a high level Concurrent features

Prompt: A list of 10k rows freezes on filter — what do you try first? (debounce input, virtualize, don’t put filter state above unrelated tree, profile)

Patterns & architecture

Topic Can you… Learn
Lifting state When to lift vs colocate Lifting state up · State colocation
Server data Cache keys, stale-while-revalidate (RQ/SWR mental model) Optimistic UI
Error boundaries Where they catch; not event handlers Error boundaries
Portals Modals / tooltips outside DOM hierarchy Portals · Modal

Component design prompts (live coding)

  1. Todo App — state + persist
  2. Accessible Modal — focus trap
  3. Autocomplete — debounce + a11y
  4. Infinite scroll feed — observer + pages
  5. Tabs / accordion — keyboard + ARIA
  6. Controlled vs uncontrolled form field

Classic verbal questions (short answers you should own)

Question Strong answer direction
Virtual DOM? Lightweight description for diffing; not magic faster DOM always
Why keys? Identity across renders for reconciliation + state preservation
useEffect vs useLayoutEffect? Layout effect runs before paint; measure DOM carefully
Prop drilling fix? Composition first; context for stable low-frequency data
Redux vs context? Update frequency, middleware, devtools, not religion
CSR vs SSR vs RSC? Where HTML is produced; data + bundle implications

Be honest when your production stack differs; interviewers want models, not slogans.

Testing angles

Topic Can you… Learn
RTL philosophy Assert users flows, not internals Testing
Async findBy, waiting for fetch mocks
Hooks Render-hook or test via component

Answer framework

  1. Clarify product constraints
  2. Naive component
  3. State shape
  4. Effects / data
  5. A11y + edge cases
  6. Perf notes only if relevant

Topic guides on this site

External practice

Ship clear mental models and small correct components. Trivia without structure does not pass senior bars.