React Career Path

This path grows a production React engineer, not a tutorial collector. Finish checkpoints with apps you can explain in interviews.

Prereq: solid JS — JavaScript mastery path. Interview map: React interview questions.

Stage 1 — Mental model

Goals: Render purity, elements, reconciliation.

• React mental model
• Function components
• JSX under the hood
• Reconciliation
• Props vs state
• Keys in lists · Keys remounting

Checkpoint: Explain what happens on setState end-to-end.

Stage 2 — State & forms

• useState patterns
• Batching state updates
• Lifting state · State colocation
• Derived state anti-patterns
• Controlled vs uncontrolled
• Forms in React · Multi-step forms
• useReducer

Checkpoint: Multi-step form with validation and stable state shape.

Stage 3 — Effects & data

• Rules of Hooks
• useEffect fundamentals
• useRef
• Custom hooks design
• Optimistic UI
• Fetch + abort patterns from JS path

Checkpoint: useFetch/useQuery-style hook with cancel + race guard.

Stage 4 — Composition & structure

• Composition vs inheritance
• Children prop patterns
• Avoid prop drilling
• Context API · Context performance
• Layout components
• Portals
• Error boundaries
• Fragments · Forwarding refs

Checkpoint: Modal via portal with focus restore — Accessible modal MC.

Stage 5 — Performance literacy

• React performance checklist
• React DevTools profiler
• React.memo
• useMemo and useCallback
• List virtualization
• Code splitting lazy
• Concurrent features overview

Checkpoint: Profile and fix a real re-render issue; document before/after.

Stage 6 — Routing & app architecture

• Client routing mental model
• Client-side routing at scale
• Auth session UX awareness — Auth session design
• Feature flags awareness — Feature flags

Checkpoint: Multi-route app with loading/error/empty per route.

Stage 7 — TypeScript + testing

• React with TS props
• TypeScript path
• Testing Library
• Testing craft path

Checkpoint: Strict TS on a feature; RTL tests for primary flow.

Stage 8 — Accessibility

• Accessibility patterns in React
• A11y specialist path (as needed)

Checkpoint: Keyboard-complete combobox or tabs.

Stage 9 — Next.js / RSC awareness (role-dependent)

• App Router overview
• Server vs client components · Client components
• Rendering modes
• Data fetching App Router
• Streaming & Suspense

Checkpoint: Small Next app with server-fetched page + client island.

Stage 10 — Interview readiness

• React interview questions
• Machine coding framework
• Interview sprint
• Portfolio projects explained — Explaining projects

Career milestones (rough)

Level	Evidence
Junior	Stage 1–4 apps; needs guidance on architecture
Mid	Stages 5–7; owns features E2E
Senior	Perf/a11y/security defaults; mentors; design rounds

See Senior signals.

Portfolio sequence (build in order)

1. Todo + filters + local persistence — state literacy
2. Multi-route dashboard — routing, loading/error, layout
3. Data-heavy list — virtualization or pagination + URL state
4. Accessible overlay — modal or combobox with full keyboard
5. Production concerns — error boundary, basic tests, split routes

Each project should produce an elevator pitch for Explaining projects.

Common detours that slow careers

• Rewriting the same todo in five state libraries
• Chasing RSC discourse before hooks are solid
• Pixel polish without state/effect correctness
• Avoiding TypeScript until “later” on large apps

What to skip early

• Redux on day one
• Microfrontends
• Every concurrent API before profiler literacy
• GraphQL + tRPC + three meta-frameworks simultaneously

Related on this site

• Frontend roadmap
• Machine coding hub
• System design hub
• React interview questions
• Interview hub

Further reading

• react.dev
• Next.js docs

Ship checkpoints. Reading React docs without a multi-route app does not move your career bar.