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)
Practice React Core articles →- 1
React Core — Start Here (Roadmap + How to Study)
4 min readA senior-engineer roadmap for React: how to study, what to build, and how to use this React Core series effectively (with checkpoints + interview prep).
- 2
React Rendering: The Mental Model
3 min readHow React thinks about rendering, reconciliation, and why state changes cause re-renders.
- 3
Components, Props, and State (Interview Essentials)
3 min readCore building blocks: props vs state, one-way data flow, and when to lift state up.
- 4
Keys in React Lists: Why They Matter
3 min readHow keys help React preserve identity and avoid subtle UI bugs.
- 5
useEffect: Dependencies, Cleanup, and Common Traps
~16 minWhen effects run, how dependency arrays work, reference stability traps, and avoiding stale closures.
- 6
useMemo vs useCallback: Differences, Examples & Interview Q&A
5 min readCompare useMemo and useCallback with a working React example, dependency rules, common mistakes, and a render-tracing interview exercise.
- 7
State Updates and Batching in React
2 min readHow React batches state updates and what it means for setState and derived state.
- 8
Controlled vs Uncontrolled Components (Forms)
2 min readHow to think about form inputs, refs, and when each approach makes sense.
- 9
React Context: When to Use It (and When Not To)
2 min readContext basics, performance implications, and alternatives like composition.
- 10
Custom Hooks: Extracting Reusable Logic
2 min readHow to build and name custom hooks, and what makes them testable and reusable.
- 11
React Performance: An Interview Checklist
2 min readPractical performance levers: memoization, splitting, virtualization, and avoiding unnecessary renders.
- 12
React Rendering Deep Dive: Render vs Commit (and How to Prove Rerenders)
4 min readA senior mental model of React rendering: render vs commit, reconciliation, why rerenders happen, and how to prove it using the React Profiler.
- 13
Keys, Reconciliation, and Remounting: The Real Rules
2 min readWhy keys matter beyond lists: how reconciliation decides to preserve state or remount, why index keys break UIs, and how to debug key-related bugs.
- 14
When to Use React.memo, useMemo and useCallback
5 min readDecide when React memoization helps using a runnable list example, a before-and-after profiling exercise, and common reasons optimizations fail.
- 15
React 18 Concurrency: Transitions, Interruptible Rendering, and Why INP Improves
1 min readHow React 18 scheduling works: urgent vs non-urgent updates, useTransition, interruptible rendering, and how these tools improve responsiveness (INP).
- 16
Server vs Client Components (Next.js App Router): Boundaries, Hydration Cost, and Performance
2 min readA 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.