CourseFlix

Understanding React | Don’t Imitate Understand

17h 3m 45s
English
Paid

Even if you've been using React for years, your mental model is likely inaccurate. That's because the best mental model is understanding how something really works.

React is wildly popular and well-established in the job market for web developers. However, to use and debug it well, you must understand how it actually works.

In this course, designed for both React beginners and experienced React devs you will come to deeply understand how React works under-the-hood by diving into React internals: the React source code itself.

Most courses teach you how to use React. In this course you will fully understand how React works, which will enable you to use and debug React well.

You will gain truly under-the-hood knowledge on topics such as the React Element Tree, the Fiber Tree, JSX, Rendering, Reconciliation, State, Hooks, Effects, Suspense, React Server Components, and more.

That knowledge will give you a clarity that will serve you well every day you use React, or React-based frameworks like Next.js or Remix.

About the Author: Anthony Alicea

Anthony Alicea thumbnail

Anthony Alicea is a US software engineer and educator best known for JavaScript: Understanding the Weird Parts — one of the canonical paid courses on JavaScript's underlying mental model (execution context, scope chain, prototype inheritance, the call stack) and one of the most widely-recommended deep-dives into the language for developers ready to move past surface syntax.

The course catalog extends into TypeScript (the deep type-system material rather than the syntax tour), React, Node.js, and the broader JavaScript ecosystem. The teaching style is unusually rigorous about the language fundamentals — Anthony's courses are taught at the level of someone who wants you to understand why JavaScript behaves the way it does, not just memorise the rules.

The CourseFlix listing under this source carries 7 Anthony Alicea courses spanning that range. Material is paid and aimed at developers ready to deepen their craft on the JavaScript / TypeScript stack.

Watch Online 164 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 164 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (164)
#Lesson TitleDurationAccess
1
Introduction Demo
01:49
2
Setup
01:54
3
A Basic React App
02:08
4
The React Source Code
02:07
5
The DOM and Declarative Programming
00:21
6
HTML and Trees
02:01
7
HTML, The Browser, and the DOM
04:03
8
DOM Manipulation
06:33
9
Conceptual Aside: Imperative vs. Declarative Programming
03:01
10
The DOM and Imperative Programming
03:13
11
The DOM and Declarative Programming
04:09
12
React Elements
00:27
13
Conceptual Aside: Recursion
04:18
14
Conceptual Aside: POJOs
12:53
15
Creating React Elements
11:37
16
React Element Trees
05:26
17
Conceptual Aside: DOM Element References
01:32
18
React Elements and DOM Elements
06:04
19
React DOM Updates
12:12
20
Components
06:02
21
Components and Reusability
11:08
22
Conceptual Aside: Pure Functions
05:19
23
Props
12:25
24
Template Logic
14:12
25
Element Properties
07:19
26
JSX
00:22
27
Conceptual Aside: Markup and Tree Creation Shorthand
01:57
28
Conceptual Aside: Transformation
01:49
29
React Elements and JSX
19:41
30
JSX and Thinking In Elements
12:01
31
Conceptual Aside: HTML Authoring
02:48
32
Fragment and HTML Authoring
10:04
33
Fiber and Reconciliation
00:42
34
Root Creation and render
08:58
35
Conceptual Aside: Trees and Linked Lists
04:23
36
Fiber, Fiber Nodes, and Fiber Trees
06:58
37
Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem
03:45
38
Work-In-Progress Nodes
09:29
39
Reconciliation and Work
05:49
40
Execution Contexts
00:22
41
Conceptual Aside: Execution Contexts and the Event Loop
03:43
42
Fiber and Custom Execution Contexts
04:15
43
Units of Work and The Work Loop
03:01
44
Conceptual Aside: Equality
03:35
45
Beginning, Completing, Bailing Out and Pausing Work
07:02
46
Lanes and Priority
02:36
47
React DOM and Rendering
00:15
48
Committing Work and The Renderer
02:56
49
Mounting, Updating, and Unmounting
04:49
50
Events
00:24
51
DOM Events
11:37
52
React Event Objects
07:53
53
Synthetic Event Properties and Methods
05:44
54
State
00:17
55
Conceptual Aside: State Machines
06:37
56
Conceptual Aside: Pure Functions (again)
02:42
57
UI: A Function of State
02:47
58
Conceptual Aside: Reducers
06:32
59
Actions and State
08:57
60
Hooks and State
00:25
61
Fibers, Hooks, and State
04:05
62
Conceptual Aside: Queues
03:55
63
Update Queues
02:47
64
State and Re-renders
02:39
65
useReducer (Part 1)
07:49
66
useReducer (Part 2)
06:05
67
useState (Part 1)
04:17
68
useState (Part 2)
10:48
69
Rules of Hooks
07:44
70
useState (Part 3)
10:38
71
Conceptual Aside: Shallow Equality and Object.is
08:11
72
Immutable State
07:47
73
Adding Your Own Side Effects: useEffect
00:16
74
Conceptual Aside: Pure Functions and Side Effects
01:32
75
Adding Your Own Effects
11:47
76
Dependencies
08:07
77
A Game of Ping Pong
02:35
78
Unmounting and Effects
09:55
79
Fetching Data...or not
10:27
80
Conceptual Aside: Stale Closures
04:09
81
useEffect and Stale Closures
09:52
82
What Not to Do
10:26
83
useRef and forwardRef
00:24
84
useRef
04:27
85
useRef and the DOM
05:16
86
forwardRef
04:16
87
Custom Hooks
00:25
88
Extracting Custom Hooks
12:31
89
Component Design
00:22
90
Real World Complexity and Loops
18:31
91
Lifting State Up
28:52
92
&&, 0, and Ternary Operators
12:28
93
Children
06:02
94
useContext
00:51
95
Prop Drilling
04:29
96
Context
39:23
97
Context with Caution
02:21
98
useId and Key
00:31
99
useId
08:49
100
Key
15:29
101
memo, useMemo, and useCallback
00:19
102
Conceptual Aside: Memoization
07:32
103
memo
16:01
104
useMemo
20:16
105
useCallback
10:33
106
React Forget
01:38
107
useContext and Reducer
00:22
108
useContext + Reducer
27:23
109
3rd Party State Management
06:15
110
Toolchains
00:50
111
Conceptual Aside: Toolchains
03:50
112
Conceptual Aside: ES Modules
06:02
113
Create React App
01:53
114
Vite
18:46
115
Frameworks
03:51
116
Strict Mode
00:33
117
Adding Strict Mode
03:34
118
Extra Re-render
10:28
119
Extra Effect Re-run
09:14
120
Forms
00:18
121
Reorganizing Our App
15:05
122
Uncontrolled Inputs
05:29
123
Controlled Inputs
13:44
124
form
08:00
125
textarea, select, and More
11:17
126
3rd Party Form Help
01:58
127
Future Form Features
02:13
128
React Dev Tools
00:17
129
Using Dev Tools
03:22
130
useDebugValue
01:47
131
CSS and Components
00:24
132
CSS and React
03:16
133
Toolchains and CSS
04:11
134
CSS Modules and more
04:12
135
Class Project
00:24
136
Spelling Bee
01:59
137
HTML Authoring
03:22
138
Getting the Data
06:22
139
Header
08:49
140
Honeycomb
14:34
141
Shuffle
09:30
142
Words and Letters
12:10
143
Word List
14:50
144
Score
06:07
145
Highlighted Letter
06:09
146
Final Thoughts
03:30
147
Meta-Frameworks
00:21
148
NextJS
03:42
149
Remix
02:26
150
Suspense
00:31
151
Suspense and Frameworks
03:45
152
Suspense and Remix
10:16
153
React Server Components
00:53
154
Server Components
11:55
155
Client Components and 'use client'
05:29
156
RSC Payload
07:59
157
Composing Client and Server Components
07:30
158
Conclusion
01:37
159
UPDATE - 001 - use and Fetching Data (React 19+)
00:26
160
UPDATE - 002 - use and Fetching Data (Part 1)
08:58
161
UPDATE - 003 - use and Fetching Data (Part 2)
07:26
162
UPDATE - 004 - ref as a prop (React 19+)
02:24
163
UPDATE - 005 - use and Context (React 19+)
05:11
164
UPDATE - 006 - use, Reducer, and Context (React 19+)
01:31
Unlock unlimited learning

Get instant access to all 163 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

164 lessons · 17h 3m 45s
Show all 164 lessons
  1. 1 Introduction 01:49
  2. 2 Setup 01:54
  3. 3 A Basic React App 02:08
  4. 4 The React Source Code 02:07
  5. 5 The DOM and Declarative Programming 00:21
  6. 6 HTML and Trees 02:01
  7. 7 HTML, The Browser, and the DOM 04:03
  8. 8 DOM Manipulation 06:33
  9. 9 Conceptual Aside: Imperative vs. Declarative Programming 03:01
  10. 10 The DOM and Imperative Programming 03:13
  11. 11 The DOM and Declarative Programming 04:09
  12. 12 React Elements 00:27
  13. 13 Conceptual Aside: Recursion 04:18
  14. 14 Conceptual Aside: POJOs 12:53
  15. 15 Creating React Elements 11:37
  16. 16 React Element Trees 05:26
  17. 17 Conceptual Aside: DOM Element References 01:32
  18. 18 React Elements and DOM Elements 06:04
  19. 19 React DOM Updates 12:12
  20. 20 Components 06:02
  21. 21 Components and Reusability 11:08
  22. 22 Conceptual Aside: Pure Functions 05:19
  23. 23 Props 12:25
  24. 24 Template Logic 14:12
  25. 25 Element Properties 07:19
  26. 26 JSX 00:22
  27. 27 Conceptual Aside: Markup and Tree Creation Shorthand 01:57
  28. 28 Conceptual Aside: Transformation 01:49
  29. 29 React Elements and JSX 19:41
  30. 30 JSX and Thinking In Elements 12:01
  31. 31 Conceptual Aside: HTML Authoring 02:48
  32. 32 Fragment and HTML Authoring 10:04
  33. 33 Fiber and Reconciliation 00:42
  34. 34 Root Creation and render 08:58
  35. 35 Conceptual Aside: Trees and Linked Lists 04:23
  36. 36 Fiber, Fiber Nodes, and Fiber Trees 06:58
  37. 37 Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem 03:45
  38. 38 Work-In-Progress Nodes 09:29
  39. 39 Reconciliation and Work 05:49
  40. 40 Execution Contexts 00:22
  41. 41 Conceptual Aside: Execution Contexts and the Event Loop 03:43
  42. 42 Fiber and Custom Execution Contexts 04:15
  43. 43 Units of Work and The Work Loop 03:01
  44. 44 Conceptual Aside: Equality 03:35
  45. 45 Beginning, Completing, Bailing Out and Pausing Work 07:02
  46. 46 Lanes and Priority 02:36
  47. 47 React DOM and Rendering 00:15
  48. 48 Committing Work and The Renderer 02:56
  49. 49 Mounting, Updating, and Unmounting 04:49
  50. 50 Events 00:24
  51. 51 DOM Events 11:37
  52. 52 React Event Objects 07:53
  53. 53 Synthetic Event Properties and Methods 05:44
  54. 54 State 00:17
  55. 55 Conceptual Aside: State Machines 06:37
  56. 56 Conceptual Aside: Pure Functions (again) 02:42
  57. 57 UI: A Function of State 02:47
  58. 58 Conceptual Aside: Reducers 06:32
  59. 59 Actions and State 08:57
  60. 60 Hooks and State 00:25
  61. 61 Fibers, Hooks, and State 04:05
  62. 62 Conceptual Aside: Queues 03:55
  63. 63 Update Queues 02:47
  64. 64 State and Re-renders 02:39
  65. 65 useReducer (Part 1) 07:49
  66. 66 useReducer (Part 2) 06:05
  67. 67 useState (Part 1) 04:17
  68. 68 useState (Part 2) 10:48
  69. 69 Rules of Hooks 07:44
  70. 70 useState (Part 3) 10:38
  71. 71 Conceptual Aside: Shallow Equality and Object.is 08:11
  72. 72 Immutable State 07:47
  73. 73 Adding Your Own Side Effects: useEffect 00:16
  74. 74 Conceptual Aside: Pure Functions and Side Effects 01:32
  75. 75 Adding Your Own Effects 11:47
  76. 76 Dependencies 08:07
  77. 77 A Game of Ping Pong 02:35
  78. 78 Unmounting and Effects 09:55
  79. 79 Fetching Data...or not 10:27
  80. 80 Conceptual Aside: Stale Closures 04:09
  81. 81 useEffect and Stale Closures 09:52
  82. 82 What Not to Do 10:26
  83. 83 useRef and forwardRef 00:24
  84. 84 useRef 04:27
  85. 85 useRef and the DOM 05:16
  86. 86 forwardRef 04:16
  87. 87 Custom Hooks 00:25
  88. 88 Extracting Custom Hooks 12:31
  89. 89 Component Design 00:22
  90. 90 Real World Complexity and Loops 18:31
  91. 91 Lifting State Up 28:52
  92. 92 &&, 0, and Ternary Operators 12:28
  93. 93 Children 06:02
  94. 94 useContext 00:51
  95. 95 Prop Drilling 04:29
  96. 96 Context 39:23
  97. 97 Context with Caution 02:21
  98. 98 useId and Key 00:31
  99. 99 useId 08:49
  100. 100 Key 15:29
  101. 101 memo, useMemo, and useCallback 00:19
  102. 102 Conceptual Aside: Memoization 07:32
  103. 103 memo 16:01
  104. 104 useMemo 20:16
  105. 105 useCallback 10:33
  106. 106 React Forget 01:38
  107. 107 useContext and Reducer 00:22
  108. 108 useContext + Reducer 27:23
  109. 109 3rd Party State Management 06:15
  110. 110 Toolchains 00:50
  111. 111 Conceptual Aside: Toolchains 03:50
  112. 112 Conceptual Aside: ES Modules 06:02
  113. 113 Create React App 01:53
  114. 114 Vite 18:46
  115. 115 Frameworks 03:51
  116. 116 Strict Mode 00:33
  117. 117 Adding Strict Mode 03:34
  118. 118 Extra Re-render 10:28
  119. 119 Extra Effect Re-run 09:14
  120. 120 Forms 00:18
  121. 121 Reorganizing Our App 15:05
  122. 122 Uncontrolled Inputs 05:29
  123. 123 Controlled Inputs 13:44
  124. 124 form 08:00
  125. 125 textarea, select, and More 11:17
  126. 126 3rd Party Form Help 01:58
  127. 127 Future Form Features 02:13
  128. 128 React Dev Tools 00:17
  129. 129 Using Dev Tools 03:22
  130. 130 useDebugValue 01:47
  131. 131 CSS and Components 00:24
  132. 132 CSS and React 03:16
  133. 133 Toolchains and CSS 04:11
  134. 134 CSS Modules and more 04:12
  135. 135 Class Project 00:24
  136. 136 Spelling Bee 01:59
  137. 137 HTML Authoring 03:22
  138. 138 Getting the Data 06:22
  139. 139 Header 08:49
  140. 140 Honeycomb 14:34
  141. 141 Shuffle 09:30
  142. 142 Words and Letters 12:10
  143. 143 Word List 14:50
  144. 144 Score 06:07
  145. 145 Highlighted Letter 06:09
  146. 146 Final Thoughts 03:30
  147. 147 Meta-Frameworks 00:21
  148. 148 NextJS 03:42
  149. 149 Remix 02:26
  150. 150 Suspense 00:31
  151. 151 Suspense and Frameworks 03:45
  152. 152 Suspense and Remix 10:16
  153. 153 React Server Components 00:53
  154. 154 Server Components 11:55
  155. 155 Client Components and 'use client' 05:29
  156. 156 RSC Payload 07:59
  157. 157 Composing Client and Server Components 07:30
  158. 158 Conclusion 01:37
  159. 159 UPDATE - 001 - use and Fetching Data (React 19+) 00:26
  160. 160 UPDATE - 002 - use and Fetching Data (Part 1) 08:58
  161. 161 UPDATE - 003 - use and Fetching Data (Part 2) 07:26
  162. 162 UPDATE - 004 - ref as a prop (React 19+) 02:24
  163. 163 UPDATE - 005 - use and Context (React 19+) 05:11
  164. 164 UPDATE - 006 - use, Reducer, and Context (React 19+) 01:31

Related courses

  • React Query thumbnail

    React Query

    By: UI.dev (Tyler McGinnis)
    Learn React Query with the official React Query course. WANT TO SKIP THE DOCS? There s an easier way to master React Query.
    7 hours 1 minute 30 seconds 5 / 5
  • Build a Youtube Clone thumbnail

    Build a Youtube Clone

    By: Antonio Erdeljac (Code With Antonio)
    In this course, you build a full YouTube‑style app from scratch. You use Next.js 15 , React 19 , and tRPC to create a clear and fast stack.
    23 hours 42 minutes 10 seconds
  • Building Applications with React 17 and ASP.NET Core 6 thumbnail

    Building Applications with React 17 and ASP.NET Core 6

    By: Udemy
    With ASP.NET Core we can develop Web APIs using C#. With React you can create modern, fast and flexible web applications. In this course we will use both tools
    19 hours 28 minutes 31 seconds

Frequently asked questions

What is Understanding React | Don’t Imitate Understand about?
Even if you've been using React for years, your mental model is likely inaccurate. That's because the best mental model is understanding how something really works. React is wildly popular and well-established in the job market for web…
Who teaches Understanding React | Don’t Imitate Understand?
Understanding React | Don’t Imitate Understand is taught by Anthony Alicea. You can find more courses by this instructor on the corresponding source page.
How long is Understanding React | Don’t Imitate Understand?
Understanding React | Don’t Imitate Understand contains 164 lessons with a total runtime of 17 hours 3 minutes. All lessons are available to watch online at your own pace.
Is Understanding React | Don’t Imitate Understand free to watch?
Understanding React | Don’t Imitate Understand is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Understanding React | Don’t Imitate Understand online?
Understanding React | Don’t Imitate Understand is available to watch online on CourseFlix at https://courseflix.net/course/understanding-react-don-t-imitate-understand. The page hosts every lesson with the integrated video player; no download is required.