Reactathon 2023 - Concurrent React Made Easy

Original Slides: https://docs.google.com/presentation/d/15c405YYs4gxTe80QIXwSrVft7jCTNlRrYMUH_myX2EM/edit?usp=sharing

Transcript

1. Concurrent React Made Easy
2. Henrique Inonhe @HInonhe Developer - Codeminer42 Links (Slides, Social Media, etc)
6. • Input Fields • Buttons • Menus • Sliders • “Smaller” UI Units
7. • Input Fields • Buttons • Menus • Sliders • “Smaller” UI Units • Huge List • Dashboard • Spreadsheet • Navigations • “Bigger” UI Units
8. Slow Render Example
9. Synchronous Rendering Update! Main Thread (Your JS code runs here) Render Event Event Event Event Event Event
11. Concurrent React
12. Concurrent Rendering
13. Synchronous Rendering
14. Concurrent Rendering
15. Synchronous Rendering
16. Concurrent Rendering
18. Interruptibility Prioritization Without With Without With !!! !!! !!! !! !! ! ! ! !!! !!! !!! !! !! ! ! !
19. Prioritization Without With !!! !!! !!! !! !! ! ! ! !!! !!! !!! !! !! ! ! ! Interruptibility Without With
20. Interruptibility Without With Prioritization Without With !!! !!! !!! !! !! ! ! ! !!! !!! !!! !! !! ! ! !
21. Interruptibility + Prioritization ! !!! ! !!!
22. High Priority Renders Low Priority Renders • Synchronous • Blocking • Non-interruptible • Interrupt low priority renders • Asynchronous • Non-blocking • Interruptible • Run after high priority renders
23. Low Priority Renders • Asynchronous • Non-blocking • Interruptible • Run after high priority renders High Priority Renders • Synchronous • Blocking • Non-interruptible • Interrupt low priority renders
24. High Priority Renders • Synchronous • Blocking • Non-interruptible • Interrupt low priority renders Low Priority Renders • Asynchronous • Non-blocking • Interruptible • Run after high priority renders
25. Concurrent Rendering ~ Branching Workflow
26. Concurrent Rendering ~ Branching Workflow
27. Concurrent Rendering ~ Branching Workflow
28. Concurrent Rendering ~ Branching Workflow
29. Concurrent Rendering ~ Branching Workflow
30. !!!!!!! !
31. !!!!!!! !
32. !!!!!!! !
33. Using Concurrent Features
34. Without Concurrent Features
35. With Concurrent Features
36. Without Concurrent Features
37. With Concurrent Features
38. Rendering Lifecycle
39. Rendering Lifecycle
40. Rendering Lifecycle
41. Rendering Lifecycle
42. Rendering Lifecycle
43. Rendering Lifecycle
44. Rendering Lifecycle
45. Rendering Lifecycle
46. Rendering Lifecycle
47. Rendering Lifecycle
48. !!!!!!! !
50. !!!!!!! !
51. !!!!!!! !
52. !!!!!!! !
53. 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
54. Thanks! Links (Slides, Social Media, etc)