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)

React rendering mental model — what “render” means vs “commit”, and what actually re-renders.
Components, props, state — state ownership, derived state, and how to avoid prop-drilling traps.
Keys and lists — why keys are identity, not “unique”, and how they affect DOM + state.
useEffect: complete guide — effects as synchronization, cleanup, and why dependency arrays are not optional.
useMemo/useCallback — memoization is a performance tool, not a correctness tool.
Batching + state updates — why state updates are async-ish, and how batching changes behavior.
Controlled vs uncontrolled — form patterns and performance tradeoffs.
Context — when it’s great, when it becomes a performance footgun.
Custom hooks — reuse logic safely without creating hidden coupling.
React performance checklist — practical rules that prevent most real-world issues.

Advanced (what senior engineers get tested on)

Rendering vs commit + Profiler — learn to debug “why did this render?” with evidence.
Keys, reconciliation, remounting — the real reasons UI “resets” unexpectedly.
memo vs useMemo vs useCallback — when each helps, when each hurts, and what to measure.
Concurrency, transitions, Suspense — how to keep the UI responsive (and why INP matters).
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:

The model: what React is doing (render vs commit, reconciliation, etc.)
The symptom: what the user sees (jank, remount, stale state)
The proof: how you’d confirm (Profiler, DevTools, logs)
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.