Most React tutorials stop at the same place: useState, useEffect, props, maybe context. Then they stop.
The real questions come after that. Why does my component re-render? What happens during the commit phase? How does hydration work? What is a custom renderer?
I found a curriculum that answers those. It's on KandZ Tuts, and it's 131 chapters, organized as a single progression from your first component to React's internal architecture.
Here's the breakdown.
Foundations (1–14)
What React is, Node.js and package managers, creating a project with Vite, project structure, JSX syntax and rules, embedding JavaScript expressions, functional components, importing and exporting, props, default props, the children prop, event listeners, passing handlers as props, and the synthetic event object.
State (15–24)
useState, updating primitive state, updating state from previous state, updating objects and arrays in state, conditional rendering with if/ternary/logical AND, rendering lists with map, and the importance of keys.
Forms (25–29)
Controlled inputs, textareas and selects, handling multiple inputs with one handler, form submission and preventDefault, and uncontrolled inputs with useRef.
Effects and Data (30–34)
useEffect, dependency array rules, cleanup functions, fetching API data, and handling loading and error states.
Custom Hooks and Context (35–41)
Extracting reusable logic, the prop drilling problem, createContext, providing and consuming context, useReducer, and combining context with useReducer.
Refs, Memoization, and Modern Hooks (42–57)
useRef for DOM access and mutable values, useMemo, useCallback, React.memo, useImperativeHandle, useLayoutEffect, useDebugValue, useTransition, useDeferredValue, useId, useSyncExternalStore, useOptimistic, useActionState, useFormStatus, and the use hook.
Routing and State Libraries (58–70)
React Router (route elements, outlets, dynamic params, programmatic navigation, protected and nested routes), TanStack Query (setup, useQuery, useMutation, cache invalidation), Redux Toolkit (provider, slices, actions, reducers, middleware, thunks), and Zustand.
Styling and Forms (71–75)
CSS Modules, Tailwind CSS, styled-components and Emotion, React Hook Form, and Zod integration.
Advanced Patterns (76–87)
Code splitting with React.lazy, Suspense, error boundaries, render props, higher-order components, compound components, control props, portals, React Testing Library, user interaction testing, MSW, and Playwright.
SSR and Frameworks (88–95)
SSR vs SSG, React Server Components architecture, Server Components vs Client Components rules, Server Actions, Next.js App Router, layouts and loading UI, streaming SSR and progressive hydration, and micro-frontends with Module Federation.
Production and Accessibility (96–100)
ARIA attributes, keyboard navigation and focus management, XSS prevention, React DevTools profiling, and production builds.
React Internals (101–109)
Fiber architecture and reconciliation, the commit phase vs render phase, double-pass rendering and Strict Mode, the concurrent rendering scheduler and priorities, automatic batching, memory leak prevention, synthetic event pooling and delegation, hydration mismatch errors, and progressive and selective hydration.
Advanced Frameworks (110–114)
SSG with React frameworks, Incremental Static Regeneration, Partial Prerender, React Server Functions and the wire format, and the Taint APIs.
Applied React (115–120)
i18n and localization, XState state machines, WebSockets, offline-first apps with service workers, monorepos with Turborepo and Nx, and building reusable component libraries with Storybook.
Beyond the Browser (121–130)
React Native core, React Native navigation and native modules, Electron and Tauri, React Three Fiber, WebGL and Canvas, React Konva, the Web Audio API, Web Components integration, custom Babel/SWC plugins, and custom React renderers with react-reconciler.
Chapter 131: The Complete Cheatsheet
Why the Internals Section Matters
Chapters 101–109 are the reason to read this curriculum.
Most resources stop at "here's how useEffect works." This one goes into how React actually renders—Fiber, reconciliation, the commit phase, the concurrent scheduler, automatic batching, hydration mismatches.
That's what lets you diagnose a performance problem instead of guessing at useMemo. It's the difference between using React and understanding it.
The use Hook and React 19
Chapters 54–57 cover the hooks that define modern React: useOptimistic, useActionState, useFormStatus, and the use hook.
These are not footnotes. They are how React 19 handles async forms, optimistic updates, and reading promises in render. A curriculum that skips them is teaching React from two years ago.
Beyond the Browser
Chapters 121–130 are unusual. Most React curricula stop at the web. This one covers React Native, Electron, Tauri, React Three Fiber, React Konva, the Web Audio API, and custom renderers.
If you've wondered how React renders to a canvas, a native mobile view, or a 3D scene, this is where that gets explained.
Who This Is For
- Beginners: Start at Chapter 1 and read in order.
- Experienced React developers: Jump to Chapter 57 (the
usehook), Chapter 101 (Fiber), or Chapter 108 (hydration mismatches) if those are gaps. - Developers moving beyond the web: Start at Chapter 121.
The Link
Free, no signup, 131 chapters.
If you've been writing React for years but never understood what the scheduler does, or you're starting from scratch and want a path that doesn't stop at useEffect, this is the most complete free curriculum I've found.
What React topics do you wish had better free resources? Let me know in the comments.
