React Advanced 2023 - Concurrent React Made Easy

Original Slides: https://docs.google.com/presentation/d/1FYBjCkvZnoAq5MRmNcdjozTC51nwuvf2fiL8lG47gjI/edit

Transcript

1. Concurrent React Made Easy
2. Henrique Inonhe @HInonhe Links (Slides, Social Media, etc)
3. User Interface
4. UI Interaction Updated UI Update
5. UI Interaction Updated UI Update
6. UI Interaction Updated UI Update
7. • Input Fields • Buttons • Toggles • Sliders • “Smaller” UI Updates
8. • Input Fields • Buttons • Toggles • Sliders • “Smaller” UI Updates • Huge List • Dashboard • Spreadsheet • Navigations • “Bigger” UI Updates
10. Fast Updates Profile
12. Slow Updates Profile
14. Slow Updates Profile
16. It only takes a single slow update to slow down your entire UI.
18. Synchronous Rendering Update! Main Thread (Your JS code runs here) Render Event Event Event Event Event Event
20. Concurrent React
21. Concurrent Rendering
22. Concurrent Rendering Profile
23. Concurrent Rendering Profile
24. Synchronous Rendering
25. Concurrent Rendering
26. Synchronous Rendering
27. Concurrent Rendering
29. Interruptibility Prioritization Without With Without With !!! !!! !!! !! !! ! ! ! !!! !!! !!! !! !! ! ! !
30. Prioritization Without With !!! !!! !!! !! !! ! ! ! !!! !!! !!! !! !! ! ! ! Interruptibility Without With
31. Interruptibility Without With Prioritization Without With !!! !!! !!! !! !! ! ! ! !!! !!! !!! !! !! ! ! !
32. Interruptibility + Prioritization ! !!! ! !!!
33. High Priority Renders Low Priority Renders • Synchronous • Blocking • Non-interruptible • Interrupt low priority renders • Asynchronous • Non-blocking • Interruptible • Run after high priority renders
34. Low Priority Renders • Asynchronous • Non-blocking • Interruptible • Run after high priority renders High Priority Renders • Synchronous • Blocking • Non-interruptible • Interrupt low priority renders
35. High Priority Renders • Synchronous • Blocking • Non-interruptible • Interrupt low priority renders Low Priority Renders • Asynchronous • Non-blocking • Interruptible • Run after high priority renders
36. Concurrent Rendering ~ Branching Workflow
37. Concurrent Rendering ~ Branching Workflow
38. Concurrent Rendering ~ Branching Workflow
39. Concurrent Rendering ~ Branching Workflow
40. Concurrent Rendering ~ Branching Workflow
41. !!!!!!! !
42. !!!!!!! !
43. !!!!!!! !
44. Using Concurrent Features
45. Without Concurrent Features
46. With Concurrent Features
47. Without Concurrent Features
48. With Concurrent Features
49. Rendering Lifecycle
50. Rendering Lifecycle
51. Rendering Lifecycle
52. Rendering Lifecycle
53. Rendering Lifecycle
54. Rendering Lifecycle
55. Rendering Lifecycle
56. Rendering Lifecycle
57. Rendering Lifecycle
58. Rendering Lifecycle
59. useDeferredValue ~ useTransition
60. Memoized Memoized
63. !!!!!!! !
65. !!!!!!! !
66. !!!!!!! !
67. https://blog.codeminer42.com/everything-you-need-to-know-about -concurrent-react-with-a-little-bit-of-suspense/ Everything You Need to Know About Concurrent React
68. ~/ npm i use-debug-concurrent useDebugConcurrent
69. Thanks! Links (Slides, Social Media, etc)