React Core (Interview Prep)
A structured roadmap of the React fundamentals that matter most in frontend interviews. Start top-to-bottom.
Series: React Core
Start here
React Core — Start Here (Roadmap + How to Study)
A senior-engineer roadmap for React: how to study, what to build, and how to use this React Core series effectively (with checkpoints + interview prep).
Roadmap (16)
Browse all React Core posts →- 1
React Core — Start Here (Roadmap + How to Study)
A senior-engineer roadmap for React: how to study, what to build, and how to use this React Core series effectively (with checkpoints + interview prep).
4 min read - 2
React Rendering: The Mental Model
How React thinks about rendering, reconciliation, and why state changes cause re-renders.
3 min read - 3
Components, Props, and State (Interview Essentials)
Core building blocks: props vs state, one-way data flow, and when to lift state up.
3 min read - 4
Keys in React Lists: Why They Matter
How keys help React preserve identity and avoid subtle UI bugs.
3 min read - 5
useEffect: Dependencies, Cleanup, and Common Traps
When effects run, how dependency arrays work, and how to avoid stale closures.
3 min read - 6
useMemo vs useCallback: When (Not) to Use Them
Performance hooks explained with practical rules of thumb and interview-ready examples.
2 min read - 7
State Updates and Batching in React
How React batches state updates and what it means for setState and derived state.
2 min read - 8
Controlled vs Uncontrolled Components (Forms)
How to think about form inputs, refs, and when each approach makes sense.
2 min read - 9
React Context: When to Use It (and When Not To)
Context basics, performance implications, and alternatives like composition.
2 min read - 10
Custom Hooks: Extracting Reusable Logic
How to build and name custom hooks, and what makes them testable and reusable.
2 min read - 11
React Performance: An Interview Checklist
Practical performance levers: memoization, splitting, virtualization, and avoiding unnecessary renders.
2 min read - 12
React Rendering Deep Dive: Render vs Commit (and How to Prove Rerenders)
A senior mental model of React rendering: render vs commit, reconciliation, why rerenders happen, and how to prove it using the React Profiler.
4 min read - 13
Keys, Reconciliation, and Remounting: The Real Rules
Why keys matter beyond lists: how reconciliation decides to preserve state or remount, why index keys break UIs, and how to debug key-related bugs.
2 min read - 14
React.memo, useMemo, useCallback: When They Help (and When They Don’t)
A practical decision framework for memoization in React: when it prevents real work, when it’s wasted complexity, and how to measure.
2 min read - 15
React 18 Concurrency: Transitions, Interruptible Rendering, and Why INP Improves
How React 18 scheduling works: urgent vs non-urgent updates, useTransition, interruptible rendering, and how these tools improve responsiveness (INP).
1 min read - 16
Server vs Client Components (Next.js App Router): Boundaries, Hydration Cost, and Performance
A senior model for Next.js Server Components: what runs where, how client boundaries increase JS + hydration cost, and how to design component trees for performance.
2 min read