React Core — Start Here (Roadmap + How to Study)

If you already know basic React, this page helps you study React like a senior engineer: build the right mental models, practice the right debugging moves, and prove you understand performance + modern rendering.

Who this is for

• You can build React apps, but want senior-level clarity: rendering, reconciliation, effects, memoization, concurrency, and Next.js RSC boundaries.
• You’re preparing for interviews where “I know React” is not enough — you need to explain why React behaves the way it does.

If you’re brand new to React, do a quick beginner intro elsewhere, then come back.

---

How to use this roadmap (the “senior” way)

The 3-pass plan

Pass 1 (fast): Read each lesson for the main mental model. Don’t over-optimize yet.

Pass 2 (practice): For each lesson, do a tiny exercise:

• add logs, simulate a bug, measure with Profiler/Performance panel, and write down what happened.

Pass 3 (interview): For each lesson, produce:

• a 30-second answer
• a small code example
• 1 common wrong answer
• 1 follow-up question

That’s exactly how senior interviews feel.

---

Roadmap index (in order)

Foundations (make React predictable)

1. React rendering mental model — what “render” means vs “commit”, and what actually re-renders.

2. Components, props, state — state ownership, derived state, and how to avoid prop-drilling traps.

3. Keys and lists — why keys are identity, not “unique”, and how they affect DOM + state.

4. useEffect: complete guide — effects as synchronization, cleanup, and why dependency arrays are not optional.

5. useMemo vs useCallback: differences and examples — compare the hooks, understand dependencies, and trace renders.

6. Batching + state updates — why state updates are async-ish, and how batching changes behavior.

7. Controlled vs uncontrolled — form patterns and performance tradeoffs.

8. Context — when it’s great, when it becomes a performance footgun.

9. Custom hooks — reuse logic safely without creating hidden coupling.

10. React performance checklist — practical rules that prevent most real-world issues.

Advanced (what senior engineers get tested on)

11. Rendering vs commit + Profiler — learn to debug “why did this render?” with evidence.

12. Keys, reconciliation, remounting — the real reasons UI “resets” unexpectedly.

13. When to use React memoization — run a before-and-after profiling exercise and decide which work to skip.

14. Concurrency, transitions, Suspense — how to keep the UI responsive (and why INP matters).

15. Next.js RSC + client boundaries — hydration costs, client islands, and how to avoid shipping too much JS.

---

Study checkpoints (recommended)

Checkpoint A: “I can predict renders”

You should be able to answer, without guessing:

• what re-renders when you set state
• why children re-render
• when React reuses vs remounts a subtree

Checkpoint B: “I can debug React performance”

You can:

• use the React Profiler to find which components commit expensive work
• identify whether cost is render, layout/paint, network, or JS main thread
• apply 1–2 targeted fixes (memoization, splitting client boundary, deferring work)

Checkpoint C: “I can explain modern React”

You can explain (clearly, without buzzwords):

• what concurrency is trying to solve
• what transitions do
• what Suspense coordinates
• what hydration costs and why RSC can reduce it

---

What to build while studying (tiny projects)

Pick one small app and evolve it as you go (don’t start 10 projects):

• A “GitHub Issues viewer” (pagination + filters) or
• A “Notes app” (forms + list updates + search)

Add these upgrades as you reach the advanced lessons:

• a slow list (1,000 items) and make it responsive
• a heavy client widget and split it behind a client boundary
• a transition for search/filter
• measure before/after with Profiler

---

Interview cheat sheet (copy/paste)

When asked any React question, structure your answer like this:

1. The model: what React is doing (render vs commit, reconciliation, etc.)
2. The symptom: what the user sees (jank, remount, stale state)
3. The proof: how you’d confirm (Profiler, DevTools, logs)
4. The fix: smallest change that addresses the cause

---

Next up

Start at Lesson 01 and move in order. If you’re short on time, prioritize: #01, #03, #04, #11, #14, #15.