Praxis
Tracks
Resources
Log in
Get started
← All tracks
React
Hooks, rendering, and state — each traced back to the JavaScript idea underneath it.
0 of 80 lessons complete
~1058 min total
Start track
Sort
Curriculum order
Easiest first
Hardest first
Lessons 1–12
Components & JSX → Controlled vs Uncontrolled Inputs
0/12 done
1
Components & JSX
Intermediate
A component is a function that returns UI. JSX is what lets that UI look like HTML while still being real JavaScript underneath.
12 min · 0/4 questions correct
2
Props & One-Way Data Flow
Intermediate
Props are the arguments a component is called with — read-only, and flowing in exactly one direction: parent to child.
12 min · 0/4 questions correct
3
useState
Intermediate
The hook that lets a component remember a value between renders — by closing over a slot React keeps aside for it. A closure, wearing a React hat.
16 min · 0/4 questions correct
4
useEffect
Intermediate
The hook for side effects — anything that reaches outside the render itself, timed to run after the browser paints, not during render.
15 min · 0/4 questions correct
5
Custom Hooks
Intermediate
A custom hook is just a function that calls other hooks — composition, not a new mechanism, with one hard rule underneath it.
12 min · 0/4 questions correct
6
Reconciliation & Keys
Intermediate
How React decides which real DOM changes are actually needed — and why a list without stable keys can attach state to the wrong item.
14 min · 0/4 questions correct
7
Context
Intermediate
How a value gets read by any descendant without threading it through every component in between — and the re-render cost that comes with it.
13 min · 0/4 questions correct
8
Memoization
Intermediate
React.memo, useMemo, and useCallback all skip work by comparing references — which means a fresh reference every render silently defeats all three.
15 min · 0/4 questions correct
9
Class Components (Legacy)
Intermediate
The older way of writing components, built directly on JavaScript classes — and directly on the prototype chain underneath them.
13 min · 0/4 questions correct
10
useRef
Intermediate
A mutable box that survives between renders, exactly like useState — except changing it never triggers a re-render. That one difference is the whole lesson.
13 min · 0/2 questions correct
11
useReducer
Intermediate
State logic expressed as a pure function of (current state, action) to next state — which is exactly the JavaScript track's `reduce`, wearing a React hat.
14 min · 0/2 questions correct
12
Controlled vs Uncontrolled Inputs
Beginner
Should React state or the DOM itself be the source of truth for an input's value? Two legitimate answers, and mixing them is where the bugs live.
12 min · 0/2 questions correct
Lessons 13–24
Keys & Lists → Render Props
0/12 done
Lessons 25–36
Higher-Order Components (HOCs) → The use() Hook
0/12 done
Lessons 37–48
useTransition and Marking Updates Non-Urgent → Context Performance Pitfalls
0/12 done
Lessons 49–60
List Virtualization Basics → ARIA Live Regions in React
0/12 done
Lessons 61–72
Conditional Rendering Patterns → useFormStatus and useActionState
0/12 done
Lessons 73–80
The useOptimistic Hook → Props vs. State: A Decision Guide
0/8 done