🇬🇧 CityJS London 2025 (Workshop)

React: Internals and Advanced Performance Patterns

Writing fluid user interfaces becomes increasingly challenging as the application complexity increases. Also, in a world with a wide variety of network connections, any user can have a slow experience, and apps that delight users on fast connections can barely be usable on slow ones.

With a methodology based mostly on:

↝ Revisiting Computer Science concepts.

↝ Understanding how tools work under the hood and the rationales behind that by checking their source code.

↝ Leveraging real-world case studies from small, medium, and enterprise-scale companies.

In this workshop, we will address the following topics:

↝ Scheduling, reconciliation, React Fiber, and concurrent React features.

↝ Static analysis, compilers, the React compiler, and Million.js.

↝ Different rendering patterns, like islands, streaming SSR, and React Server Components.

↝ A wide range of native, performance-related, browser APIs.

↝ Measuring responsiveness, and reliably identifying culprits for bad experiences.

↝ Apply modern techniques to legacy codebases, via code generation, polyfilling, and others.

Transcript

1. REAL-WORLD REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS • APRIL 24, 2025. Hello, London! 👋 🇬🇧
2. REAL-WORLD REACT 🔥 INTERNALS AND ADVANCED PERFORMANCE PATTERNS MATHEUS ALBUQUERQUE • @ythecombinator
3. Matheus Albuquerque ↝ 👨💻 Staff SWE @ Medallia ↝ ⚛ Chair @ React Su m m it NYC ↝ ⚡ Google Developer Expert ↝ 𝕏 ythecombinator
4. #question 🤔 Who here works with front-end? And React? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
5. Preamble REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
6. MOTIVATION REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
7. OUR CUSTOMERS & OUR BUSINESSES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
8. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Which browsers are visiting our app? — APP DYNAMICS REPORT • 2022
9. BROWSER MIX — APP DYNAMICS REPORT • 2022
10. BANDWIDTH MIX — GSM ASSOCIATION • 2022
11. BANDWIDTH MIX 6.07 (MBPS) 44.31 (MBPS) — THE STATE OF LTE BY OPEN SIGNAL • 2018
12. #research 📚 40% of Brits reported that they had become physically violent toward their computers. — British Psychology Society • 2009
13. #research 📚 A 500ms delay resulted in up to a 26% increase in frustration and up to an 8% decrease in engagement. — Radware • 2013
14. #research 📚 Delayed web pages caused a 38% rise in mobile users' heart rates — equivalent to the anxiety of watching a horror movie alone. — Ericsson ConsumerLab • 2015
15. BUSINESS OUTCOMES — AKAMAI AND CHROME RESEARCH • 2017
16. #research 📚 53% of mobile users abandon sites that take over 3 seconds to load. — DoubleClick • 2020
18. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
19. OUR INDUSTRY REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
20. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
21. “[…] With React you can build applications without even thinking about performance and the default state is fast.” — Rethinking Best Practices • Pete Hunt, 2013
22. “FAST” PERCEIVED LOAD SPEED HOW QUICKLY A PAGE CAN LOAD AND RENDER ALL OF ITS VISUAL ELEMENTS TO THE SCREEN LOAD RESPONSIVENESS HOW QUICKLY A PAGE CAN LOAD/RUN ANY REQUIRED JS IN ORDER FOR COMPONENTS TO RESPOND TO USER INTERACTION RUNTIME RESPONSIVENESS AFTER THE PAGE LOAD, HOW QUICKLY CAN THE PAGE RESPOND TO USER INTERACTION? SMOOTHNESS DO TRANSITIONS & ANIMATIONS RENDER AT A CONSISTENT FRAME RATE AND FLOW FLUIDLY?
23. PERF MITIGATORS: ↝ shouldComponentUpdate, React.PureComponent ↝ React.memo ↝ useMemo, useCallback ↝ useTransition, useDeferredValue, React.Suspense & others! MAKING THINGS “FAST”
24. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
25. […] “While browsing HackerNews, I sometimes get the feeling that every developer out there is working for FAANG, as there are always posts from those people doing some hyped stu f . Or you might think that PHP is never used nowadays because whenever it’s mentioned, everyone is hating on it in the comments.” […] — The silent majority • Vadim Kravcenko, 2022
26. […] “But let’s be straight, that’s like 1% of all of the developers out there — the rest of them are just lurking and coding with their language of choice and being content with it. Be it Fortran, COBOL, Perl, or PHP.” […] — The silent majority • Vadim Kravcenko, 2022
27. We’ll not focus on… ↝ ISG, SSR, Streaming SSR… ↝ Progressive/Selective/Partial Hydration… ↝ Islands Architecture, Resumability…
28. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
29. MAKING THINGS “FAST” — VAN OKTORP (INSP) • GOOGLE I/O 2018
30. MAKING THINGS “FAST” — VAN OKTORP (INSP) • GOOGLE I/O 2018
31. METHODOLOGY REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
32. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
33. APPLICATION HOLOTYPES
34. APPLICATION HOLOTYPES Portfolio Content Storefront Social Network I m m ersive Holotype Personal Blog CNN Amazon Facebook Figma Interactivity Minimal Linked Articles Purchase Multi-Point, Real-time Everything Session Depth Shallow Shallow Shallow - Medium Extended Deep Values Simplicity Discover-ability Load Performance Dynamicism I m m ersiveness Routing Server Server, HTML Swap HTML Swap, Hybrid Hybrid, Client Client Rendering Static Static, SSR Static, SSR SSR CSR Hydration None Progressive, Partial Partial, Resumable Any None (CSR) Frameworks 11ty Astro, Elder Marko, Qwik, Hydrogen Next, Remix Create React App — PATTERNS FOR BUILDING JAVASCRIPT WEBSITES IN 2022 • RYAN CARNIATO
35. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
36. ↝ REVISITING COMPUTER SCIENCE CONCEPTS. ↝ UNDERSTANDING HOW TOOLS WORK UNDER THE HOOD AND THE RATIONALES BEHIND THEM BY CHECKING THEIR SOURCE CODE. ↝ LEVERAGING REAL-WORLD CASE STUDIES FROM SMALL, MEDIUM, AND ENTERPRISE-SCALE COMPANIES. ↝ MICRO EXPERIMENTS + RESULTS. METHODOLOGY
37. This workshop is designed to empower you with the knowledge and tools needed to tackle a variety of complex React and front-end performance challenges in your personal and professional projects. Also, it’s meant to bridge the gap between foundational computer science concepts and practical front-end development. — React: Internals and Advanced Performance Patterns • Me, 2025
38. METHODOLOGY: INSPIRATION
39. METHODOLOGY: INSPIRATION
40. METHODOLOGY: TOPICS #1 SCHEDULING CS RECAP • SCHEDULING (LONG TASKS, RUNNING STRATEGIES) • IN REACT + ON THE WEB #2 COMPILERS REACT COMPILER • MILLION • CASE STUDIES #3 MEASURING TIMING • PROFILING • SENSORS • CUSTOM METRICS #4 OTHER TECHNIQUES RESOURCE HINTS • PRIORITY HINTS • LAZY-LOADING • PREACT • WINDOWING
41. ↝ CLONING THE REPO NOW. ↝ GETTING THE SLIDES LATER. ↝ QUESTIONS AT THE END OF EACH SECTION. ↝ 15 MINUTES BREAK. METHODOLOGY
42. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
43. METHODOLOGY: DEMO PROJECT
44. METHODOLOGY: DEMO PROJECT
45. METHODOLOGY: DEMO PROJECT
46. Scheduling REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 🔥 🔥 🔥
47. THIS SECTION PRESENTS… #1 FIBER(S) OVERVIEW • UNITS OF WORK • IN NODE • OUT THERE #3 EFFECT HANDLERS OVERVIEW • IN REACT • OUT THERE #2 COROUTINES OVERVIEW • OUT THERE #4 SCHEDULING TASKS • LONG TASKS • TASK RUNNING STRATEGIES
48. THIS SECTION PRESENTS… #6 SCHEDULING ON THE WEB OVERVIEW • NATIVE SCHEDULING API #5 SCHEDULING IN REACT OVERVIEW • HEURISTICS • PRIORITY LEVELS • RENDER LANES • USE CASES
49. FIBER(S) REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
50. OVERVIEW REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
51. STACK FRAMES function add(x,y) { const result = x + y; return result; } add(2, 2)
52. STACK FRAMES let frame: Frame = { return: frame, fn: add, parameters: [2, 2], localVariables: { result: 4, }, } function add(x,y) { const result = x + y; return result; } add(2, 2)
53. STACK FRAMES let frame: Frame = { return: frame, fn: add, parameters: [2, 2], localVariables: { result: 4, }, } let fiber: Fiber = { return: fiber, component: Avatar, props: { id: 4 }, state: { isLoaded: true, }, }
54. FIBERS ↝ FIBER ARCHITECTURE: REACT-SPECIFIC IMPLEMENTATION OF A CALL-STACK-LIKE MODEL WHERE REACT HAS FULL CONTROL OF SCHEDULING WHAT SHOULD BE DONE. ↝ FIBER: A STACK FRAME FOR A REACT COMPONENT.
55. UNITS OF WORK REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
56. UNITS OF WORK ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT DESCRIBES THE WORK THAT NEEDS TO BE DONE. DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK NEEDS TO PERFORM DIFFERENT ACTIVITIES. DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES.
57. UNITS OF WORK DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT DESCRIBES THE WORK THAT NEEDS TO BE DONE. DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK NEEDS TO PERFORM DIFFERENT ACTIVITIES.
58. UNITS OF WORK DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK NEEDS TO PERFORM DIFFERENT ACTIVITIES. EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT DESCRIBES THE WORK THAT NEEDS TO BE DONE.
59. UNITS OF WORK DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT DESCRIBES THE WORK THAT NEEDS TO BE DONE. DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK NEEDS TO PERFORM DIFFERENT ACTIVITIES.
60. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
61. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
62. DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT DESCRIBES THE WORK THAT NEEDS TO BE DONE. DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK NEEDS TO PERFORM DIFFERENT ACTIVITIES. AND THAT MAKES IT A CONVENIENT WAY TO TRACK, SCHEDULE, PAUSE AND ABORT THE WORK. UNITS OF WORK
63. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Inspecting Elements.
64. MANIPULATING UNITS OF WORK REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
65. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
66. “Homoiconicity is a property of some programming languages in which the code used to express a program is written using the data structures of that language.” — Wikipedia
67. HOMOICONICITY (let [x 1] (inc x)) ; = > 2
68. HOMOICONICITY (let [x 1] (inc x)) ; = > 2 PERFORMS A TEMPORARY BINDING (BINDS X TO THE VALUE 1)
69. HOMOICONICITY (let [x 1] (inc x)) ; = > 2 INCREMENTS X TO GIVE THE RETURN VALUE OF 2
70. HOMOICONICITY IT CAN BE THOUGHT OF AS A LIST WITH THREE ELEMENTS: ↝ A SYMBOL NAMED LET ↝ A VECTOR WITH TWO ELEMENTS ↝ A LIST WITH TWO ELEMENTS
71. HOMOICONICITY IT CAN BE THOUGHT OF AS A LIST WITH THREE ELEMENTS: ↝ A SYMBOL NAMED LET ↝ A VECTOR WITH TWO ELEMENTS ↝ A LIST WITH TWO ELEMENTS A SYMBOL (X) AND AN INTEGER A SYMBOL (INC) AND A SYMBOL (X)
72. ↝ REACT ELEMENTS ARE JUST DATA. ↝ JUST LIKE IN LISP, REACT COMPONENTS CAN MANIPULATE THEIR CHILDREN AND RETURN COMPLETELY DIFFERENT THINGS. HOMOICONICITY + REACT
73. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Pattern Matching in React.
74. “[…] Pattern matching consists of specifying patterns to which some data should conform and then checking to see if it does and deconstructing the data according to those patterns.” — Learn You a Haskell
75. PATTERN MATCHING factorial : : (Integral a) = > a - > a factorial 0 = 1 factorial n = n * factorial (n - 1)
76. PATTERN MATCHING fib : : (Integral a) = > a - > a fib 0 = 1 fib 1 = 1 fib n | n > = 2 = fib (n-1) + fib (n-2) factorial > factorial 0 = factorial n =
77. PATTERN MATCHING
78. PATTERN MATCHING / / . . . export function isWhen<Shape extends {}>( child: ElementWithMetadataUnion<Shape> ): child is ElementWithMetadata<WhenProps<Shape > > { return child.element.type === When; } / / . . . export function nodesToElementWithMetadata<Shape extends {}>( children: ReactNode ) { return Children.toArray(children).map((element, idx) = > ({ element: element, position: idx, })) as Array<ElementWithMetadata<Shape > > ; } / / . . .
79. PATTERN MATCHING / / . . . export function isWhen<Shape extends {}>( child: ElementWithMetadataUnion<Shape> ): child is ElementWithMetadata<WhenProps<Shape > > { return child.element.type === When; } / / . . . export function nodesToElementWithMetadata<Shape extends {}>( children: ReactNode ) { return Children.toArray(children).map((element, idx) = > ({ element: element, position: idx, })) as Array<ElementWithMetadata<Shape > > ; } / / . . .
80. PATTERN MATCHING const supportsSensor = () = > Boolean(window.AmbientLightSensor); const AmbientLight = React.lazy(() = > import("./AmbientLight")); const Fallback = React.lazy(() = > import("./Fallback")); export default function MyComponent() { const { Match, When, Otherwise } = usePatternMatch(); return ( <Suspense fallback="Loading"> <Match> <When predicate={supportsSensor}> <AmbientLight /> </When> <Otherwise> <Fallback /> </Otherwise> </Match> </Suspense> ); }
81. PATTERN MATCHING const supportsSensor = () = > Boolean(window.AmbientLightSensor); const AmbientLight = React.lazy(() = > import("./AmbientLight")); const Fallback = React.lazy(() = > import("./Fallback")); export default function MyComponent() { const { Match, When, Otherwise } = usePatternMatch(); return ( <Suspense fallback="Loading"> <Match> <When predicate={supportsSensor}> <AmbientLight /> </When> <Otherwise> <Fallback /> </Otherwise> </Match> </Suspense> ); } PATTERN MATCHING + REACT.SUSPENSE + REACT.LAZY() = USERS DOWNLOAD ONLY THE COMPONENT BUNDLE THAT MATCHES.
82. PATTERN MATCHING const supportsSensor = () = > Boolean(window.AmbientLightSensor); const AmbientLight = React.lazy(() = > import("./AmbientLight")); const Fallback = React.lazy(() = > import("./Fallback")); export default function MyComponent() { const { Match, When, Otherwise } = usePatternMatch(); return ( <Suspense fallback="Loading"> <Match> <When predicate={supportsSensor}> <AmbientLight /> </When> <Otherwise> <Fallback /> </Otherwise> </Match> </Suspense> ); } PATTERN MATCHING + REACT.SUSPENSE + REACT.LAZY() = USERS DOWNLOAD ONLY THE COMPONENT BUNDLE THAT MATCHES. MANIPULATING BASED ON ELEMENTS DATA.
83. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
84. USING FIBERS, REACT CAN: ↝ PAUSE, RESUME, AND RESTART RENDERING WORK ON COMPONENTS AS NEW UPDATES COME IN. ↝ REUSE PREVIOUSLY COMPLETED WORK. ↝ SPLIT WORK INTO CHUNKS AND PRIORITIZE TASKS BASED ON IMPORTANCE. FIBERS IN REACT: RECAP
85. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
86. FIBERS IN REACT: RECAP
87. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
88. FIBERS IN NODE REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
89. ↝ ASYNCHRONICITY IN JAVASCRIPT IS CONTAGIOUS. ↝ IF ANY FUNCTION IS ASYNC, THEN EVERYTHING THAT CALLS IT MUST ALSO BE ASYNC… ↝ …AND SO ON UNTIL THE ENTIRE PROGRAM IS ASYNCHRONOUS. ASYNCHRONICITY IN JAVASCRIPT
90. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
91. ↝ ASYNCHRONICITY IN JAVASCRIPT ISN’T FREE. ↝ EVERY ASYNC FUNCTION CALL HAS TO: ↝ ALLOCATE CALLBACKS & STORE THEM SOMEWHERE. ↝ TAKE A TRIP BACK TO THE EVENT LOOP BEFORE INVOKING THOSE CALLBACKS. ASYNCHRONICITY IN JAVASCRIPT
92. ↝ ITS API HAS TWO MAIN FUNCTIONS FOR COMPILING SASS FILES: ONE SYNC AND ONE ASYNC. ↝ THE ASYNC ONE BECAME WIDELY USED IN PRACTICE BECAUSE IT ENABLED ASYNC PLUGINS (E.G. WEBPACK’S SASS-LOADER). ASYNCHRONICITY & SASS
93. ↝ FOR NODE SASS, THE PERFORMANCE DIFFERENCE WAS NEGLIGIBLE, BECAUSE IT WAS BUILT ON C++. ↝ HOWEVER, DART SASS RUNS AS PURE JAVASCRIPT, WHICH MAKES IT SUBJECT TO JAVASCRIPT’S ASYNCHRONICITY RULES. ASYNCHRONICITY & SASS
94. ↝ THE ASYNC VERSION IN DART SASS WAS 2-3X SLOWER THAN THE SYNC ONE. ↝ THEY STARTED USING NODE-FIBERS TO IMPLEMENT THE ASYNC API USING THE FAST, SYNC, CODE. ASYNCHRONICITY & SASS
95. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
97. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
98. FIBERS OUT THERE REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
99. ↝ A FIBER IS A LIGHTWEIGHT, COOPERATIVE, CONCURRENT EXECUTION UNIT. ↝ FIBERS ARE A COMMON RESOURCE IN SOME OPERATING SYSTEMS AND IN SOME PROGRAMMING LANGUAGES. ↝ RUNTIMES USUALLY INCLUDE A SCHEDULER THAT SCHEDULES THE EXECUTION OF FIBERS. FIBERS OUT THERE
100. FIBERS OUT THERE: BUILT-IN
101. FIBERS OUT THERE: ECOSYSTEM
102. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
103. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
104. COROUTINES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
105. OVERVIEW REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
107. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
108. COROUTINES IN REACT THE IDEA BEHIND COROUTINES — AS OPPOSED TO FIBERS — WAS TO GIVE COMPONENTS EXPLICIT CONTROL OVER YIELDING AND RESUMPTION. COROUTINES APPEARED WHEN WORK ON FIBER WAS FIRST GOING AS A SPECIFIC COMPONENT TYPE.
109. COROUTINES VS. FIBERS
110. COROUTINES VS. FIBERS
111. COROUTINES VS. FIBERS
112. COROUTINES VS. FIBERS FIBERS CONTROL IS PASSED TO A SCHEDULER WHICH DETERMINES WHAT TO RUN NEXT. COROUTINES CONTROL IS PASSED TO THE CALLER AND HANDLED BY APPLICATION CODE.
113. COROUTINES VS. FIBERS ↝ BOTH DECIDE WHEN TO DROP CONTROL (AKA. YIELD). ↝ COROUTINES CAN BE USED TO IMPLEMENT FIBERS BY ALWAYS YIELDING TO A SCHEDULER COROUTINE. ↝ FIBERS CAN BE USED TO IMPLEMENT COROUTINES BY ALLOWING EACH FIBER TO COMMUNICATE TO THE SCHEDULER WHICH FIBER SHOULD BE RUN WHEN IT YIELDS.
114. COROUTINES OUT THERE REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
115. COROUTINES OUT THERE: JAVASCRIPT
116. COROUTINES OUT THERE: BUILT-IN
117. COROUTINES OUT THERE: ECOSYSTEM
118. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
119. EFFECT HANDLERS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
120. OVERVIEW REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
121. EFFECT HANDLERS APPROACH TO REASONING ABOUT COMPUTATIONAL EFFECTS IN PURE CONTEXTS. ↝ EFFECT: A SET OF OPERATIONS. ↝ EFFECT HANDLER: RESPONSIBLE FOR HANDLING THE SEMANTICS OF HOW TO IMPLEMENT EFFECTS.
122. EFFECT HANDLERS: EFF (* state.eff *) type user = string * int effect Get: user effect Set: user - > unit
123. EFFECT HANDLERS: EFF (* state.eff *) type user = string * int effect Get: user effect Set: user - > unit A USER WITH A NAME AND AGE.
124. EFFECT HANDLERS: EFF (* state.eff *) type user = string * int effect Get: user effect Set: user - > unit WE DEFINE EFFECTS WITH THE effect KEYWORD AND A TYPE SIGNATURE.
125. EFFECT HANDLERS: EFF let state = handler | y - > fun currentState - > (y, currentState) | effect Get k - > (fun currentState - > (continue k currentState) currentState) | effect (Set newState) k - > (fun _ - > (continue k ()) newState) ;;
126. EFFECT HANDLERS: EFF let state = handler | y - > fun currentState - > (y, currentState) | effect Get k - > (fun currentState - > (continue k currentState) currentState) | effect (Set newState) k - > (fun _ - > (continue k ()) newState) ;; WE HAVE A handler WITH THREE BRANCHES, AND ALL OF THEM RETURN A FUNCTION.
127. EFFECT HANDLERS: EFF let state = handler | y - > fun currentState - > (y, currentState) | effect Get k - > (fun currentState - > (continue k currentState) currentState) | effect (Set newState) k - > (fun _ - > (continue k ()) newState) ;; NO EFFECT (WHEN WE REACH THE END OF THE BLOCK). y IS THE RETURN VALUE.
128. EFFECT HANDLERS: EFF let state = handler | y - > fun currentState - > (y, currentState) | effect Get k - > (fun currentState - > (continue k currentState) currentState) | effect (Set newState) k - > (fun _ - > (continue k ()) newState) ;; MATCHING OUR EFFECTS.
129. let state = handler | y - > fun currentState - > (y, currentState) | effect Get k - > (fun currentState - > (continue k currentState) currentState) | effect (Set newState) k - > (fun _ - > (continue k ()) newState) ;; EFFECT HANDLERS: EFF k IS A CONTINUATION. IT REPRESENTS THE REST OF THE COMPUTATION AFTER WHERE WE PERFORM AN EFFECT.
130. EFFECT HANDLERS IN REACT REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
131. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
132. function getName(user) { let name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } }
133. function getName(user) { let name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } }
134. function getName(user) { let name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } } THROW → PERFORM CATCH → HANDLE LETS US JUMP BACK TO WHERE WE PERFORMED THE EFFECT.
135. EFFECT HANDLERS ↝ IT DOESN'T REALLY MATTER HOW WE HOLD STATE. ↝ WITH PROMISES, IF WE WERE TO CHANGE IN THE FUTURE, THAT’D REQUIRE CHANGES ACROSS EVERYTHING. ↝ WITH ALGEBRAIC EFFECTS, WE CAN SIMPLY STOP THE CURRENT PROCESS ALTOGETHER UNTIL OUR EFFECTS ARE FINISHED.
136. #1 Layout Algorithm REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
137. LAYOUT ALGORITHM THE REACT TEAM APPARENTLY SPENT SOME TIME EXPERIMENTING WITH EFFECT-HANDLER CONTROL STRUCTURES FOR MANAGING LAYOUT.
138. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
139. #2 Context API Drafts REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
140. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
141. THEY’VE ALSO REMODELED THE CONTEXT API USING ALGEBRAIC EFFECTS. CONTEXT API DRAFTS
142. #3 Side e ff ects within a component REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
143. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
144. function ThemeBorderColorRequest() { } function FancyBox(children) { const color = raise new ThemeBorderColorRequest(); return { borderWidth: '1px', borderColor: color, children: children }; } function BlueTheme(children) { return try { children(); } catch effect ThemeBorderColorRequest - > [, continuation] { continuation('blue'); } } function App(data) { return BlueTheme( FancyUserList.bind(null, data.users) ); }
145. function ThemeBorderColorRequest() { } function FancyBox(children) { const color = raise new ThemeBorderColorRequest(); return { borderWidth: '1px', borderColor: color, children: children }; } function BlueTheme(children) { return try { children(); } catch effect ThemeBorderColorRequest - > [, continuation] { continuation('blue'); } } function App(data) { return BlueTheme( FancyUserList.bind(null, data.users) ); } THROW → RAISE CATCH → CATCH EFFECT
146. #4 Hooks API REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
147. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
148. SEBASTIAN POINTS THAT “CONCEPTUALLY, HOOKS ARE ALGEBRAIC EFFECTS”. HOOKS API
149. HOOKS API ↝ ALGEBRAIC EFFECTS = A SET OF OPERATIONS AND A SET OF EFFECT HANDLERS. ↝ THE OPERATIONS HERE ARE OUR HOOKS (E.G. useState, useEffect, AND SO ON). ↝ WE HAVE TO SET UP HANDLERS IN EFF; IN REACT THEY'RE SET UP AS PART OF THE RENDER CYCLE.
150. HOOKS API ↝ REACT IS RESPONSIBLE FOR MUCH OF THE IMPLEMENTATION OF WHEN/HOW OUR EFFECTS RUN. ↝ BY SPLITTING EFFECTS AND RENDERING, WE ALLOW IT TO RELIEVE US OF SOME COMPLEXITY.
151. #5 Suspense internals REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
152. SUSPENSE INTERNALS
153. SUSPENSE INTERNALS
154. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
155. SUSPENSE INTERNALS A COMPONENT IS ABLE TO SUSPEND THE FIBER IT IS RUNNING IN BY THROWING A PROMISE, WHICH IS CAUGHT AND HANDLED BY THE FRAMEWORK.
156. SUSPENSE INTERNALS A COMPONENT IS ABLE TO SUSPEND THE FIBER IT IS RUNNING IN BY THROWING A PROMISE, WHICH IS CAUGHT AND HANDLED BY THE FRAMEWORK. THROW → HANDLE → RESUME PATTERN.
157. EFFECT HANDLERS OUT THERE REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
158. EFFECT HANDLERS OUT THERE
159. EFFECT HANDLERS OUT THERE
160. EFFECT HANDLERS OUT THERE
161. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
162. SCHEDULING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
163. TASKS A UNIT OF WORK THAT THE BROWSER DOES TO RENDER A FRAME. JAVASCRIPT STYLES LAYOUT PAINT COMPOSITE
164. TASKS JAVASCRIPT STYLES LAYOUT PAINT COMPOSITE
165. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Visualizing long tasks.
166. LONG TASKS
167. LONG TASKS
168. LONG TASKS
169. LONG TASKS ↝ IF A TASK TAKES MORE THAN 50 MS, USER INPUT FEELS DELAYED. ↝ BASED ON THE USER-CENTRIC PERFORMANCE MODEL CALLED RAIL. ↝ THEY TAKE TOO LONG AND BLOCK OTHER TASKS.
170. #question 🤔 How to avoid blocking the main thread? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
171. TASK RUNNING STRATEGIES A B C D
172. TASK RUNNING STRATEGIES ↝ PARALLELISM: MULTIPLE THREADS = MULTIPLE TASKS AT THE SAME TIME ON SEPARATE CPU CORES. ↝ CONCURRENCY: SINGLE THREAD + QUICKLY SWITCHING BETWEEN TASKS. ↝ SCHEDULING: CONCURRENCY + TASK PRIORITIZATION.
173. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
174. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
175. WEB WORKERS ↝ DATA EXCHANGE IS THROUGH MESSAGE-PASSING. ↝ NO ACCESS TO ANY VARIABLES/CODE FROM THE PAGE THAT CREATED THEM OR VICE VERSA. ↝ NO ACCESS TO THE DOM, MAKING UI UPDATES FROM A WORKER BARELY IMPOSSIBLE. ↝ TWO MODELS: ACTORS & SHARED MEMORY.
176. #1 Actors REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
177. WEB WORKERS: ACTORS ↝ EACH ACTOR MAY OR MAY NOT RUN ON A SEPARATE THREAD AND FULLY OWNS THE DATA IT IS OPERATING ON. ↝ ACTORS CAN ONLY SEND/REACT TO MESSAGES. ↝ MAIN THREAD = ACTOR THAT OWNS THE DOM/UI.
178. WEB WORKERS: ACTORS ↝ EVERY MESSAGE WE SEND NEEDS TO BE COPIED. ↝ BALANCE: MOVING CODE TO A WORKER VS COMMUNICATION OVERHEAD/WORKER BEING BUSY. ↝ postMessage IS A FIRE-AND-FORGET MESSAGING MECHANISM WITH NO BUILT-IN UNDERSTANDING OF REQUEST AND RESPONSE.
179. #2 Shared Memory REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
180. WEB WORKERS: ACTORS ↝ ONE DEDICATED TYPE: SharedArrayBuffer. ↝ A LINEAR CHUNK OF MEMORY THAT CAN BE MANIPULATED USING TypedArrays OR DataViews. ↝ IF SENT VIA postMessage, THE OTHER END GETS A HANDLE TO THE EXACT SAME MEMORY CHUNK.
181. WEB WORKERS: ACTORS ↝ MOST OF THE APIS ARE BUILT NO CONCURRENT ACCESS TO OBJECTS IN MIND. ↝ YOU BUILD YOUR OWN MUTEXES AND OTHER CONCURRENT DATA STRUCTURES. ↝ NO DIRECT WAY OF WORKING ON FAMILIAR OBJECTS/ ARRAYS; JUST A SERIES OF BYTES.
182. #3 Web Assembly REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
183. WORKERS: WEB ASSEMBLY ↝ WORKERS + SharedArrayBuffers TO SUPPORT THE THREADING MODEL OF C++ AND OTHERS. ↝ BEST EXPERIENCE FOR SHARED-MEMORY MODEL. ↝ FASTER THAN JS WHEN YOU STAY WITHIN WASM, BUT THE MORE YOU HAVE TO CROSS OVER TO JS APIS THE SLOWER IT IS.
184. WORKERS: WEB ASSEMBLY ↝ JAVASCRIPT IS OFTEN FASTER AT DOING DOM RENDERING. ↝ HIGH-LEVEL LIBRARIES CAN BE MORE PERFORMANT THAN LOW-LEVEL WASM IMPLEMENTATIONS. ↝ DOESN’T OFFER LOT OF THE BENEFITS (AND COMFORT) OF JAVASCRIPT.
185. ↝ Atomics ↝ BuffferBackedObject ↝ Comlink ↝ WorkerDOM ↝ Partytown ↝ AND MUCH MORE!
186. WORKERS ↝ GOOD FOR DATA PROCESSING AND CRUNCHING NUMBERS. ↝ HARD TO USE FOR UI-RELATED STUFF. ↝ HARDER THAN ADJUSTING IT FOR A SCHEDULER.
187. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
188. SCHEDULING IN REACT?
189. SCHEDULING IN REACT REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
190. OVERVIEW REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
191. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Expensive component with a CPU-bound operation.
192. #question 🤔 How could we improve that?
193. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
194. SCHEDULING WITH… OUR SCHEDULER
195. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Expensive component with a CPU-bound operation + our custom scheduler.
196. function* resourcefulOperation(value: number) { let newValue = String(value); while (true) { yield; for (let i = 0; i < 1000000; i++) { newValue = `${value} + ${i} = ${value + i}`; } return newValue; } } const initialValue = 0; const scheduler = new Scheduler(resourcefulOperation, initialValue); function ResourcefulComponent(props: { value: number }) { const { value } = props; const result = scheduler.performUnitOfWork(value); return <p>{result}</p>; } PROMOTED TO A GENERATOR YIELDING EXECUTION DOING CONCURRENT TASKS
197. #question 🤔 Did we just useTransition’ed?
198. function resourcefulOperation(value: number) { let newValue = String(value); for (let i = 0; i < 1000000; i++) { newValue = `${value} + ${i} = ${value + i}`; } return newValue; } function ResourcefulComponent(props: { value: number }) { const { value } = props; const result = resourcefulOperation(value); return <p>{result}</p>; } SCHEDULING WITH… OUR SCHEDULER
199. function resourcefulOperation(value: number) { let newValue = String(value); for (let i = 0; i < 1000000; i++) { newValue = `${value} + ${i} = ${value + i}`; } return newValue; } function ResourcefulComponent(props: { value: number }) { const [_, startTransition] = useTransition(); const [result, setResult] = useState(""); useEffect(() = > { startTransition(() = > { const newResult = resourcefulOperation(props.value); setResult(newResult); }); }, [props.value]); return <p>{result}</p>; } SCHEDULING WITH… OUR SCHEDULER
200. HEURISTICS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
201. HEURISTICS ↝ A COOPERATIVE MULTITASKING MODEL. ↝ A SINGLE INTERRUPTIBLE RENDERING THREAD. ↝ RENDERING CAN BE INTERLEAVED WITH OTHER MAIN THREAD TASKS AND OTHER REACT RENDERS. ↝ AN UPDATE CAN HAPPEN IN THE BACKGROUND WITHOUT BLOCKING THE RESPONSE TO NEW INPUT.
202. HEURISTICS ↓ ORIGINAL RENDER TASK USER INPUT → ↑ HIGHER PRIORITY RENDER TASK ↓ RESUME ORIGINAL RENDER TASK
203. HEURISTICS
204. HEURISTICS
205. HEURISTICS ↝ IT YIELDS EXECUTION IS BACK TO THE MAIN THREAD EVERY 5MS. ↝ IT'S SMALLER THAN A SINGLE FRAME EVEN ON 120FPS, SO IT WON'T BLOCK ANIMATIONS. ↝ IN PRACTICE, RENDERING IS INTERRUPTIBLE.
206. PRIORITY LEVELS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
207. PRIORITY LEVELS
208. PRIORITY LEVELS
209. PRIORITY LEVELS PRIORITY TIMEOUT WHEN I m m ediate SYNCHRONOUSLY TASKS THAT NEED TO RUN SYNCHRONOUSLY UserBlocking 250MS RESULTS OF A USER INTERACTION (E.G. A BUTTON CLICK) Normal 5S UPDATES THAT DON’T HAVE TO FEEL INSTANTANEOUS Low 10S TASKS THAT CAN BE DEFERRED BUT MUST STILL COMPLETE EVENTUALLY (E.G. AN ANALYTICS NOTIFICATION) Idle NO TIMEOUT TASKS THAT DO NOT HAVE TO RUN AT ALL (E.G. HIDDEN OFFSCREEN CONTENT)
210. RENDER LANES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
211. RENDER LANES ↝ ONE LANE: ONE BIT IN A BITMASK. ↝ ONE UPDATE IN REACT: ONE LANE. ↝ ONE RENDER IN REACT: ONE OR MORE LANES. ↝ UPDATES IN THE SAME LANE: RENDER IN THE SAME BATCH. ↝ DIFFERENT LANES: SEPARATE BATCHES.
212. RENDER LANES ↝ 31 LEVELS OF GRANULARITY (= ONE BITMASK). ↝ ALLOWS TO CHOOSE WHETHER TO RENDER MULTIPLE TRANSITIONS IN A SINGLE BATCH OR RENDER THEM INDEPENDENTLY. ↝ REDUCES OVERHEAD OF MULTIPLE LAYOUT PASSES, STYLE RECALCULATIONS, AND MULTIPLE PAINTS.
214. #question 🤔 How do we bene fi t from these in our everyday projects?
215. USE CASES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
216. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Handling large sets of data #1 of 3
217. HANDLING LARGE SETS OF DATA 😔 NON-PRACTICAL… ↝ FINDING PRIMES ↝ CRACKING PASSWORDS ↝ SIERPINSKI TRIANGLE 😊 PRACTICAL… ↝ RENDERING MANY DATA-POINTS ↝ RENDERING ON A <canvas> ↝ PROCESSING DATA
218. HANDLING LARGE SETS OF DATA 😔 NON-PRACTICAL… ↝ FINDING PRIMES ↝ CRACKING PASSWORDS ↝ SIERPINSKI TRIANGLE 😊 PRACTICAL… ↝ RENDERING MANY DATA-POINTS ↝ RENDERING ON A <canvas> ↝ PROCESSING DATA
219. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
220. CASE STUDY
221. FAST COMPUTER + NO TRANSITIONS
222. FAST COMPUTER + TRANSITIONS
223. SLOW COMPUTER + NO TRANSITIONS
224. SLOW COMPUTER + TRANSITIONS
225. ↝ ˜100K DATA POINTS PLOTTED ↝ SUPPORT FOR SEARCHING AND FILTERING. ↝ USED WORKERS + REDUX-SAGA UTILITIES + DEBOUNCING. ↝ COULD'VE USED TRANSITIONS. LOCATION DATA #1 of 2 REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
226. GAME ADMIN PANEL REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ ↝ THOUSANDS OF REAL-TIME PLAYERS MESSAGING. ↝ SUPPORT FOR SEARCHING AND FILTERING. ↝ USED VIRTUALIZATION AND MEMOIZATION. ↝ COULD'VE USED TRANSITIONS. #2 of 2
227. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Tackling Wasted Renders #2 of 3
228. useSyncExternalStore function useSyncExternalStore<Snapshot>( subscribe: (onStoreChange: () = > void) = > () = > void, getSnapshot: () = > Snapshot, getServerSnapshot?: () = > Snapshot ): Snapshot;
229. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
230. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
231. useSyncExternalStore
232. useSyncExternalStore
233. #question 🤔 How do we bene fi t from these in our everyday projects?
234. useLocation
235. useLocation function Pathname() { const { pathname } = useLocation(); return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } = useLocation(); return <Badge title={hash} subtitle="hash" />; }
236. useLocation function Pathname() { const { pathname } = useLocation(); return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } = useLocation(); return <Badge title={hash} subtitle="hash" />; } OVER-RETURNING HOOK
237. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Wasted renders when using useLocation.
238. useHistorySelector function useHistorySelector(selector) { const history = useHistory(); return useSyncExternalStore(history.listen, () = > selector(history)); } function Pathname() { const pathname = useHistorySelector((history) = > history.location.pathname); return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const hash = useHistorySelector((history) = > history.location.hash); return <Badge title={hash} subtitle="hash" />; }
239. useHistorySelector function useHistorySelector(selector) { const history = useHistory(); return useSyncExternalStore(history.listen, () = > selector(history)); } function Pathname() { const pathname = useHistorySelector((history) = > history.location.pathname); return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const hash = useHistorySelector((history) = > history.location.hash); return <Badge title={hash} subtitle="hash" />; }
240. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Fixing wasted renders using useSyncExternalStore.
241. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Async/await for React components #3 of 3
242. REACT USE
243. REACT USE
244. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
245. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Creating our own version of pmndrs/suspend- react.
246. #question 🤔 Did we just create react.use()?
249. SCHEDULING ON THE WEB REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
250. SCHEDULING ON THE WEB WE HAVE A FEW SCHEDULING PRIMITIVES: ↝ setTimeout ↝ requestAnimationFrame ↝ requestIdleCallback ↝ postMessage
251. SCHEDULING ON THE WEB ↝ WE ALL SHOULD USE THE SAME SCHEDULER. ↝ HAVING MORE THAN ONE SCHEDULER CAUSES RESOURCE FIGHTING. ↝ INTERLEAVING TASKS WITH BROWSER WORK (RENDERING, GARBAGE COLLECTION, ETC.).
252. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
253. SCHEDULING API ↝ A MORE ROBUST SOLUTION FOR SCHEDULING TASKS. ↝ INTEGRATED DIRECTLY INTO THE EVENT LOOP. ↝ CONTROL AND SCHEDULE PRIORITIZED TASKS IN A UNITED AND FLEXIBLE WAY. ↝ ALIGNED WITH THE WORK OF THE REACT TEAM AND IN COOPERATION WITH GOOGLE, W3C AND OTHERS.
254. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
255. SCHEDULING API scheduler.postTask() SCHEDULE AND CONTROL PRIORITIZING TASKS. scheduler.wait() YIELD AND RESUME AFTER SOME AMOUNT OF TIME OR PERHAPS AFTER AN EVENT HAS OCCURRED. scheduler.yield() BREAK UP LONG TASKS BY YIELDING TO THE BROWSER AND CONTINUING AFTER BEING RESCHEDULED. isInputPending() DETERMINE IF THE CURRENT TASK IS BLOCKING INPUT EVENTS.
256. SCHEDULING API: isInputPending while (workQueue.length > 0) { if (navigator.scheduling.isInputPending()) { / / Stop doing work to handle any input event break; } let job = workQueue.shift(); job.execute(); }
257. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
258. SCHEDULING API: isInputPending
259. SCHEDULING API
260. #protip 💡 Code that yields too often can cause the overhead of scheduling tasks to become a negative in fl uence on your app’s overall performance.
261. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 15 minutes.
262. Compilers REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 🔥 🔥
263. THIS SECTION PRESENTS… #1 INTRODUCTION MOTIVATION • COMPILERS & STATIC ANALYSIS #2 REACT COMPILER OVERVIEW • WHAT THE COMPILER DOES • WHAT THE COMPILER DOES NOT DO #3 MILLION MILLION LINT • MILLION.JS #4 COMPILERS FOR US TREE SHAKING • UPGRADING REACT • MIGRATING FROM JQUERY
264. INTRODUCTION REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
265. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
266. “So here’s my advice for anyone who wants to make a dent in the future of web development: time to learn how compilers work.” Compilers are the New Frameworks • Tom Dale, 2017
267. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
268. COMPILERS…
269. COMPILERS & STATIC ANALYSIS… ↝ LINTERS: ESLint (2013), TSLint (2015), Biome (2023), Oxlint (2023)… ↝ FORMATTERS: Prettier (2017), dprint (2020), Biome (2023)… ↝ BUNDLERS: Webpack (2012), Rollup (2015), Vite (2020), esbuild (2020), Rspack (2022), Rolldown (2023)…
270. COMPILERS & STATIC ANALYSIS… ↝ TRANSPILERS: Babel (2014), SWC (2020)… ↝ TYPE CHECKERS: TypeScript (2012), Flow (2014)… ↝ MINIFIERS: UglifyJS (2010), Terser (2018)… ↝ CSS PROCESSING & OPTIMIZATION: PostCSS (2013), CSSO (2015), cssnano (2015), LightningCSS (2022)…
271. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
272. “Reactive systems have existed even in this space for years. In fact, reactivity was seen as a bad thing for a while with the rise of the popularity of React. The thing that has made reactive programming interesting again are compilers.” Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022
273. “Static analysis and compilation let us take what we know of your code's structure and optimize the creation paths as we already know what you are trying to create. We can see what parts of the template are static. We can infer from where dynamic sections are used how to run the most optimal code.” Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022
274. COMPILERS & STATIC ANALYSIS…
275. REACT COMPILER REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
276. OVERVIEW REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
277. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
278. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
279. REACT COMPILER ↝ IMPROVE THE RENDERING PERFORMANCE BY AUTOMATICALLY GENERATING THE EQUIVALENT OF useMemo, useCallback, AND memo CALLS. ↝ MINIMIZE THE COST OF RE-RENDERING WHILE RETAINING REACT’S PROGRAMMING MODEL. ↝ AUTOMATIC OPTIMIZATION COMPILER.
280. REACT COMPILER: TOOLING
281. REACT COMPILER: TOOLING
282. REACT COMPILER: CASE STUDIES
283. THE COMPILER HANDLES FOR YOU… REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
284. THE COMPILER HANDLES FOR YOU…
285. #1 Basic memoization REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
286. EXPENSIVE COMPONENTS function App() { return items.map((item) = > ( <> <ExpensiveComponent text={item.text} /> <div>Not Expensive</div> </> )); }
287. EXPENSIVE COMPONENTS function App() { return items.map((item) = > ( <> {useMemo( () = > ( <ExpensiveComponent text={item.text} /> ), [item.text], )} <div>Not Expensive</div> </> )); }
288. EXPENSIVE OPERATIONS function App() { const num = computeFibonacci(100); return <div>{num}</div>; }
289. EXPENSIVE OPERATIONS function App() { const num = useMemo(() = > computeFibonacci(100), []); return <div>{num}</div>; }
290. OBJECTS THAT RECREATE ON RENDER function Parent() { const [data, setData] = useState([]); return <ChildComponent state={{ data, setData }} />; }
291. OBJECTS THAT RECREATE ON RENDER function Parent() { const [data, setData] = useState([]); return <ChildComponent state={useMemo(() = > ({ data, setData }), [data])} />; }
292. #2 Alias analysis REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
293. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
294. ALIAS ANALYSIS ↝ TWO COMMON KINDS OF POINTER ANALYSIS ARE ALIAS ANALYSIS AND POINTS-TO ANALYSIS. ↝ IT'S USED TO DETERMINE IF VARIABLES (OR MEMORY LOCATIONS) REFER TO THE SAME UNDERLYING DATA. ↝ IT HELPS COMPILERS OPTIMIZE CODE BY REORDERING INSTRUCTIONS, ELIMINATING REDUNDANT CALCULATIONS AND AVOIDING UNINTENDED SIDE EFFECTS.
295. ALIAS ANALYSIS function example(arr) { arr[0] = 10; const value = arr[0]; return value; }
296. ALIAS ANALYSIS function example(arr) { arr[0] = 10; const value = arr[0]; return value; } DOES `VALUE` ALWAYS EQUAL 10?
297. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
298. ALIAS ANALYSIS: EXAMPLE #1 function Component({ a, b }) { const x = []; x.push(a); return <Foo x={x} />; } function Component({ a, b }) { > = }
299. function Component({ a, b }) { = } function Component({ a, b }) { const x = useMemo(() = > { const x = []; x.push(a); return x; }, [a]); return <Foo x={x} />; } ALIAS ANALYSIS: EXAMPLE #1
300. #question 🤔 Is this okay?
301. function Component({ a, b }) { const x = []; x.push(a); const y = x; y.push(b); return <Foo x={x} />; } function Component({ a, b }) { > = > = } ALIAS ANALYSIS: EXAMPLE #2
302. function Component({ a, b }) { = = } function Component({ a, b }) { const x = useMemo(() = > { const x = []; x.push(a); return x; }, [a]); const y = useMemo(() = > { const y = x; y.push(b); return y; }, [x, b]); return <Foo x={x} />; } ALIAS ANALYSIS: EXAMPLE #2
303. #question 🤔 Is this okay?
304. function Component({ a, b }) { const x = []; x.push(a); const y = x; y.push(b); return <Foo x={x} />; } function Component({ a, b }) { > = > = } ❌ ALIAS ANALYSIS: EXAMPLE #2
305. function Component({ a, b }) { = = } function Component({ a, b }) { const x = useMemo(() => { const x = []; x.push(a); const y = x; y.push(b); return y; }, [a, b]); return <Foo x={x} />; } ALIAS ANALYSIS: EXAMPLE #2
306. #3 REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
307. THE COMPILER DOESN’T HANDLE FOR YOU… REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
308. THE COMPILER DOESN’T HANDLE FOR YOU…
309. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
310. #1 Broken Rules of React REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
311. GOTCHAS #1: DEPENDENCIES ARRAY
312. GOTCHAS #1: DEPENDENCIES ARRAY const Component = ({currentValue, onValueChange}) = > { useEffect(() = > { onValueChange(currentValue) }, currentValue); };
313. GOTCHAS #1: REF ACCESS
314. GOTCHAS #1: REF ACCESS
315. GOTCHAS #1: REF ACCESS export default function usePrevious<T>(state: T): T | undefined { const ref = useRef<T>(); useEffect(() = > { ref.current = state; }); return ref.current; }
316. #2 Tagged Template With Interpolations REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
317. GOTCHAS #2: INTERPOLATIONS <div className="min-h-screen bg-slate-50" style={{ padding: '1rem', marginLeft: `${navWidth ?? "var( - - nav-width)"}` }} >
318. <div className="min-h-screen bg-slate-50" style={{ padding: '1rem', marginLeft: `${navWidth ?? "var( - - nav-width)"}` }} > GOTCHAS #2: INTERPOLATIONS
319. GOTCHAS #2: INTERPOLATIONS
320. #3 Complex key expressions / Computed keys REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
321. GOTCHAS #3: COMPUTED KEYS const [currentLevel, setCurrentLevel] = useState(difficulty) const useRatingSystem = (props: RecipeProps) = > { return { [props.difficulty]: "⭐".repeat(props.difficulty === 'easy' ? 1 : props.difficulty === 'medium' ? 2 : 3) } } const rating = useRatingSystem({ difficulty: currentLevel })
322. const [currentLevel, setCurrentLevel] = useState(difficulty) const useRatingSystem = (props: RecipeProps) = > { return { [props.difficulty]: "⭐".repeat(props.difficulty === 'easy' ? 1 : props.difficulty === 'medium' ? 2 : 3) } } const rating = useRatingSystem({ difficulty: currentLevel }) GOTCHAS #3: COMPUTED KEYS
323. GOTCHAS #3: COMPUTED KEYS
324. THE COMPILER DOESN’T HANDLE FOR YOU…
325. MILLION LINT REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
326. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
327. #1 REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
328. #2 REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
329. #3 REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
330. #4 REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
331. MILLION LINT: COMPILER function App({ start }) { const [count, setCount] = useState(start); useEffect(() = > { console.log("double: ", count * 2); }, [count]); return <Button onClick={() = > setCount(count + 1)}>{count}</Button>; }
332. MILLION LINT: COMPILER function App({ start }) { Million.capture({ start }); const [count, setCount] = Million.capture(useState)(start); useEffect( () = > { console.log("double: ", count * 2); }, Million.capture([count]), ); return Million.capture( <Button onClick={() = > setCount(count + 1)}>{count}</Button>, ); }
333. MILLION LINT: COMPILER [ 'src/App.jsx': { components: { App: { renders: [{ count: 7, time: 0.1 }, . . . ], instances: 3, count: 70, time: 1, location: [13, 0, 23, 1], } } } ]; [ { kind: 'state', count: 7, time: 0.1, changes: [{ prev: 0, next: 8 }, . } ];
334. MILLION LINT: COMPILER [ 'src/App.jsx': { components: { App: { renders: [{ count: 7, time: 0.1 }, . instances: 3, count: 70, time: 1, location: [13, 0, 23, 1], } } } ]; [ { kind: 'state', count: 7, time: 0.1, changes: [{ prev: 0, next: 8 }, . . . ], } ];
335. COMPILERS FOR US REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
336. UPGRADING REACT REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2018 📅 2023 📅 2025 📅 2022
337. REACT 16 ↝ 17: PERF ENABLER
338. REACT 15 ↝ 16: CASE STUDY
339. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
340. #definition 🧐 jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript fi les.
341. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
342. REACT 15 ↝ 16: CASE STUDY
343. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
344. REACT 15 ↝ 16: AST
345. export default function transformer(file: FileInfo, api: API) { const j = api.jscodeshift; const root = j(file.source); const variableDeclarators = root.findVariableDeclarators('foo'); variableDeclarators.renameTo('bar'); return root.toSource(); } REACT 15 ↝ 16: AST
346. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
347. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
348. jscodeshift -t ./node_modules/@wdio/codemod/v6 ./wdio.conf.js jscodeshift -t ./node_modules/@wdio/codemod/v6 ./src/e2e/ * WEBDRIVER 4 ↝ 7: CODEGEN
349. WEBDRIVER 4 ↝ 7: GOTCHAS
350. WEBDRIVER 4 ↝ 7: CODEGEN
351. REACT 16 ↝ 17: PERF ENABLER
352. REACT n ↝ 19: DEPRECATIONS
353. REACT n ↝ 19: CODEMODS
354. CODEMODS: OTHER COMPANIES
355. CODEMODS: OTHER ECOSYSTEMS
356. MIGRATING FROM JQUERY REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2024 📅 2025
357. JQUERY: OVERVIEW
358. — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION JQUERY: OVERVIEW
359. JQUERY: OVERVIEW
360. JQUERY: DETECTION
361. JQUERY: DETECTION
362. JQUERY: DETECTION
363. JQUERY: CONVERSION
364. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
365. Measuring REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 🔥 🔥
366. REAL USER MONITORING (RUM)
367. THIS SECTION PRESENTS… #1 TIMING USER TIMING • ELEMENT TIMING • EVENT TIMING • RESOURCE TIMING • NAVIGATION TIMING • SERVER TIMING #3 SENSORS BATTERY STATUS • NETWORK INFORMATION #2 PROFILING LONG TASKS API • USERAGENT SPECIFIC MEMORY • JAVASCRIPT SELF-PROFILING API #4 CUSTOM METRICS USER FRUSTRATION • MONITORING THIRD-PARTIES
368. TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
369. USER TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
370. USER TIMING / / Record the time i m m ediately before running a task performance.mark('myTask:start'); await doMyTask(); / / Record the time i m m ediately after running a task performance.mark('myTask:end'); / / Measure the delta between the start and end of the task performance.measure('myTask', 'myTask:start', ‘myTask:end'); observer.observe({type: 'measure'});
371. USER TIMING
372. USER TIMING: TOOLS — "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
373. USER TIMING: TOOLS — "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS — "USER TIMING AND CUSTOM METRICS" BY STEVE SOUDERS
374. ELEMENT TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
375. ELEMENT TIMING ↝ ALLOWS YOU TO MEASURE THE RENDER TIME OF SPECIFIC ELEMENTS. ↝ USEFUL FOR KNOWING WHEN THE LARGEST IMAGE OR TEXT BLOCK WAS PAINTED TO THE SCREEN. ↝ THE BASIS FOR THE LARGEST CONTENTFUL PAINT (LCP) METRIC.
376. ELEMENT TIMING <img elementtiming="hero-image" /> <p elementtiming="important-paragraph">This is text I care about.</p> observer.observe({type: 'element'});
377. ELEMENT TIMING: TOOLS — "ELEMENT TIMING: ONE TRUE METRIC TO RULE THEM ALL?" BY ANDY DAVIES
378. EVENT TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
379. EVENT TIMING ↝ USEFUL TO MEASURE THE EVENT PROCESSING TIME AS WELL AS THE TIME UNTIL THE NEXT FRAME CAN BE RENDERED. ↝ EXPOSES A NUMBER OF TIMESTAMPS IN THE EVENT LIFECYCLE. ↝ THE BASIS FOR THE FIRST INPUT DELAY METRIC.
380. EVENT TIMING MEASURE THE LATENCY… ↝ FROM A CLICK UNTIL WE REORDER CONTENT ON A TABLE. ↝ TO DRAG A SLIDER TO FILTER SOME DATA. ↝ FOR A FLYOUT TO APPEAR WHEN HOVERING A MENU ITEM.
381. EVENT TIMING const observer = new PerformanceObserver((entryList) = > { const firstInput = entryList.getEntries()[0]; const firstInputDelay = firstInput.processingStart - firstInput.startTime; / / Measure the time it takes to run all event handlers const firstInputProcessingTime = firstInput.processingEnd - firstInput.processingStart; / / Measure the entire duration of the event const firstInputDuration = firstInput.duration; }); observer.observe({type: 'first-input'});
382. RESOURCE TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
383. RESOURCE TIMING const observer = new PerformanceObserver((list) = > { for (const entry of list.getEntries()) { / / If transferSize is 0, the resource was fulfilled via the cache. console.log(entry.name, entry.transferSize === 0); } }); observer.observe({type: 'resource'});
384. NAVIGATION TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
385. NAVIGATION TIMING const observer = new PerformanceObserver((list) = > { for (const entry of list.getEntries()) { console.log('Time to first byte', entry.responseStart); } }); observer.observe({type: 'navigation'});
386. NAVIGATION TIMING
387. NAVIGATION TIMING / / ServiceWorker startup time const workerStartupTime = entry.responseStart - entry.workerStart; / / Request time only (excluding redirects, DNS, and connection/TLS time) const requestTime = entry.responseStart - entry.requestStart; / / Response time only (download) const responseTime = entry.responseEnd - entry.responseStart; / / Request + response time const requestResponseTime = entry.responseEnd - entry.requestStart;
388. SERVER TIMING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
389. SERVER TIMING MEASURE ANY WORK THAT THE SERVER DOES TO COMPLETE A REQUEST: ↝ ROUTING/AUTHENTICATING THE REQUEST. ↝ RUNNING CONTENT THROUGH TEMPLATING SYSTEMS. ↝ QUERYING DATABASES/API CALLS TO THIRD-PARTY SERVICES.
390. SERVER TIMING Server-Timing: database;dur=123;desc="Database", templating;dur=56;desc="Template processing"
391. SERVER TIMING
392. SERVER TIMING
393. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
394. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
395. PROFILING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
396. LONG TASKS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
397. LONG TASKS ↝ REPORTS TASKS THAT TAKES LONGER THAN 50 MS. ↝ USEFUL TO TRACK WHEN THE BROWSER'S MAIN THREAD IS BLOCKED. ↝ THE BASIS FOR TIME TO INTERACTIVE (TTI) AND TOTAL BLOCKING TIME (TBT) METRICS.
398. LONG TASKS observer.observe({type: 'longtask'});
399. LONG TASKS observer.observe({type: 'longtask'}); { name: "same-origin-descendant", entryType: "longtask", startTime: 1023.40999995591, duration: 187.19000002602115, attribution: [ { name: "unknown", entryType: "taskattribution", startTime: 0, duration: 0, containerType: "iframe", containerSrc: "child.html", containerId: "", containerName: "child1" } ] };
400. JS SELF-PROFILING API REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
401. JS SELF-PROFILING API const profiler = new Profiler({ sampleInterval: 10, maxBufferSize: 10000 }); / / Do work . . . const trace = await profiler.stop(); sendProfile(trace);
402. JS SELF-PROFILING API ↝ PROFILE SPECIFIC COMPLEX OPERATIONS. ↝ PROFILE THIRD-PARTY SCRIPTS. ↝ COMBINE WITH OTHER EVENTS/IMPORTANT METRICS, LIKE LONG TASKS OR EVENT TIMING APIS.
403. USERAGENT SPECIFIC MEMORY REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
404. USERAGENT SPECIFIC MEMORY ↝ MEASURES THE MEMORY USAGE AND DETECTS MEMORY LEAKS. ↝ WAITS FOR THE NEXT GC AND THEN MEASURES MEMORY IMMEDIATELY AFTER THE UNNEEDED MEMORY HAS BEEN RELEASED. ↝ FORCES GC IF IT DOES NOT HAPPEN FOR 20S.
405. MEMORY LEAKS ↝ FORGETTING TO UNREGISTER AN EVENT LISTENER. ↝ ACCIDENTALLY CAPTURING OBJECTS FROM AN IFRAME. ↝ NOT CLOSING A WORKER. ↝ ACCUMULATING OBJECTS IN ARRAYS.
406. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
407. MEMORY LEAKS const obj = { a: new Array(1000), b: new Array(2000) }; setInterval(() = > { console.log(obj.a); }, 1000);
408. USERAGENT SPECIFIC MEMORY performance.measureUserAgentSpecificMemory()
409. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
410. SENSORS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
411. BATTERY STATUS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
412. BATTERY STATUS const batteryInfo = await navigator.getBattery(); batteryInfo.addEventListener("chargingchange", listener); batteryInfo.addEventListener("chargingtimechange", listener); batteryInfo.addEventListener("dischargingtimechange", listener); batteryInfo.addEventListener("levelchange", listener);
413. NETWORK INFORMATION REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
414. NETWORK INFORMATION const networkInfo = navigator.connection; navigator.connection.addEventListener('change', onConnectionChange);
415. NETWORK INFORMATION const networkInfo = navigator.connection.addEventListener('change', onConnectionChange); { effectiveType: "4g", rtt: 200, downlink: 1.65, saveData: false, }
416. NETWORK INFORMATION ↝ SWITCH BETWEEN SERVING HIGH/LOW DEFINITION CONTENT BASED ON THE USER'S NETWORK. ↝ DECIDE WHETHER TO PRELOAD RESOURCES. ↝ DEFER UPLOADS/DOWNLOADS WHEN USERS ARE ON A SLOW CONNECTION. ↝ ADAPT TO SITUATIONS WHEN USERS ARE OFFLINE.
417. NETWORK INFORMATION switch (connectionType) { case "4g": return <Video src={videoSrc} />; case "3g": return <Image src={imageSrc.hiRes} alt={alt} />; default: return <Image src={imageSrc.lowRes} alt={alt} />; }
418. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
419. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
420. NETWORK INFORMATION
421. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
422. CUSTOM METRICS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
423. USER FRUSTRATION REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
424. DIGITAL EXPERIENCE ANALYTICS
425. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Monitoring rage clicks.
426. MONITORING THIRD-PARTIES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
427. MONITORING THIRD-PARTIES
428. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
429. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Monitoring jQuery calls.
430. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
431. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
432. Other Techniques REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 🔥
433. THIS SECTION PRESENTS… #1 ON THE WEB RESOURCE HINTS • PRIORITY HINTS • NATIVE LAZY- LOADING #2 IN REACT ALIASING REACT TO PREACT • WINDOWING • CODE SPLITTING • INFORMED CODE SPLITTING
434. ON THE WEB REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
435. RESOURCE HINTS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
436. RESOURCE HINTS ↝ MANY PERFORMANCE OPTIMIZATIONS CAN BE MADE WHEN WE CAN PREDICT WHAT USERS MIGHT DO. ↝ RESOURCE HINTS ARE A SIMPLE BUT EFFECTIVE WAY TO ALLOW DEVELOPERS TO HELP THE BROWSER TO STAY ONE STEP AHEAD OF THE USER AND KEEP PAGES FAST.
437. RESOURCE HINTS < ! - - Preconnect - - > <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://scripts.example.com"> < ! - - Preloading - - > <link rel="preload" href="https://example.com/fonts/font.woff"> < ! - - DNS Prefetch - - > <link rel="dns-prefetch" href="https://fonts.gstatic.com"> <link rel="dns-prefetch" href="https://images.example.com"> < ! - - Prefetch - - > <link rel="prefetch" href="/uploads/images/pic.png"> <link rel="prefetch" href="https://example.com/news/?page=2"> < ! - - Prerender - - > <link rel="prerender" href="https://example.com/news/?page=2">
438. RESOURCE HINTS < ! - - Preconnect - - > <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://scripts.example.com"> < ! - - Preloading - - > <link rel="preload" href="https://example.com/fonts/font.woff"> < ! - - DNS Prefetch - - > <link rel="dns-prefetch" href="https://fonts.gstatic.com"> <link rel="dns-prefetch" href="https://images.example.com"> < ! - - Prefetch - - > <link rel="prefetch" href="/uploads/images/pic.png"> <link rel="prefetch" href="https://example.com/news/?page=2"> < ! - - Prerender - - > <link rel="prerender" href="https://example.com/news/?page=2">
439. PRECONNECT ↝ IT ALLOWS THE BROWSER TO SETUP EARLY CONNECTIONS BEFORE THE REQUEST IS ACTUALLY SENT TO THE SERVER. THIS INCLUDES: •TLS NEGOTIATIONS •TCP HANDSHAKES ↝ ELIMINATES ROUNDTRIP LATENCY.
440. PRECONNECT 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED
441. PRECONNECT 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED FONT 1 FONT 2
442. …AND MUCH MORE! ↝ DNS PREFETCH: WARNS THE BROWSER ABOUT THE DOMAINS IT’S GOING TO NEED TO LOOK UP. ↝ PREFETCH: FETCH RESOURCES IN THE BACKGROUND AND STORE THEM IN CACHE. ↝ PRERENDER: IT GOES ONE STEP FURTHER AND EXECUTES THE FILES.
443. PRIORITY HINTS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
444. PRIORITY HINTS ↝ INCREASE THE PRIORITY OF THE LCP IMAGE. ↝ LOWER THE PRIORITY OF ABOVE-THE-FOLD IMAGES AND PRELOADED RESOURCES. ↝ LOWER THE PRIORITY FOR NON-CRITICAL DATA FETCHES. ↝ REPRIORITIZE SCRIPTS.
445. PRIORITY HINTS < ! - - Increase the priority of the LCP image - - > <img src="image.jpg" fetchpriority="high" /> < ! - - Lower the priority of above-the-fold images - - > <ul class="carousel"> <img src="img/carousel-1.jpg" fetchpriority="high" /> <img src="img/carousel-2.jpg" fetchpriority="low" /> <img src="img/carousel-3.jpg" fetchpriority="low" /> </ul> < ! - - Reprioritize scripts - - > <script src="async_but_important.js" async fetchpriority="high"></script> <script src="blocking_but_unimportant.js" fetchpriority="low"></script>
446. PRIORITY HINTS < ! - - Increase the priority of the LCP image - - > <img src="image.jpg" fetchpriority="high" /> < ! - - Lower the priority of above-the-fold images - - > <ul class="carousel"> <img src="img/carousel-1.jpg" fetchpriority="high" /> <img src="img/carousel-2.jpg" fetchpriority="low" /> <img src="img/carousel-3.jpg" fetchpriority="low" /> </ul> < ! - - Reprioritize scripts - - > <script src="async_but_important.js" async fetchpriority="high"></script> <script src="blocking_but_unimportant.js" fetchpriority="low"></script>
447. PRIORITY HINTS / / Important validation data const user = await fetch("/user"); / / Less important content data const relatedPosts = await fetch("/posts/suggested", { priority: "low" });
448. PRIORITY HINTS / / Important validation data const user = await fetch("/user"); / / Less important content data const relatedPosts = await fetch("/posts/suggested", { priority: "low" });
449. NATIVE LAZY-LOADING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
450. NATIVE LAZY-LOADING <img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>
451. NATIVE LAZY-LOADING <img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>
452. #research 📚 Lazy-loading iframes can lead to 2-3% median data savings, 1-2% FCP reductions, and 2% FID improvements at the 95th percentile. — Chrome team’s research, 2019
453. IN REACT* REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
454. ALIASING REACT TO PREACT REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2018 📅 2024
455. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
456. PREACT: OVERVIEW 42.4KB (MIN+GZIP) 4KB (MIN+GZIP)
457. PREACT: OVERVIEW ↝ WAY SMALLER BUNDLE (APPROXIMATELY 3.5KB). ↝ FASTER VIRTUAL DOM IMPLEMENTATION. ↝ MORE EFFECTIVE MEMORY USAGE.
458. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Porting our app to Preact.
459. PREACT: RESULTS
460. PREACT: RESULTS
461. PREACT: CASE STUDY 205.9KB MIN + GZIP / NO POLYFILLS 175.26KB MIN + GZIP / NO POLYFILLS
462. WINDOWING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2018 📅 2023 📅 2020
463. WINDOWING: OVERVIEW — HOW DOES WINDOWING WORK? • BRIAN VAUGHN
464. WINDOWING: OVERVIEW — RENDERING LARGE LISTS WITH REACT-WINDOW • ADDY OSMANI
465. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Optimizing long lists with windowing.
466. WINDOWING: OPTIONS
467. WINDOWING: CASE STUDY
468. CODE SPLITTING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2018 📅 2024
469. CODE SPLITTING: OVERVIEW — HTTPS://WWW.PATTERNS.DEV
470. CODE SPLITTING WITH REACT
471. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ Code Splitting with lazy and Suspense.
472. CODE SPLITTING: CASE STUDY
473. CODE SPLITTING: CASE STUDY
474. INFORMED CODE SPLITTING REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2018 📅 2024
475. BROWSER COMPATIBILITY PERFORMANCE OBSERVER USER TIMING LONG TASKS ELEMENT TIMING RESOURCE TIMING NAVIGATION TIMING
476. BROWSER COMPATIBILITY SERVER TIMING LAYOUT SHIFT JS SELF-PROFILING PAGE VISIBILITY BATTERY STATUS NETWORK INFORMATION
477. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
478. INFORMED CODE SPLITTING const Video = lazy(() = > import("./Video")); const Preview = lazy(() = > import("./Preview")); const networkInfo = useNetworkStatus(); const { With, Switch, Otherwise } = usePatternMatch(networkInfo);
479. INFORMED CODE SPLITTING <Suspense fallback={<div>Loading . . . </div>}> <With unsupported> <NetworkStatus networkInfo="unsupported" /> <Video /> </With> <With effectiveConnectionType="2g"> <NetworkStatus networkInfo="2g" /> <Preview /> </With> </Suspense>
480. NETWORK STATUS: NOT SUPPORTED
481. NETWORK STATUS: NOT SUPPORTED
482. NETWORK STATUS: 4G
483. NETWORK STATUS: 3G
484. NETWORK STATUS: + CODE SPLITTING
485. NETWORK STATUS: + CODE SPLITTING
486. Questions? REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
487. The Future REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
488. REACT REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
489. ↝ OPTIMISTIC STATE UPDATES ↝ RESOURCE PRELOADING ↝ TRANSITION TRACING THE FUTURE PRESENT
490. OFFSCREEN ACTIVITY REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
491. ↝ RENDERING IN THE BACKGROUND WITH NO ADDITIONAL PERFORMANCE OVERHEAD. ↝ IT DOESN'T MOUNT UNTIL THE COMPONENT BECOMES VISIBLE AND ITS EFFECTS ARE NOT FIRED. ↝ TOGGLE THE VISIBILITY WITHOUT LOSING THE STATE. ↝ INTEGRATED INTO ROUTERS AND OTHER UI LIBRARIES. OFFSCREEN ACTIVITY
492. ↝ ROUTERS CAN PRE-RENDER SCREENS IN THE BACKGROUND SO THAT THEY’RE INSTANTLY AVAILABLE. ↝ TAB SWITCHING CAN PRESERVE THE STATE OF HIDDEN TABS, SO THE USER CAN SWITCH BETWEEN THEM WITHOUT LOSING THEIR PROGRESS. ↝ A VIRTUALIZED LIST CAN PRERENDER ADDITIONAL ROWS ABOVE AND BELOW THE VISIBLE WINDOW. OFFSCREEN ACTIVITY
493. OFFSCREEN ACTIVITY
494. OFFSCREEN ACTIVITY
495. SUSPENSE FOR CPU-BOUND TREES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
496. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
497. SUSPENSE FOR CPU-BOUND TREES
498. SUSPENSE FOR CPU-BOUND TREES ↝ FORCES A FALLBACK ON THE INITIAL RENDER REGARDLESS OF WHETHER SOMETHING IS SUSPENDED. ↝ DURING THE INITIAL MOUNT, REACT WILL SKIP OVER EXPENSIVE TREES BY RENDERING A PLACEHOLDER. ↝ IT HELPS UNBLOCK THE INITIAL SKELETON FOR THE NEW SCREEN.
499. REACT NATIVE REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
500. STATIC HERMES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
501. ↝ MODIFIES SOME JS SEMANTICS TO ALLOW EFFICIENT SOUND TYPING. ↝ BRIDGES PREDICTABLE C PERFORMANCE WITH JS USABILITY VIA NATIVE AOT COMPILATION. ↝ MIX AND MATCH BYTE-CODE AND NATIVE CODE BASED ON YOUR NEEDS. STATIC HERMES
502. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
503. STATIC HERMES — STATIC HERMES (REACT NATIVE EU 2023 ANNOUNCEMENT) • TZVETAN MIKOV
504. REACT STRICT DOM REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
505. REACT STRICT DOM ↝ OPPOSITE APPROACH TO react-native-web. ↝ SMALL POLYFILLS RESPONSIBLE FOR TRANSLATING ITS APIS TO REACT-NATIVE AND REACT-DOM PRIMITIVES. ↝ LESS OVERHEAD WHEN RUNNING IN BROWSERS. ↝ POWERED BY STYLEX.
506. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
507. THE WEB REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
508. ROUTING & MPAs vs. SPAs
509. ROUTING & MPAs vs. SPAs WATERFALLS
510. ROUTING & MPAs vs. SPAs HYBRID ROUTING
511. HYDRATION
512. 0KB JAVASCRIPT
513. CODE EXTRACTION
514. CODE EXTRACTION
515. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
516. CODE EXTRACTION import json from "./foo.json" with { type: "json" }; import ComponentA from "./A" with { type: "client" } import ComponentB from "./B" with { type: "both" }
517. INFRASTRUCTURE
518. WHY SOMETHING IS THE FUTURE ROUTING MPAs vs. SPAs CODE EXTRACTION OKB JAVASCRIPT REACTIVITY HYDRATION COMPILERS
519. WHY SOMETHING IS THE FUTURE
520. Closing Notes REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
521. Understanding these internals and their rationales helps us implement our own abstractions. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ #1 of 7
522. OUR OWN ABSTRACTIONS… ↝ GENERATOR-BASED SCHEDULER ↝ FIRST CLASS SUPPORT FOR PROMISES ↝ JSCODESHIFT-BASED ARCHITECTURE UPGRADE ↝ THE BABEL-BASED MIGRATION ↝ CUSTOM METRICS
523. Software development continually goes through cycles. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ #2 of 7
524. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
525. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
526. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
528. React tries to address the lack of some JavaScript/Web Platform resources. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ #3 of 7
529. Always try to correlate business metrics with performance. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ #4 of 7
530. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/
531. There's no silver bullet. Identify your core metrics. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ #5 of 7
532. Don't take fast networks, CPUs and RAM for granted. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ #6 of 7
533. Test on real phones and networks. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ #7 of 7
534. THAT’S ALL, FOLKS! THANKS! 👋 🇬🇧 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!