Videos / Web Dev

Episode 12 of 16 · Web development, end to end

React: the render, and the state that causes it

Chapters

1. Two ways to change a screen0:00
2. The whole claim, once0:14
3. From your function to the document0:29
4. Render, commit, paint0:45
5. The code you stop writing1:02
6. The price of the claim1:18
7. A form letter with blanks1:36
8. J S X is a call1:52
9. Props only go down2:10
10. Children are another prop2:28
11. One tree, from the root2:44
12. Lift what two share3:02
13. The drawer the function keeps3:20
14. Setting is asking, not doing3:38
15. What triggers a re-render3:55
16. Batching decides when4:12
17. Replace, never mutate4:31
18. The cycle, end to end4:49
19. Two charts, laid on each other5:07
20. Same type, or start again5:25
21. Position is identity5:41
22. Keys name the row5:57
23. The index key bug6:14
24. Stable, unique, from the data6:31
25. A wire out of the sealed box6:49
26. The dependency array declares7:07
27. Cleanup, and the double run7:23
28. The effect that computes7:41
29. The effect that was a handler7:56
30. What is left, and when it runs8:12
31. A stopwatch before a guess8:31
32. Three kinds of slow8:49
33. Memo skips the re-run9:07
34. UseMemo keeps a value9:24
35. UseCallback keeps a function9:44
36. Cheaper moves first10:02
37. The whole thing10:21

React: the render, and the state that causes it. There are two ways to change what is on a screen. Find the part that is wrong and edit it in place. Or describe the whole screen for the new moment and let something else work out

Mark as watchedSaved in this browser only.