Web Interview Playbook

Search is available after the site is built (`npm run build && npm run preview`).

React Interview Preparation

React interviews test whether you can build and reason about component-based UIs — state, hooks, rendering, and real project decisions.

What Interviewers Look For

  • Component design (smart vs presentational)
  • Hooks used correctly (not just copied)
  • State management patterns
  • Performance awareness (memo, callback, list keys)
  • How React fits your actual project

Files in This Section

FilePurpose
topics-not-to-miss.mdMust-know concepts checklist
interview-questions.md30+ questions with full answers
hooks-deep-dive.mduseState, useEffect, useRef, etc.
performance.mdRe-renders, memoization, optimization
project-style-questions.md20 scenario questions
common-mistakes.mdWhat students get wrong
revision-sheet.mdOne-page cram before interview
mock-interview.md45-minute practice flow

Study Order

  1. topics-not-to-miss.md — identify gaps
  2. hooks-deep-dive.md — understand each hook deeply
  3. interview-questions.md — 5 questions/day, out loud
  4. performance.md — know when to optimize (and when not to)
  5. project-style-questions.md — practice scenarios
  6. mock-interview.md — practice with a friend
  7. revision-sheet.md — day before interview

Time Estimate

  • Minimum viable prep: 1 week (if you know JS well)
  • Solid prep: 2 weeks (with a small React project)

Project Connection

Be ready to explain: component structure, where state lives, how you fetch data, routing choice, and one performance or bug fix you made.

Interactive

React Re-render Visualizer

Fire state updates at different tree levels and watch exactly which components re-render — and what React.memo saves you.

App (state)
Header
Counter (state)
List
Item 1
Item 2
Item 3 (memo)
Footer (memo)

Click a button — flashing components re-render.

useEffect Timeline

Pick a deps array, mount, update, unmount — and see precisely when the effect runs, skips, and cleans up.

dependencies

useEffect(fn, [count])

Mount the component to start the timeline.

Keys & Reconciliation Bug Demo

Tick a row’s checkbox, delete another row under key={index}, and watch the state land on the WRONG person — then fix it with key={id}.

key strategy
key=0Aisha
key=1Priya
key=2Rahul
key=3Sam

Tick a checkbox, then mutate the list — watch where the tick ends up under each key strategy.

{roster.map((p, i) => (
  <Row key={i} person={p} />
))}

// key = POSITION in the list

Study materials