Web Development

React Deep Dive

26-module React course for engineers - from JSX and hooks through the Virtual DOM, Fiber, performance, state management, server state, routing, forms, TypeScript, RSC, and a working capstone.

Beginner1467158 lessons14 free lessonsreactjavascripttypescriptfrontendweb-development

React Deep Dive

This isn't a "build a todo app" tutorial. It's a 26-module React curriculum built around how React is actually used in production - language fundamentals plus the depth most platforms never reach: how React renders, the Virtual DOM and reconciliation, Fiber architecture, the React Compiler, server state vs client state, React Server Components, and the performance engineering most courses leave to chance.

You'll work through the fundamentals (why React exists, JSX in depth, components and props, state and effects, events, lists and keys, composition), the hooks system (built-in hooks beyond useState/useEffect, the rules of hooks, custom hooks), the rendering pipeline (how React renders, the Virtual DOM, reconciliation, Fiber), the performance discipline (profiling, identifying unnecessary re-renders, memoization, virtualization, the React Compiler), and the production toolchain that senior engineers reach for: state management beyond useState (Context, Zustand, Jotai), server state and data fetching (TanStack Query), routing, forms (React Hook Form, Zod), styling (CSS Modules, Tailwind, CSS-in-JS), testing (React Testing Library, Vitest), TypeScript in React, and React Server Components with Next.js — closing with interview preparation and a working capstone.

What you will learn

• React fundamentals from the engineer's perspective — JSX, components, props, state, effects, events
• The full hooks system — built-in hooks, the rules of hooks, custom hook patterns
• How React renders — the Virtual DOM, reconciliation, Fiber architecture, the work loop
• Performance engineering — profiling, memoization, virtualization, the React Compiler
• State management beyond useState — Context, Zustand, Jotai
• Server state and data fetching with TanStack Query
• The production toolchain — routing, forms (React Hook Form + Zod), styling, testing
• TypeScript in React — props, generics, events, refs, common patterns
• React Server Components and Next.js App Router
• Interview preparation focused on React internals + system design + debugging stories

Prerequisites

• Intermediate JavaScript familiarity (variables, functions, async/await, modules)

Course outline

Module 1: Why React Exists

Why React Exists — 5 topics.

• Why React Exists: The Pre-React Frontend 8 min read
• Facebook 2011 and the Original Problem 9 min read Pro lesson
• The Big Ideas: Declarative UI, Components, Unidirectional Data Flow 10 min read Pro lesson
• From Class Components to Hooks to Server Components: The Timeline 10 min read Pro lesson
• What React Is and Isn't 11 min read

Module 2: First Components and the Render Loop

First Components and the Render Loop — 5 topics.

• UI as a Function of State: The Core Idea 9 min read
• Setting Up: Vite, the Modern Starter 10 min read Pro lesson
• Your First Component, Dissected Line by Line 10 min read Pro lesson
• The Render Loop: Predicting What React Does 10 min read Pro lesson
• The Development Tools You'll Live With 11 min read Pro lesson

Module 3: JSX in Depth

JSX in Depth — 5 topics.

• What JSX Is (and What It Isn't) 8 min read
• Compilation: From JSX to JavaScript 9 min read Pro lesson
• The Rules and Their Reasons 10 min read Pro lesson
• Expressions Inside JSX 10 min read Pro lesson
• Fragments, Keys, and the Structural Rules 10 min read Pro lesson

Module 4: Components and Props

Components and Props — 5 topics.

• The Function Component as a Primitive 9 min read
• Props: Passing Data In 10 min read Pro lesson
• Children and Composition 10 min read Pro lesson
• Designing Component APIs 11 min read Pro lesson
• Component Organization: File Structure, Naming, When to Split 12 min read Pro lesson

Module 5: State and `useState`

State and useState — 6 topics.

• What State Is (And Isn't) 9 min read Pro lesson
• useState: The API and the Mental Model 9 min read Pro lesson
• Updating State: Functional Updates and Why They Matter 9 min read Pro lesson
• Lifting State Up, Colocating State Down 9 min read Pro lesson
• Derived State: The Antipattern and the Fix 8 min read Pro lesson
• State Batching and What It Means for You 8 min read Pro lesson

Module 6: Effects and `useEffect`

Effects and useEffect — 6 topics.

• What Effects Are For: The "Synchronization" Mental Model 8 min read Pro lesson
• useEffect: The API 9 min read Pro lesson
• Cleanup and Why It Matters 8 min read Pro lesson
• The Dependency Array: Rules, Gotchas, Exhaustive-Deps 10 min read Pro lesson
• When You Don't Need an Effect (Most Cases) 10 min read Pro lesson
• Common Effect Patterns and Antipatterns 9 min read Pro lesson

Module 7: Events and Handlers

Events and Handlers — 5 topics.

• Synthetic Events: How React Intercepts DOM Events 9 min read
• Event Handler Patterns and the Common Mistakes 9 min read Pro lesson
• Controlled Inputs: The Canonical Form Pattern 10 min read Pro lesson
• Uncontrolled Inputs: When and Why 9 min read Pro lesson
• Real-World Form Complexity: Validation, Errors, Submission 11 min read Pro lesson

Module 8: Lists, Keys, and Conditional Rendering

Lists, Keys, and Conditional Rendering — 5 topics.

• Rendering Lists: The Basic Pattern 7 min read Pro lesson
• Keys: What They Are, Why They Matter, What Makes a Good One 10 min read Pro lesson
• The Conditional Rendering Patterns and Their Gotchas 8 min read Pro lesson
• Empty States and Loading States as First-Class Concerns 10 min read Pro lesson
• When Lists Get Large: Virtualization Preview 8 min read Pro lesson

Module 9: Composition Patterns

Composition Patterns — 5 topics.

• Children as a Slot; Multi-Slot Patterns 8 min read Pro lesson
• Composition Over Configuration 9 min read Pro lesson
• Render Props: What They Were, What Replaced Them 8 min read Pro lesson
• Higher-Order Components: What They Were, What Replaced Them 9 min read Pro lesson
• Compound Components: Still Useful 11 min read Pro lesson

Module 10: Built-in Hooks

Built-in Hooks — 7 topics.

• useContext: Passing Data Through the Tree Without Prop Drilling 10 min read Pro lesson
• useReducer: When useState Gets Unwieldy 9 min read Pro lesson
• useRef: Imperative Escape Hatches and DOM References 9 min read Pro lesson
• useMemo and useCallback: What They Actually Do 8 min read Pro lesson
• useId: Stable IDs for Accessibility 5 min read Pro lesson
• useTransition and useDeferredValue: Concurrent Rendering Primitives 8 min read Pro lesson
• useLayoutEffect, useImperativeHandle, useSyncExternalStore: The Rare Ones 9 min read Pro lesson

Module 11: The Rules of Hooks

The Rules of Hooks — 4 topics.

• The Two Rules and the Mistakes That Motivate Them 9 min read Pro lesson
• How React Identifies Hooks: The Call-Order Mechanism 10 min read Pro lesson
• Why Conditional Hooks Would Break Everything 9 min read Pro lesson
• The Exhaustive-Deps Lint Rule: What It Catches and When to Override It 11 min read Pro lesson

Module 12: Custom Hooks

Custom Hooks — 6 topics.

• When to Extract a Custom Hook 10 min read Pro lesson
• The Composition Patterns: Hooks Calling Hooks 9 min read Pro lesson
• Worked Example: useLocalStorage 9 min read Pro lesson
• Worked Example: useDebounce 7 min read Pro lesson
• Worked Example: useOnClickOutside 9 min read Pro lesson
• Designing Custom Hook APIs 11 min read Pro lesson

Module 13: How React Renders

How React Renders — 5 topics.

• What "Render" Means (The Precise Definition) 8 min read
• When Components Re-Render: The Rules 9 min read Pro lesson
• The Relationship Between Renders, Effects, and Commits 9 min read Pro lesson
• Stale Closures and What Causes Them 10 min read Pro lesson
• Reading the React DevTools Profiler 10 min read Pro lesson

Module 14: Reconciliation and the Virtual DOM

Reconciliation and the Virtual DOM — 5 topics.

• What the Virtual DOM Is 8 min read
• Reconciliation: The Diffing Algorithm 9 min read Pro lesson
• The Two Heuristics: Same-Type Assumption, Key-Based Reordering 9 min read Pro lesson
• Why Keys Matter (The Proper Explanation) 9 min read Pro lesson
• What Gets Unmounted and Re-Mounted (and the Bugs That Creates) 11 min read Pro lesson

Module 15: React Fiber Architecture

React Fiber Architecture — 5 topics.

• Why Fiber: The Limitations of the Stack Reconciler 7 min read Pro lesson
• Fiber as a Data Structure: The Architecture 11 min read Pro lesson
• The Work Loop and How Rendering Pauses 9 min read Pro lesson
• The Scheduler: Priorities and the Concurrent Model 10 min read Pro lesson
• useTransition Revisited: It Makes Sense Now 9 min read Pro lesson

Module 16: Performance: Profiling and Identifying Issues

Performance: Profiling and Identifying Issues — 6 topics.

• When to Care About Performance 10 min read Pro lesson
• React DevTools Profiler: Every Feature 10 min read Pro lesson
• Chrome Performance Tab for React Work 10 min read Pro lesson
• Diagnosing Unnecessary Re-Renders 9 min read Pro lesson
• Diagnosing Expensive Renders 9 min read Pro lesson
• Bundle Analysis: Visualize, Then Trim 10 min read Pro lesson

Module 17: Performance: Optimization and the React Compiler

Performance: Optimization and the React Compiler — 6 topics.

• Memoization: The Actual Semantics 10 min read
• Memoization Correctly Used (and the Cases Where It's Net-Negative) 9 min read Pro lesson
• The React Compiler: What It Does and What It Changes 10 min read Pro lesson
• Virtualization for Large Lists (TanStack Virtual) 9 min read Pro lesson
• Code Splitting With React.lazy and Suspense 9 min read Pro lesson
• The Optimization Checklist: What to Try in What Order 10 min read Pro lesson

Module 18: State Management Beyond `useState`

State Management Beyond useState — 7 topics.

• When Context Is the Answer (and When It Isn't) 9 min read
• useReducer + Context: The Homegrown Pattern 9 min read Pro lesson
• Zustand: Minimal Store, Modern API 9 min read Pro lesson
• Jotai: Atomic State, Different Mental Model 9 min read Pro lesson
• Redux Toolkit: The Mature Option 10 min read Pro lesson
• Picking the Right One: The Decision Framework 9 min read Pro lesson
• Cross-Cutting Patterns: Selectors, Derived State, Normalization 11 min read Pro lesson

Module 19: Server State and Data Fetching

Server State and Data Fetching — 8 topics.

• Server State Is Different: The Mental Model 10 min read Pro lesson
• TanStack Query: The Core API 9 min read Pro lesson
• Cache, Stale Time, GC Time 9 min read Pro lesson
• Mutations and Invalidation 8 min read Pro lesson
• Optimistic Updates 9 min read Pro lesson
• Infinite Queries and Pagination 8 min read Pro lesson
• Suspense Integration and the Modern Patterns 10 min read Pro lesson
• SWR and the Alternatives 9 min read Pro lesson

Module 20: Routing

Routing — 7 topics.

• URL as State: The Routing Mental Model 9 min read
• React Router Fundamentals 9 min read Pro lesson
• Nested Routes and Outlets 9 min read Pro lesson
• Data Loaders and the Data API 10 min read Pro lesson
• Code Splitting Per Route 10 min read Pro lesson
• Search Params and URL State 8 min read Pro lesson
• Navigation Patterns and the User Experience Details 9 min read Pro lesson

Module 21: Forms

Forms — 6 topics.

• Why React Hook Form (vs Vanilla) 8 min read
• The RHF API: register, control, watch, handleSubmit 9 min read Pro lesson
• Zod Schemas and the Validation Integration 9 min read Pro lesson
• Field Arrays and Dynamic Forms 8 min read Pro lesson
• Async Validation and Server Errors 10 min read Pro lesson
• Form UX Details: Focus, Error Display, Loading States 10 min read Pro lesson

Module 22: Styling

Styling — 7 topics.

• The CSS-in-React Landscape 9 min read Pro lesson
• CSS Modules: The Boring, Correct Default 8 min read Pro lesson
• Tailwind: The Modern Utility-First Approach 10 min read Pro lesson
• CSS-in-JS: What It Was, Why It's Declining 9 min read Pro lesson
• Component Libraries: shadcn/ui, Radix, Headless UI 9 min read Pro lesson
• Design Tokens and Theming 9 min read Pro lesson
• Picking an Approach: The Decision Framework 8 min read Pro lesson

Module 23: Testing

Testing — 8 topics.

• Testing Philosophy: What to Test, What Not To 10 min read
• React Testing Library: The Core API 9 min read Pro lesson
• Vitest Setup and Patterns 8 min read Pro lesson
• Testing Components: Render, Query, Interact, Assert 9 min read Pro lesson
• Testing Custom Hooks 8 min read Pro lesson
• Mocking: When, How, What to Avoid 9 min read Pro lesson
• Integration Tests vs E2E (Playwright) 10 min read Pro lesson
• Test Maintenance and the Discipline of Stability 9 min read Pro lesson

Module 24: TypeScript in React

TypeScript in React — 7 topics.

• TypeScript with Function Components: The Basics 9 min read
• Typing Props: Best Practices 8 min read Pro lesson
• Generic Components 8 min read Pro lesson
• Typing Event Handlers and Refs 8 min read Pro lesson
• Typing Children: ReactNode vs JSX.Element vs Others 8 min read Pro lesson
• Typing Custom Hooks 8 min read Pro lesson
• Common Type Challenges and Their Solutions 9 min read Pro lesson

Module 25: React Server Components and Next.js

React Server Components and Next.js — 8 topics.

• What Server Components Are (and What They Aren't) 10 min read Pro lesson
• The Server/Client Component Split 10 min read Pro lesson
• Next.js App Router: The Canonical Implementation 10 min read Pro lesson
• Server Actions and Form Patterns 10 min read Pro lesson
• Streaming and Suspense in RSC 8 min read Pro lesson
• React Router 7 in Framework Mode 9 min read Pro lesson
• When to Use RSC and When Client-Only Is Fine 9 min read Pro lesson
• Migrating Existing Apps: The Realistic Path 12 min read Pro lesson

Module 26: Interview Preparation and Capstone

Interview Preparation and Capstone — 9 topics.

• The React Interview Landscape 11 min read Pro lesson
• Internals Questions: Lifecycle, Reconciliation, Fiber, Hooks 13 min read Pro lesson
• System Design with React in the Stack 11 min read Pro lesson
• Debugging Stories From Frontend Work 11 min read Pro lesson
• The Capstone Project: Spec 10 min read Pro lesson
• Capstone Walkthrough: Setup, Structure, Key Decisions 10 min read Pro lesson
• Capstone Walkthrough: State Management, Data Fetching 10 min read Pro lesson
• Capstone Walkthrough: Testing, Deployment, Production Hardening 13 min read Pro lesson
• Course Closing: What's Next 8 min read Pro lesson

Browse all courses