🇺🇸 iJS New York 2026 (Workshop)

React: Internals and Advanced Performance Patterns

Keeping user interfaces smooth becomes harder as React applications scale, especially across different devices, networks, and workloads. Understanding how React actually schedules and renders work can turn performance tuning from guesswork into engineering.

In this session, we’ll dive into React Fiber and reconciliation, connecting them to classic computer science concepts like cooperative scheduling and incremental work.

From there, we’ll explore practical strategies for production React apps, along with a few browser-level primitives that influence how quickly users actually see content. Finally, we’ll look at how to measure responsiveness in the real world using modern web performance tooling.

The goal is to build the mental models that let you reason about performance problems in React and the web platform.

Transcript

1. Hello, New York! 👋 🇺🇸 REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS • OCTOBER 1, 2026.
2. WORKSHOP REACT 🔥 INTERNALS AND ADVANCED PERFORMANCE PATTERNS MATHEUS ALBUQUERQUE • @ythecombinator
3. 𝕏 Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚛ CHAIR @ REACT SUMMIT NYC ↝ ⚡ GOOGLE DEVELOPER EXPERT ↝ YTHECOMBINATOR
4. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Preamble
5. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS MOTIVATION
6. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OUR CUSTOMERS & OUR BUSINESSES
7. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Which browsers are visiting our app? — APP DYNAMICS REPORT • 2024
8. BROWSER MIX — APP DYNAMICS REPORT • 2024
9. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Which browsers are visiting our app? — RUM REPORT • 2026
10. DEVICE MIX: ADOPTION TREND
11. DEVICE MIX: PARSE TIMES — JAVASCRIPT START-UP PERFORMANCE • 2017
12. BANDWIDTH MIX: TECHNOLOGIES — GSM ASSOCIATION • 2022
13. BANDWIDTH MIX: AFFORDABILITY
14. BANDWIDTH MIX: AFFORDABILITY PORTUGAL MOZAMBIQUE — FIXED-BROADBAND INTERNET BASKET • ITU DATAHUB, 2025
15. BANDWIDTH MIX: AFFORDABILITY — USE TOOLS TO MEASURE PERFORMANCE • SAM DUTTON
16. POLITICAL MIX: CHINA
17. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
18. POLITICAL MIX: CHINA — DECODING THE WEB IN CHINA FOR PEAK WEB PERFORMANCE • JODIE CHAN, 2023
20. FRUSTRATION → STRESS 40% of Brits reported that they had become physically violent toward their computers. — British Psychology Society • 2009
21. FRUSTRATION → STRESS Brainwave analysis from the experiment revealed that participants had to concentrate up to 50% more when using websites via the slower connection. — Study conducted by Foviance on behalf of CA • 2011
22. FRUSTRATION → ANXIETY 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
23. EVEN PATIENCE IS A LOCAL THING… — UNDERSTANDING EMOTION FOR HAPPY USERS • PHILIP TELLIS, 2020
24. YOUR USERS COULD BE ANYWHERE! — FARO RUM REPORT • 2026
26. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
27. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OUR INDUSTRY
28. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
29. “[…] With React you can build applications without even thinking about performance and the default state is fast.” — Rethinking Best Practices • Pete Hunt, 2013
30. #question 🤔 What does it mean to be fast?
31. WHAT DOES IT MEAN TO BE FAST? ↝ HOW QUICKLY A PAGE CAN LOAD AND RENDER ALL OF ITS VISUAL ELEMENTS TO THE SCREEN? ↝ HOW QUICKLY A PAGE CAN LOAD AND RUN ANY REQUIRED JAVASCRIPT IN ORDER FOR COMPONENTS TO RESPOND TO USER INTERACTION? ↝ DO TRANSITIONS AND ANIMATIONS RENDER AT A CONSISTENT FRAME RATE AND FLOW FLUIDLY?
32. WHAT DOES IT MEAN TO BE FAST?
33. WHAT DOES IT MEAN TO BE FAST?
34. #protip 💡 Speed metrics are not a single number.
35. BUT ALSO…
36. #protip 💡 Speed metrics can sometimes be hacked.
38. FIXING WEB PERFORMANCE… — VAN OKTORP (INSP) • GOOGLE I/O 2018
39. FIXING WEB PERFORMANCE… — VAN OKTORP (INSP) • GOOGLE I/O 2018
40. FIXING WEB PERFORMANCE…
41. FIXING WEB PERFORMANCE…
42. FIXING WEB PERFORMANCE…
46. MAKING THINGS “FAST” PERF MITIGATORS: ↝ shouldComponentUpdate • React.PureComponent ↝ React.memo ↝ useMemo • useCallback ↝ useTransition • useDeferredValue • React.Suspense & MUCH MORE!
47. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
48. […] “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 . Or you might think that PHP is never used nowadays because whenever it’s mentioned, everyone is hating on it in the comments.” […] f — The silent majority • Vadim Kravcenko, 2022
49. […] “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
50. WE’LL NOT FOCUS ON… ↝ POPULAR REACT HOOKS • (META) FRAMEWORKS ↝ FINE-GRAINED REACTIVITY AND SIGNALS ↝ COMPILERS AND STATIC ANALYSIS * ↝ NATIVE PERFORMANCE-RELATED APIS *
51. WE’LL NOT FOCUS ON…
52. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS METHODOLOGY
53. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
54. METHODOLOGY: INSPIRATION
55. METHODOLOGY: INSPIRATION Portfolio Content Storefront Social Network I 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 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 I ersive ersiveness m m m m — PATTERNS FOR BUILDING JAVASCRIPT WEBSITES IN 2022 • RYAN CARNIATO
56. METHODOLOGY: OVERVIEW ↝ 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 AND THEIR RESULTS.
57. METHODOLOGY: VERTICALS
58. METHODOLOGY: OTHER LANGUAGES
59. METHODOLOGY: INSPIRATION
60. METHODOLOGY: INSPIRATION
61. 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 • Matheus, 2026
62. METHODOLOGY: TOPICS ↝ SCHEDULING ↝ RENDERING ↝ MEASURING ↝ OTHER TECHNIQUES ↝ THE FUTURE ↝ CLOSING NOTES
63. METHODOLOGY: TOPICS
64. METHODOLOGY: STEPS ↝ CLONING THE REPO NOW. ↝ GETTING THE SLIDES LATER. ↝ QUESTIONS AT THE END OF EACH SECTION. ↝ CONFERENCE BREAKS.
65. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
66. METHODOLOGY: DEMO PROJECT
67. METHODOLOGY: DEMO PROJECT
68. METHODOLOGY: DEMO PROJECT
69. METHODOLOGY: DEEP DIVES
70. METHODOLOGY: BLOWING MINDS
71. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS 🔥🔥🔥 Scheduling Things
72. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS 🔥🔥🔥 Scheduling Work
73. THIS SECTION PRESENTS… ↝ FIBERS • COROUTINES • EFFECT HANDLERS: OVERVIEW • REACT.JS • OTHER ECOSYSTEMS ↝ SCHEDULING: LONG TASKS • RUNNING STRATEGIES ↝ SCHEDULING IN REACT: OVERVIEW • HEURISTICS • PRIORITY LEVELS • RENDER LANES • USE CASES ↝ SCHEDULING ON THE WEB: OVERVIEW • NATIVE SCHEDULING API
74. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS FIBER(S)
75. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OVERVIEW
76. STACK FRAMES function add(x,y) { const result return result; } = add(2, 2) x + y;
77. STACK FRAMES function add(x,y) { const result let frame: Frame { return: frame, x + y; fn: add, return result; parameters: [2, 2], localVariables: { } result: 4, }, add(2, 2) = = }
78. STACK FRAMES let frame: Frame { let fiber: Fiber { return: frame, return: fiber, fn: add, component: Avatar, parameters: [2, 2], props: { id: 4 }, localVariables: { state: { result: 4, isLoaded: true, }, }, = } = }
79. 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.
80. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS UNITS OF WORK
81. UNITS OF WORK ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. 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.
82. UNITS OF WORK ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. 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.
83. UNITS OF WORK ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. 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.
84. UNITS OF WORK ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. 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.
85. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
86. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
87. UNITS OF WORK ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. 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. AND THAT MAKES IT A CONVENIENT WAY TO TRACK, SCHEDULE, PAUSE AND ABORT THE WORK.
88. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Inspecting Elements.
89. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS MANIPULATING UNITS OF WORK
90. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
91. “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
92. HOMOICONICITY (let [x 1] > = (inc x)) ; 2
93. HOMOICONICITY (let [x 1] > = (inc x)) ; 2 PERFORMS A TEMPORARY BINDING
94. HOMOICONICITY (let [x 1] INCREMENTS X TO GIVE THE RETURN > = (inc x)) ; 2 VALUE OF 2.
95. 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.
96. 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.
97. HOMOICONICITY + REACT ↝ REACT ELEMENTS ARE JUST DATA. ↝ JUST LIKE IN LISP, REACT COMPONENTS CAN MANIPULATE THEIR CHILDREN AND RETURN COMPLETELY DIFFERENT THINGS.
98. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #example 🧪 Pattern Matching in React.
99. “[…] 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
100. PATTERN MATCHING > a - > n * factorial (n - 1) = factorial n = 1 = factorial 0 : (Integral a) : factorial a
101. PATTERN MATCHING factorial (Integral a) factorial 0 1 factorial n n * factorial (n - 1) fib (Integral a) fib 0 1 fib 1 1 fib n | n a a a 2 > - > = > - > = = = : = : > = = = : : fib (n-1) + fib (n-2) a
102. PATTERN MATCHING
103. 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 ; > = > > > > . . . . . . . . . / / } / / / / PATTERN MATCHING ({
104. 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 ; > = > > > > . . . . . . . . . / / } / / / / PATTERN MATCHING ({
105. PATTERN MATCHING const supportsSensor () const AmbientLight const Fallback Boolean(window.AmbientLightSensor); React.lazy(() React.lazy(() import("./AmbientLight")); 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> ); > = = > = > = = = = }
106. PATTERN MATCHING const supportsSensor () const AmbientLight const Fallback Boolean(window.AmbientLightSensor); React.lazy(() React.lazy(() import("./AmbientLight")); import("./Fallback")); export default function MyComponent() { const { Match, When, Otherwise } usePatternMatch(); return ( <Suspense fallback="Loading"> PATTERN MATCHING + REACT.SUSPENSE + REACT.LAZY() <Match> <When predicate={supportsSensor}> <AmbientLight /> </When> COMPONENT BUNDLE THAT <Otherwise> <Fallback /> </Otherwise> MATCHES. </Match> </Suspense> ); > = = > = > = = = } = = USERS DOWNLOAD ONLY THE
107. PATTERN MATCHING const supportsSensor () const AmbientLight const Fallback Boolean(window.AmbientLightSensor); React.lazy(() React.lazy(() import("./AmbientLight")); import("./Fallback")); export default function MyComponent() { const { Match, When, Otherwise } usePatternMatch(); return ( <Suspense fallback="Loading"> PATTERN MATCHING + REACT.SUSPENSE + REACT.LAZY() <Match> <When predicate={supportsSensor}> <AmbientLight /> </When> COMPONENT BUNDLE THAT <Otherwise> <Fallback /> </Otherwise> MATCHES. </Match> </Suspense> ); > = = > = > = = = } = = USERS DOWNLOAD ONLY THE
108. FIBERS IN REACT: RECAP 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.
109. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
110. FIBERS IN REACT: RECAP
111. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
112. fi REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Inspecting elements using @pmndrs/itsne.
113. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS FIBERS IN NODE
114. ASYNCHRONICITY IN JAVASCRIPT ↝ 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.
115. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
116. ASYNCHRONICITY IN JAVASCRIPT ↝ 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.
117. ASYNCHRONICITY & SASS ↝ 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).
118. ASYNCHRONICITY & SASS ↝ 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.
119. ASYNCHRONICITY & SASS ↝ 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.
120. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
122. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
123. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS FIBERS OUT THERE
124. FIBERS OUT THERE ↝ 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.
125. FIBERS OUT THERE: BUILT-IN
126. FIBERS OUT THERE: ECOSYSTEM
127. FIBERS OUT THERE: ECOSYSTEM
128. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
130. “This attitude does not only work in the context of the game industry, though. Any other industry with strong architectural requirements can be a source of inspiration and knowledge for us and help us write better code on the web” An Actor, a model and an architect walk onto the web... • Surma
131. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS COROUTINES
132. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OVERVIEW
134. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
135. COROUTINES IN REACT COROUTINES APPEARED WHEN WORK ON FIBER WAS FIRST GOING AS A SPECIFIC COMPONENT TYPE. THE IDEA BEHIND COROUTINES — AS OPPOSED TO FIBERS — WAS TO GIVE COMPONENTS EXPLICIT CONTROL OVER YIELDING AND RESUMPTION.
136. COROUTINES VS. FIBERS
137. COROUTINES VS. FIBERS
138. COROUTINES VS. FIBERS
139. COROUTINES VS. FIBERS FIBERS COROUTINES CONTROL IS PASSED TO A CONTROL IS PASSED TO THE SCHEDULER WHICH DETERMINES CALLER AND HANDLED BY WHAT TO RUN NEXT. APPLICATION CODE.
140. 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.
141. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS COROUTINES OUT THERE
142. COROUTINES OUT THERE: JAVASCRIPT
143. COROUTINES OUT THERE: BUILT-IN
144. COROUTINES OUT THERE: ECOSYSTEM
145. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS EFFECT HANDLERS
146. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OVERVIEW
147. 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.
148. EFFECT HANDLERS: EFF (* state.eff *) type user string * int effect Get: user > - = effect Set: user unit
149. EFFECT HANDLERS: EFF (* state.eff *) type user string * int effect Get: user > - = effect Set: user unit
150. EFFECT HANDLERS: EFF (* state.eff *) type user string * int effect Get: user > - = effect Set: user unit
151. EFFECT HANDLERS: EFF let state | y handler fun currentState | effect Get k (y, currentState) (fun currentState | effect (Set newState) k (fun _ > > - - > - > - > - = > - ;; (continue k currentState) currentState) (continue k ()) newState)
152. EFFECT HANDLERS: EFF let state | y handler fun currentState | effect Get k (y, currentState) (fun currentState | effect (Set newState) k (fun _ > > - - > - > - > - = > - ;; (continue k currentState) currentState) (continue k ()) newState)
153. EFFECT HANDLERS: EFF let state | y handler fun currentState | effect Get k (y, currentState) (fun currentState | effect (Set newState) k (fun _ > > - - > - > - > - = > - ;; (continue k currentState) currentState) (continue k ()) newState)
154. EFFECT HANDLERS: EFF let state | y handler fun currentState | effect Get k (y, currentState) (fun currentState | effect (Set newState) k (fun _ > > - - > - > - > - = > - ;; (continue k currentState) currentState) (continue k ()) newState)
155. EFFECT HANDLERS: EFF let state | y handler fun currentState | effect Get k (y, currentState) (fun currentState | effect (Set newState) k (fun _ > > - - > - > - > - = > - ;; (continue k currentState) currentState) (continue k ()) newState)
156. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS EFFECT HANDLERS IN REACT
157. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
158. EFFECT HANDLERS: REACT function getName(user) { let name user.name; if (name === null) { name perform 'ask_name'; } return name; } const arya const gendry { name: null, friendNames: [] }; { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } = = = = }
159. EFFECT HANDLERS: REACT function getName(user) { let name user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya const gendry { name: null, friendNames: [] }; { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } = = = }
160. 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.
161. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #1 Layout Algorithm
162. LAYOUT ALGORITHM THE REACT TEAM APPARENTLY SPENT SOME TIME EXPERIMENTING WITH EFFECT-HANDLER CONTROL STRUCTURES FOR MANAGING LAYOUT.
163. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
164. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #2 Context API Drafts
165. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
166. CONTEXT API DRAFTS THEY’VE ALSO REMODELED THE CONTEXT API USING ALGEBRAIC EFFECTS.
167. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS ff #3 Side e ects within a component
168. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
169. EFFECT HANDLERS: REACT 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('blue'); } } function App(data) { return BlueTheme( FancyUserList.bind(null, data.users) ); > - = } [, continuation] {
170. EFFECT HANDLERS: REACT 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('blue'); } } function App(data) { return BlueTheme( FancyUserList.bind(null, data.users) ); > - } [, continuation] {
171. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #4 Hooks API
172. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
173. HOOKS API SEBASTIAN POINTS THAT “CONCEPTUALLY, HOOKS ARE ALGEBRAIC EFFECTS”.
174. 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.
175. 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.
176. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #5 Suspense internals
177. SUSPENSE INTERNALS
178. SUSPENSE INTERNALS
179. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
180. 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.
181. 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.
182. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS EFFECT HANDLERS OUT THERE
183. EFFECT HANDLERS OUT THERE
184. EFFECT HANDLERS OUT THERE
185. EFFECT HANDLERS OUT THERE
186. 30 minutes.
187. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SCHEDULING
188. TASKS A UNIT OF WORK THAT THE BROWSER DOES TO RENDER A FRAME. JAVASCRIPT STYLES LAYOUT PAINT COMPOSITE
189. TASKS JAVASCRIPT STYLES LAYOUT PAINT COMPOSITE
190. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Visualizing long tasks.
191. LONG TASKS
192. LONG TASKS
193. LONG TASKS
194. 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.
195. #question 🤔 How to avoid blocking the main thread?
196. TASK RUNNING STRATEGIES A B C D
197. 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.
198. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
199. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
200. 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.
201. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #1 Actors
202. WEB WORKERS: ACTORS
203. 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.
204. 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.
205. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #2 Shared Memory
206. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
207. WEB WORKERS: SHARED MEMORY ↝ 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.
208. WEB WORKERS: SHARED MEMORY ↝ MOST OF THE APIS ARE BUILT NO CONCURRENT ACCESS TO OBJECTS IN MIND. ↝ YOU BUILD YOUR OWN MUTEX ABSTRACTIONS AND OTHER CONCURRENT DATA STRUCTURES. ↝ NO DIRECT WAY OF WORKING ON FAMILIAR OBJECTS/ ARRAYS; JUST A SERIES OF BYTES.
209. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #3 Web Assembly
210. WORKERS: WEB ASSEMBLY ↝ WORKERS + SharedArrayBuffers TO SUPPORT THE THREADING MODEL OF C++ AND OTHERS. ↝ THE 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.
211. 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.
212. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
213. WORKERS: WEB ASSEMBLY
214. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
215. WORKERS: WEB ASSEMBLY
216. WORKERS: WEB ASSEMBLY
217. ↝ Atomics ↝ BuffferBackedObject ↝ COMLINK ↝ WORKERDOM ↝ PARTYTOWN ↝ AND MUCH MORE!
218. PARALLELISM IS GREAT!
219. PARALLELISM IS GREAT!
220. PARALLELISM IS GREAT! ↝ GOOD FOR DATA PROCESSING AND CRUNCHING NUMBERS. ↝ HARD TO USE FOR UI-RELATED STUFF. ↝ HARDER THAN ADJUSTING IT FOR A SCHEDULER.
221. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
222. SCHEDULING IN REACT?
223. SCHEDULING IN REACT?
224. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SCHEDULING IN REACT •
225. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OVERVIEW
226. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Expensive component with a CPU-bound operation.
227. #question 🤔 How could we improve that?
228. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
229. SCHEDULING WITH… OUR SCHEDULER
230. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Expensive component with a CPU-bound operation & our custom scheduler.
231. WORKERS: WEB ASSEMBLY function* resourcefulOperation(value: number) { let newValue String(value); while (true) { yield; for (let i newValue 0; i < 1000000; i++) { `${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>; = = = = = }
232. #question 🤔 Did we just useTransition’ed?
233. SCHEDULING WITH… OUR SCHEDULER function resourcefulOperation(value: number) { let newValue for (let i String(value); 0; i < 1000000; i++) { newValue `${value} + ${i} ${value + i}`; } return newValue; } function ResourcefulComponent(props: { value: number }) { const { value } const result props; resourcefulOperation(value); return <p>{result}</p>; = = = = = = }
234. SCHEDULING WITH… OUR SCHEDULER function resourcefulOperation(value: number) { let newValue for (let i newValue String(value); 0; i < 1000000; i++) { `${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>; = = = > = > = = = = }
235. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS HEURISTICS
236. 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.
237. HEURISTICS USER INPUT → ↓ ORIGINAL RENDER TASK ↓ RESUME ORIGINAL RENDER TASK ↑ HIGHER PRIORITY RENDER TASK
238. HEURISTICS
239. HEURISTICS
240. 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.
241. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PRIORITY LEVELS
242. PRIORITY LEVELS
243. PRIORITY LEVELS
244. PRIORITY LEVELS PRIORITY m m I ediate TIMEOUT SYNCHRONOUSLY UserBlocking 250MS Normal 5S Low 10S Idle NO TIMEOUT WHEN TASKS THAT NEED TO RUN SYNCHRONOUSLY RESULTS OF A USER INTERACTION (E.G. A BUTTON CLICK) UPDATES THAT DON’T HAVE TO FEEL INSTANTANEOUS TASKS THAT CAN BE DEFERRED BUT MUST STILL COMPLETE EVENTUALLY (E.G. AN ANALYTICS NOTIFICATION) TASKS THAT DO NOT HAVE TO RUN AT ALL (E.G. HIDDEN OFFSCREEN CONTENT)
245. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS TIME PERCEPTION
246. #question 🤔 Do you also feel like time speeds up as you age?
247. TIME PERCEPTION
248. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
249. #research 📚 In a recent study of 918 adults, 77% agreed that Christmas seems to arrive more rapidly each year. Interestingly, coresearchers asked an Iraqi sample the same question about Ramadan and received a very similar response.
250. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
251. TIME PERCEPTION: ELEVATORS
252. TIME PERCEPTION: AIRPORTS
253. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
254. TIME PERCEPTION: COMPUTERS IN 1968 — RESPONSE TIME IN MAN-COMPUTER CONVERSATIONAL TRANSACTIONS • ROBERT B. MILLER, 1968
255. TIME PERCEPTION: COMPUTERS IN 1993 — USABILITY ENGINEERING • JAKOB NIELSEN, 1993
256. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
257. TIME PERCEPTION: WEB IN 2015 — MEASURE PERFORMANCE WITH THE RAIL MODEL • GOOGLE
258. TIME PERCEPTION: WEB IN 2015
259. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
260. TIME PERCEPTION: WINDOWS IN 2022 — UNIVERSAL WINDOWS PLATFORM / PLANNING FOR PERFORMANCE • MICROSOFT
261. TIME PERCEPTION: REACT NOW
262. TIME PERCEPTION: REACT NOW
263. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS RENDER LANES
264. 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.
265. 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.
266. BITMASK-BASED CHANGE TRACKING…
268. #question 🤔 fi How do we bene t from these in our everyday projects?
269. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS USE CASES
270. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #1 Handling large sets of data
271. HANDLING LARGE SETS OF DATA 😔 NON-PRACTICAL… 😊 PRACTICAL… ↝ FINDING PRIMES ↝ RENDERING MANY DATA-POINTS ↝ CRACKING PASSWORDS ↝ PROCESSING DATA ↝ SIERPINSKI TRIANGLE ↝ RENDERING ON A <canvas>
272. HANDLING LARGE SETS OF DATA 😔 NON-PRACTICAL… 😊 PRACTICAL… ↝ FINDING PRIMES ↝ RENDERING MANY DATA-POINTS ↝ CRACKING PASSWORDS ↝ PROCESSING DATA ↝ SIERPINSKI TRIANGLE ↝ RENDERING ON A <canvas>
273. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
274. CASE STUDY
275. FAST COMPUTER + NO TRANSITIONS
276. FAST COMPUTER + TRANSITIONS
277. SLOW COMPUTER + NO TRANSITIONS
278. SLOW COMPUTER + TRANSITIONS
279. LOCATION DATA ↝ ˜100K DATA POINTS PLOTTED #1 ↝ SUPPORT FOR SEARCHING AND FILTERING. ↝ USED WORKERS + REDUX-SAGA UTILITIES + DEBOUNCING. ↝ COULD'VE USED TRANSITIONS.
280. GAME ADMIN PANEL ↝ THOUSANDS OF REAL-TIME #2 PLAYERS MESSAGING. ↝ SUPPORT FOR SEARCHING AND FILTERING. ↝ USED VIRTUALIZATION AND MEMOIZATION. ↝ COULD'VE USED TRANSITIONS.
281. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #2 Tackling Wasted Renders
282. useSyncExternalStore function useSyncExternalStore<Snapshot>( subscribe: (onStoreChange: () getSnapshot: () void) () Snapshot, getServerSnapshot?: () Snapshot > = > = > = > = > = ): Snapshot; void,
283. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
284. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
285. useSyncExternalStore
286. useSyncExternalStore
287. #question 🤔 fi How do we bene t from these in our everyday projects?
288. useLocation
289. useLocation function Pathname() { const { pathname } useLocation(); return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } useLocation(); return <Badge title={hash} subtitle="hash" />; = = }
290. useLocation function Pathname() { const { pathname } useLocation(); return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } useLocation(); return <Badge title={hash} subtitle="hash" />; = = }
291. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Wasted renders when using useLocation.
292. 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" />; > = > = > = = = = }
293. 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" />; > = > = > = = = = }
294. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Fixing wasted renders using useSyncExternalS tore.
295. …AND MUCH MORE!
296. …AND MUCH MORE! function subscribe(callback) { window.addEventListener('online', callback); window.addEventListener('offline', callback); return () { window.removeEventListener('online', callback); window.removeEventListener('offline', callback); }; } function getSnapshot() { return navigator.onLine; > = }
297. …AND MUCH MORE! import { useSyncExternalStore } from 'react'; function OnlineStatus() { const isOnline useSyncExternalStore( subscribe, getSnapshot, getSnapshot ); return ( <div className={isOnline ? 'online' : 'offline'}> {isOnline ? '🟢 Online' : '🔴 Offline'} </div> ); = }
298. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #3 Async/Await for React components
299. REACT USE
300. REACT USE
301. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
302. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Creating our own version of pmndrs/suspendreact.
303. #question 🤔 Did we just create react.use()?
305. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #4 Instrumentation
306. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
307. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Debugging using React Scan.
308. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
309. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Coding using React Grab.
310. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #5 Building Entire Products
311. ENTIRE PRODUCTS: CUSTOM RENDERERS
312. ENTIRE PRODUCTS: CUSTOM RENDERERS
313. ENTIRE PRODUCTS: CUSTOM DEBUGGERS
314. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #6 Internal Tooling
315. INTERNAL TOOLING: CASE STUDY A TOOL TO SPEED UP REPRODUCTION → DEBUGGING → FIXING TIME IN CUSTOMERS ESCALATIONS WITH : ↝ A CONSIDERABLE AMOUNT OF CUSTOM CODE. ↝ A CONSIDERABLE AMOUNT OF CUSTOM DESIGN PRIMITIVES. ↝ SANDBOX ⨯ PRODUCTION DISCREPANCIES.
316. INTERNAL TOOLING: CASE STUDY
317. INTERNAL TOOLING: CASE STUDY
318. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SCHEDULING ON THE WEB
319. NATIVE SCHEDULING: CURRENT ISSUES ↝ NO PRIORITY CONTROL. ↝ NO CANCELLATION SEMANTICS. ↝ NO COORDINATION WITH THE BROWSER SCHEDULER. ↝ NO INPUT RESPONSIVENESS GUARANTEES. ↝ NO WAY TO BREAK LONG TASKS SAFELY.
320. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
321. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SCHEDULE TASKS
322. SCHEDULE TASKS: OVERVIEW ↝ SCHEDULE TASKS WITH EXPLICIT PRIORITY. ↝ COORDINATE WITH THE BROWSER RENDERING PIPELINE. ↝ REPLACE setTimeout( , 0) HACKS. ↝ SUPPORTS CANCELLATION VIA SIGNALS. . . . ↝ WORKS IN WORKERS TOO.
323. SCHEDULE TASKS: OVERVIEW scheduler.postTask(renderCriticalUI, { priority: "user-blocking" }); scheduler.postTask(loadSidebarData, { priority: "background" });
324. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS YIELDING
325. YIELDING: OVERVIEW ↝ SPLIT LONG TASKS SAFELY. ↝ RETURN CONTROL TO THE BROWSER MID-EXECUTION. ↝ CONTINUE LATER WITH THE SAME PRIORITY. ↝ AVOID BLOCKING INPUT AND RENDERING. ↝ REPLACE MANUAL CHUNKING LOOPS.
326. YIELDING: OVERVIEW async function processLargeDataset(data) { processFirstHalf(data); await scheduler.yield(); processSecondHalf(data); }
327. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PENDING INPUT
328. PENDING INPUT: OVERVIEW while (workQueue.length > 0) { if (navigator.scheduling.isInputPending()) { Stop doing work to handle any input event break; } let job workQueue.shift(); job.execute(); = / / }
329. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
330. PENDING INPUT: IN REACT
331. PENDING INPUT: HEADS UP!
332. Questions?
333. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS 🔥🔥🔥 Rendering Things
334. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS HYDRATION
335. Hydration is the process of attaching behavior to declarative content to make it interactive. — Why Progressive Hydration is Harder than You Think • Miško Hevery
336. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
337. HYDRATION: INNER CHALLENGES ↝ ASSOCIATE DOM ELEMENTS WITH THEIR CORRESPONDING EVENT HANDLERS. ↝ ONCE A USER EVENT TRIGGERS A HANDLER, WE NEED TO UPDATE THE STATE. ↝ ONCE THE STATE UPDATES, THE FRAMEWORK NEEDS TO RECREATE THE COMPONENT HIERARCHY.
338. HYDRATION: UX CHALLENGES GET HTML DOWNLOAD JS 🟢 FAST (USUALLY) PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS
339. HYDRATION: UX CHALLENGES GET HTML DOWNLOAD JS PARSE + EXECUTE JS 🔴 SLOW (ON BAD NETWORK CONDITIONS) RECOVER STATE + BIND LISTENERS
340. HYDRATION: UX CHALLENGES GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE DEVICE AND AMOUNT OF JAVASCRIPT)
341. HYDRATION: UX CHALLENGES GET HTML DOWNLOAD JS PARSE + EXECUTE JS RECOVER STATE + BIND LISTENERS 🔴 SLOW (DEPENDING ON THE AMOUNT OF DOM NODES TO BE TRAVERSED AND REFERENCES TO BE RE-BOUND TO LISTENERS)
342. HYDRATION: UX CHALLENGES — RESUMABILITY, WTF? • RYAN CARNIATO
343. HYDRATION: DX CHALLENGES
344. HYDRATION: DX CHALLENGES
345. HYDRATION: DX CHALLENGES ↝ DO WE SEND ALL JS ON EVERY REQUEST? OR DO WE BASE IT ON THE ROUTE? ↝ IS HYDRATION DONE TOP-DOWN? AND HOW EXPENSIVE IS THAT? ↝ HOW DOES THE DEVELOPER ORGANIZE THE CODE BASE?
346. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
347. HYDRATION: SOLUTIONS HYDRATION COMPONENT 1 COMPONENT 2 COMPONENT 3 PARTIAL HYDRATION (WHAT) COMPONENT 1 COMPONENT 2 COMPONENT 3
348. HYDRATION: SOLUTIONS PARTIAL HYDRATION (WHAT) COMPONENT 1 COMPONENT 2 COMPONENT 3 PROGRESSIVE HYDRATION (WHEN) COMPONENT 1 COMPONENT 2 COMPONENT 3
349. HYDRATION: SOLUTIONS PROGRESSIVE HYDRATION (WHEN) COMPONENT 1 COMPONENT 2 COMPONENT 3
350. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS ISLANDS ARCHITECTURE 2020
351. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
352. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
354. Islands are a component-based architecture that suggests a compartmentalized view of the page with static and dynamic islands. — Islands Architecture • patterns.dev
355. ISLANDS ARCHITECTURE ↝ SELECTIVELY, PROGRESSIVELY ENHANCING BITS OF SERVER-RENDERED HTML WITH CLIENT-SIDE JS. ↝ SMALL, FOCUSED, CHUNKS OF INTERACTIVITY WITHIN SERVER-RENDERED WEB PAGES. ↝ SINGLE APPLICATION IN CONTROL OF FULL-PAGE RENDERING → MULTIPLE ENTRY POINTS.
356. ISLANDS ARCHITECTURE ↝ THE SCRIPT FOR THE ISLANDS CAN BE DELIVERED AND HYDRATED INDEPENDENTLY, ALLOWING THE REST OF THE PAGE TO BE JUST STATIC HTML. ↝ COMPARED TO PROGRESSIVE ENHANCEMENT, THERE’S MORE SPECIFICITY AROUND HOW THE ENHANCEMENT OCCURS.
357. HYDRATION vs. ISLANDS TRADITIONAL HYDRATION PROGRESSIVE HYDRATION POST TITLE POST TITLE POST TITLE (STATIC HTML) POST CONTENT POST CONTENT POST CONTENT (STATIC HTML) COMMENTS SOCIAL CTA COMMENTS SOCIAL CTA ISLANDS COMMENTS SOCIAL CTA RENDER ALL COMPONENTS RENDER ALL COMPONENTS, STATIC COMPONENTS ARE TOGETHER AND HYDRATE. HYDRATE KEY ONES FIRST AND SERVER-RENDERED HTML. THEN PROGRESSIVELY HYDRATE SCRIPTS ARE REQUIRED ONLY THE OTHERS. FOR INTERACTIVE ONES.
358. HYDRATION vs. ISLANDS TRADITIONAL HYDRATION PROGRESSIVE HYDRATION POST TITLE POST TITLE POST TITLE (STATIC HTML) POST CONTENT POST CONTENT POST CONTENT (STATIC HTML) COMMENTS SOCIAL CTA COMMENTS SOCIAL CTA ISLANDS COMMENTS SOCIAL CTA RENDER ALL COMPONENTS RENDER ALL COMPONENTS, STATIC COMPONENTS ARE TOGETHER AND HYDRATE. HYDRATE KEY ONES FIRST AND SERVER-RENDERED HTML. THEN PROGRESSIVELY HYDRATE SCRIPTS ARE REQUIRED ONLY THE OTHERS. FOR INTERACTIVE ONES.
359. HYDRATION vs. ISLANDS TRADITIONAL HYDRATION PROGRESSIVE HYDRATION POST TITLE POST TITLE POST TITLE (STATIC HTML) POST CONTENT POST CONTENT POST CONTENT (STATIC HTML) COMMENTS SOCIAL CTA COMMENTS SOCIAL CTA ISLANDS COMMENTS SOCIAL CTA RENDER ALL COMPONENTS RENDER ALL COMPONENTS, STATIC COMPONENTS ARE TOGETHER AND HYDRATE. HYDRATE KEY ONES FIRST AND SERVER-RENDERED HTML. THEN PROGRESSIVELY HYDRATE SCRIPTS ARE REQUIRED ONLY THE OTHERS. FOR INTERACTIVE ONES.
360. ISLANDS ARCHITECTURE PAGE LAYOUT POST TITLE POST CONTENT COMMENTS SOCIAL CTA
361. ISLANDS ARCHITECTURE PAGE LAYOUT (SSR’D) POST TITLE (SSR'D) POST CONTENT (SSR’D) COMMENTS PLACEHOLDER (SSR) SOCIAL CTA PLACEHOLDER (SSR) COMMENTS “APP” SOCIAL CTA “APP” (SSR’D + HYDRATION SCRIPT) (SSR’D + HYDRATION SCRIPT)
362. ISLANDS ARCHITECTURE PAGE LAYOUT (SSR’D) POST TITLE (SSR'D) POST CONTENT (SSR’D) COMMENTS PLACEHOLDER (SSR’D) SOCIAL CTA PLACEHOLDER (SSR’D) COMMENTS “APP” SOCIAL CTA “APP” (SSR’D + HYDRATION SCRIPT) (SSR’D + HYDRATION SCRIPT)
363. ISLANDS ARCHITECTURE ↝ STANDALONE: Astro, Qwik, Marko, Iles, Capri ↝ PREACT: Fresh, preact-island, microsite ↝ SOLIDJS: Solid Start, isolid ↝ SVELTE: Elder.js
364. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
365. ISLANDS ARCHITECTURE ↝ STREAMING RENDERING + AUTOMATIC PARTIAL HYDRATION + COMPILER. ↝ AUTOMATIC PARTIAL HYDRATION ALLOWS INTERACTIVE COMPONENTS TO HYDRATE THEMSELVES. ↝ HYDRATION CODE IS ONLY SHIPPED FOR INTERACTIVE COMPONENTS.
366. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
367. ISLANDS ARCHITECTURE : ASTRO ↝ BY DEFAULT, SHIPS ZERO JAVASCRIPT. ↝ EVERY ISLAND IS LOADED IN PARALLEL. ↝ MULTI-FRAMEWORK: BUILD ISLANDS WITH REACT, PREACT, SVELTE, VUE, AND OTHERS. ↝ YOU CAN SPECIFY THE LOADING STRATEGY FOR EACH ISLAND INDIVIDUALLY.
368. import MyReactComponent from ' . . - - - <MyReactComponent /> - - - ISLANDS ARCHITECTURE : ASTRO /components/MyReactComponent.jsx';
369. import MyReactComponent from ' /components/MyReactComponent.jsx'; <MyComponent client:load /> <MyComponent client:idle /> <MyComponent client:visible /> <MyComponent client:m edia={string} /> . . - - - <MyComponent client:only={string} /> - - - ISLANDS ARCHITECTURE : ASTRO
370. import MyReactComponent from ' /components/MyReactComponent.jsx'; <MyComponent client:m edia="(max-width: 20em)" /> <MyComponent client:idle={{timeout: 200}} /> . . - - - <MyComponent client:visible={{rootMargin: "200px"}} /> - - - ISLANDS ARCHITECTURE : ASTRO
371. import MyReactComponent from ' /components/MyReactComponent.jsx'; <MyComponent client:m edia="(max-width: 20em)" /> <MyComponent client:idle={{timeout: 200}} /> . . - - - <MyComponent client:visible={{rootMargin: "200px"}} /> - - - ISLANDS ARCHITECTURE : ASTRO
372. import MyReactComponent from ' /components/MyReactComponent.jsx'; <MyComponent client:m edia="(max-width: 20em)" /> <MyComponent client:idle={{timeout: 200}} /> . . - - - <MyComponent client:visible={{rootMargin: "200px"}} /> - - - ISLANDS ARCHITECTURE : ASTRO
373. ISLANDS ARCHITECTURE : ASTRO GREAT 🟢 REDUCES THE AMOUNT OF JAVASCRIPT CODE SHIPPED TO THE CLIENT 🟢 FASTER PAGE LOADS AND TIME TO INTERACTIVE (TTI) 🟢 KEY CONTENT IS AVAILABLE ALMOST IMMEDIATELY TO THE USER 🟢 STATIC CONTENT IS RENDERED ON THE SERVER = PAGES ARE SEO-FRIENDLY NOT GREAT 🟡 HIGHLY INTERACTIVE PAGES WOULD PROBABLY REQUIRE THOUSANDS OF ISLANDS
374. ISLANDS ARCHITECTURE : ASTRO GREAT 🟢 REDUCES THE AMOUNT OF JAVASCRIPT CODE SHIPPED TO THE CLIENT 🟢 FASTER PAGE LOADS AND TIME TO INTERACTIVE (TTI) 🟢 KEY CONTENT IS AVAILABLE ALMOST IMMEDIATELY TO THE USER 🟢 STATIC CONTENT IS RENDERED ON THE SERVER = PAGES ARE SEO-FRIENDLY NOT GREAT 🟡 HIGHLY INTERACTIVE PAGES WOULD PROBABLY REQUIRE THOUSANDS OF ISLANDS
375. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS STREAMING SSR + SELECTIVE HYDRATION 2017 2022
377. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
378. HYDRATION IN REACT: BEFORE ↝ HYDRATION COULD ONLY BEGIN AFTER THE ENTIRE DATA WAS FETCHED AND RENDERED. ↝ USERS COULDN’T INTERACT WITH THE PAGE UNTIL HYDRATION WAS COMPLETE FOR THE WHOLE PAGE. ↝ PARTS OF YOUR APP THAT LOAD FAST WOULD ALWAYS HAVE TO WAIT FOR THE SLOW ONES.
379. HYDRATION IN REACT: BEFORE TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE FETCHING DATA (SERVER) RENDERING HTML (SERVER) LOADING CODE (CLIENT) HYDRATING
380. HYDRATION IN REACT: AFTER TIME TO FIRST BYTE FIRST CONTENTFUL PAINT TIME TO INTERACTIVE RENDERING HTML (SERVER) LOADING CODE (CLIENT) FETCHING DATA (SERVER) […] HYDRATING […] […] […] […] […] […]
381. HYDRATION IN REACT: AFTER ↝ REACT PRIORITIZES HYDRATING THE PARTS THAT THE USER INTERACTED WITH BEFORE THE REST. ↝ COMPONENTS CAN BECOME INTERACTIVE FASTER BY ALLOWING THE BROWSER TO DO OTHER WORK AT THE SAME TIME AS HYDRATION.
382. HYDRATION IN REACT: AFTER ↝ REACT WON'T WAIT FOR HUGE COMPONENTS TO LOAD TO CONTINUE STREAMING HTML FOR THE REST OF THE PAGE. ↝ WHEN THE HTML BECOMES AVAILABLE ON THE SERVER, IT WILL BE ADDED TO THE SAME STREAM ALONG WITH A SCRIPT TAG AND INSERTED IN THE RIGHT PLACE.
383. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
384. 60 minutes.
385. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS REACT SERVER COMPONENTS 2020
386. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
387. IN 2020…
390. RSC: SERVER COMPONENTS ↝ COMPONENTS THAT RUN EXCLUSIVELY ON THE SERVER. ↝ THEY RENDER ONCE ON THE SERVER TO GENERATE UI. THEY NEVER HYDRATE OR RE-RENDER. ↝ THEIR CODE ISN'T INCLUDED IN THE JS BUNDLE. ↝ THE RENDERED OUTPUT IS SENT TO THE CLIENT AND REMAINS IMMUTABLE.
391. RSC: SERVER COMPONENTS ↝ THE CLASSIC COMPONENTS WE KNOW ARE NOW CLIENT COMPONENTS. ↝ AHEAD-OF-TIME REACT RENDERING (DURING THE BUILD OR ON THE SERVER). ↝ A ROUTING PARADIGM INTEGRATED WITH DATA FETCHING AND BUNDLING. ↝ UNRELATED TO SSR AND HYDRATION.
392. RSC: PARADIGM
393. RSC: PARADIGM ↝ ALMOST IDENTICAL TO HOW ISLANDS WORK. ↝ use client MARKS A BOUNDARY BETWEEN TWO MODULE GRAPHS. ↝ EACH COMPONENT DECIDES WHETHER TO BE A SERVER COMPONENT OR TO STICK WITH BEING A SERVER + CLIENT COMPONENT.
394. RSC: BOUNDARIES PAGE LAYOUT POST TITLE POST CONTENT COMMENTS SOCIAL CTA
395. RSC: BOUNDARIES APP PAGE LAYOUT HEADER POST TITLE POST POST CONTENT COMMENTS SOCIAL CTA
396. RSC: BOUNDARIES APP PAGE LAYOUT HEADER POST TITLE POST POST CONTENT 'use client' 'use client' COMMENTS SOCIAL CTA
397. RSC: BOUNDARIES APP PAGE LAYOUT HEADER 'use client' POST POST TITLE POST CONTENT COMMENTS SOCIAL CTA
398. RSC: BENEFITS ↝ THE CODE FOR SERVER COMPONENTS IS NEVER DELIVERED TO THE CLIENT. ↝ ACCESS TO THE BACK-END FROM THE TREE. ↝ MAY BE REFETCHED WHILE MAINTAINING CLIENT-SIDE STATE INSIDE OF THE TREE.
399. RSC: BEFORE — RSC FROM SCRATCH. PART 1: SERVER COMPONENTS #5 BY DAN ABRAMOV
400. RSC: AFTER — RSC FROM SCRATCH. PART 1: SERVER COMPONENTS #5 BY DAN ABRAMOV
401. RSC: PROTOCOL — DEVTOOLS FOR REACT SERVER COMPONENTS BY ALVAR LAGERLÖF
402. RSC: PROTOCOL
403. REACT SERVER COMPONENTS NOT GREAT GREAT 🟢 THE CODE FOR SERVER COMPONENTS IS NEVER DELIVERED TO THE CLIENT 🟡 WHILE OUR JS BUNDLES GET SMALLER, THE HTML FILE GETS LARGER 🟡 MUCH MORE ORCHESTRATION NEEDED 🟢 ACCESS TO THE BACK-END FROM THE TREE 🟡 STILL EXPERIMENTAL (IMHO 🌶) 🟢 MAY BE REFETCHED WHILE MAINTAINING 🟡 THERE ISN'T MUCH TOOLING YET CLIENT-SIDE STATE INSIDE OF THE TREE 🟡 ONLY FEW OPTIONS FOR DEVELOPERS TO LEVERAGE RSC
404. RSC: USE CASES
405. RSC: IMPLICATIONS
406. CODE EXTRACTION
407. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
408. CODE EXTRACTION: PRIOR ART <script runat="server"> var resultSet Jaxer.DB.execute("SELECT * FROM myTable"); var newPrice resultSet.rows[0].price; </script> <script runat="server-proxy"> function getPriceFromServer() { return 42; } </script> <button onclick="alert(getPriceFromServer())">Price</button> <script runat="both"> function validateCreditCard(number) {} = = </script>
409. CODE EXTRACTION: PRIOR ART <script runat="server"> var resultSet Jaxer.DB.execute("SELECT * FROM myTable"); var newPrice resultSet.rows[0].price; </script> <script runat="server-proxy"> function getPriceFromServer() { return 42; } </script> <button onclick="alert(getPriceFromServer())">Price</button> <script runat="both"> function validateCreditCard(number) {} = = </script>
410. CODE EXTRACTION: PRIOR ART
411. CODE EXTRACTION… JAXER (2008) SOLID-START (2023)
412. CODE EXTRACTION… JAXER (2008) LYNX (2025)
413. CODE EXTRACTION… JAXER (2008) WECHAT
414. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
415. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
416. REACT SERVER COMPONENTS
417. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
418. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PARTIAL PRERENDERING 2023
419. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
420. PARTIAL PRERENDERING ↝ A NEXT.JS FEATURE. ↝ AIMS TO IMPROVE THE LOADING SPEED FOR PAGES WITH MOSTLY STATIC CONTENT + A FEW DYNAMIC PARTS. ↝ STATIC SHELL SERVED QUICKLY FROM THE EDGE. ↝ PLACEHOLDERS LEFT FOR DYNAMIC CONTENT.
421. PARTIAL PRERENDERING PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART
422. PARTIAL PRERENDERING PAGE LAYOUT NAVBAR CART RENDERS ALL THE STATIC PRODUCT INFORMATION CONTENT INSTANTLY FROM THE EDGE RECOMMENDED PRODUCTS
423. PARTIAL PRERENDERING PAGE LAYOUT NAVBAR CART WHILE THE PAGE LOADS PRODUCT INFORMATION (STYLES, SCRIPTS, ETC) RENDER THE REST FOR EACH USER, DYNAMICALLY RECOMMENDED PRODUCTS
424. PARTIAL PRERENDERING GENERATE STATIC CONTENT BUILD TIME STATIC SHELL ROUTE TO THE NEAREST USER REQ DEPLOY CDN SERVE STATIC SHELL BROWSER EDGE SERVER GENERATE DYNAMIC CONTENT DYNAMIC CONTENT FULLY RENDERED PAGE STREAM STATIC CONTENT VISIBLE
425. PARTIAL PRERENDERING GENERATE STATIC CONTENT BUILD TIME STATIC SHELL ROUTE TO THE NEAREST USER REQ DEPLOY CDN SERVE STATIC SHELL BROWSER EDGE SERVER GENERATE DYNAMIC CONTENT DYNAMIC CONTENT FULLY RENDERED PAGE STREAM STATIC CONTENT VISIBLE
426. PARTIAL PRERENDERING
427. PARTIAL PRERENDERING
428. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
429. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SERVER ISLANDS 2024
430. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
431. SERVER ISLANDS: ASTRO <Avatar server:defer> <GenericUserImage slot="fallback" /> </Avatar>
432. SERVER ISLANDS PAGE LAYOUT NAVBAR PRODUCT INFORMATION RECOMMENDED PRODUCTS CART
433. SERVER ISLANDS
434. SERVER ISLANDS
435. SERVER ISLANDS
436. SERVER ISLANDS vs. PPR
437. Questions?
438. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS 🔥🔥 Other Techniques
439. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS ALI AS IN G R E ACT TO P REACT 2018 2024
440. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
441. PREACT: OVERVIEW 42.4KB (MIN+GZIP) 4KB (MIN+GZIP)
442. PREACT: OVERVIEW ↝ WAY SMALLER BUNDLE (APPROXIMATELY 3.5KB). ↝ FASTER VIRTUAL DOM IMPLEMENTATION. ↝ MORE EFFECTIVE MEMORY USAGE.
443. PREACT: SOURCE OF INSPIRATION
444. PREACT: SOURCE OF INSPIRATION
445. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Porting our app to Preact.
446. PREACT: RESULTS
447. PREACT: RESULTS
448. PREACT: CASE STUDY 205.9KB 175.26KB MIN + GZIP / NO POLYFILLS MIN + GZIP / NO POLYFILLS
449. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS W I N DOW ING 2018 2020 2023
450. WINDOWING: OVERVIEW — HOW DOES WINDOWING WORK? • BRIAN VAUGHN
451. WINDOWING: OVERVIEW — RENDERING LARGE LISTS WITH REACT-WINDOW • ADDY OSMANI
452. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Optimizing long lists with windowing.
453. WINDOWING: OPTIONS
454. WINDOWING: CASE STUDY
455. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS C O DE SP L I TTING 2018 2024
456. CODE SPLITTING: OVERVIEW — HTTPS://WWW.PATTERNS.DEV
457. CODE SPLITTING WITH REACT
458. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Code Splitting with lazy and Suspense.
459. CODE SPLITTING: CASE STUDY
460. CODE SPLITTING: CASE STUDY
461. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Code Splitting and Adaptive Loading.
462. 30 minutes.
463. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS DATA- OR I ENT ED D ESIGN 2020 2025
465. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
466. DATA-ORIENTED DESIGN
467. DATA-ORIENTED DESIGN ↝ A COLLECTION OF TECHNIQUES TO ANALYZE THE ACCESS PATTERNS OF THE DIFFERENT KINDS OF DATA AND SELECT DATA STRUCTURES THAT OPTIMALLY LEVERAGE THE UNDERLYING HARDWARE. ↝ THE OPTIMIZATIONS ARE OFTEN RELATED TO OPTIMIZING USAGE OF THE CPU CACHE, LIMITING LOADING/STORING TO RAM (CACHE MISSES), AND USAGE OF SIMD INSTRUCTIONS.
468. BECAUSE… CPUs ARE FAST ↝ BASIC MATH CAN BE DONE IN A FEW CYCLES. ↝ COMPLEX MATH REQUIRES A FEW MORE CYCLES; BUT IT’S STILL OK. ↝ SIMD MAKES THE THROUGHPUT EVEN BETTER BY PROCESSING MULTIPLE VALUES IN THE TIME IT TAKES TO DO A SINGLE INSTRUCTION.
469. BUT… MEMORY IS NOT AS FAST ↝ CPUS CAN ONLY OPERATE ON DATA THAT IS PHYSICALLY CO-LOCATED. ↝ EITHER IN A REGISTER OR IN THE L1 CACHE. ↝ EVERYTHING ELSE NEEDS TO BE LOADED FIRST.
470. BUT… MEMORY IS NOT AS FAST CPU MEMORY 4 NS ⇆ 0.5 NS ⇆ 100 NS ⇆ L2 CACHE L1 CACHE
471. BUT… MEMORY IS NOT AS FAST CPU MEMORY 200X 8X 1X L2 CACHE L1 CACHE
472. BUT… MEMORY IS NOT AS FAST
473. BUT… MEMORY IS NOT AS FAST ↝ MEMORY ACCESS IS SLOW. ↝ CACHING CAN ALLEVIATE MOST OF THE LATENCY IF THE CPU CAN PREDICT THE ACCESS PATTERN—USUALLY, THE SIMPLE ONES. ↝ LINEAR PATTERNS ARE USUALLY GOOD. ↝ RANDOM PATTERNS ARE USUALLY BAD.
474. ⨯ AOS SOA: ARRAY OF STRUCTURES type Entity { position: { x: number; y: number }; velocity: { x: number; y: number }; hitPoints: number; }; const entities: Entity[] [ { position: { x: 0, y: 0 }, velocity: { x: 1, y: 1 }, hitPoints: 100 }, { position: { x: 10, y: 5 }, velocity: { x: -1, y: 0 }, hitPoints: 80 }, = = . . . / / ];
475. ⨯ AOS SOA: STRUCTURE OF ARRAYS const positions new Float32Array([0, 0, 10, 5 / /]); const velocities new Float32Array([1, 1, -1, 0 / /]); const hitPoints new Int16Array([100, 80 / const i /]); 0; console.log(positions[i * 2], positions[i * 2 + 1]); x, y console.log(velocities[i * 2], velocities[i * 2 + 1]); * * . / . . / . . . * * * . . . * = = = = console.log(hitPoints[i]);
476. ⨯ AOS SOA ARRAY OF STRUCTURES STRUCTURE OF ARRAYS ✅ EASY TO READ, WRITE, AND MODEL FOR US. ✅ EXCELLENT DATA LOCALITY. ✅ ENTITIES ARE INTUITIVE BUNDLES. ✅ CACHE-FRIENDLY + SIMD ACCELERATION POSSIBLE. ❌ POOR DATA LOCALITY. ✅ PARALLELIZABLE: SYSTEMS OPERATE ON “COLUMNS” INDEPENDENTLY. ❌ ITERATING OVER MILLIONS SCALES BADLY. ❌ LESS INTUITIVE FOR DEVS USED TO OBJECTS. ❌ HARD TO PARALLELIZE BECAUSE DATA IS INTERLEAVED. ❌ HARDER TO DEBUG AN ENTITY.
477. ⨯ AOS SOA ARRAY OF STRUCTURES STRUCTURE OF ARRAYS ✅ EASY TO READ, WRITE, AND MODEL FOR US. ✅ EXCELLENT DATA LOCALITY. ✅ ENTITIES ARE INTUITIVE BUNDLES. ✅ CACHE-FRIENDLY + SIMD ACCELERATION POSSIBLE. ❌ POOR DATA LOCALITY. ✅ PARALLELIZABLE: SYSTEMS OPERATE ON “COLUMNS” INDEPENDENTLY. ❌ ITERATING OVER MILLIONS SCALES BADLY. ❌ LESS INTUITIVE FOR DEVS USED TO OBJECTS. ❌ HARD TO PARALLELIZE BECAUSE DATA IS INTERLEAVED. ❌ HARDER TO DEBUG AN ENTITY.
478. ARRAY OF STRUCTURES POSITION X Y VELOCITY DX DY HP
479. ARRAY OF STRUCTURES UNITS 0 ⇢ 2 X Y DX DY HP X Y DX DY HP X Y DX DY HP HP X Y DX DY HP HP X Y DX DY HP UNITS 3 ⇢ 5 X Y DX DY HP X Y DX DY UNITS … ⇢ N X Y DX DY HP X Y DX DY
480. ARRAY OF STRUCTURES UNITS 0 ⇢ 2 HP HP HP HP HP HP HP UNITS 3 ⇢ 5 HP UNITS … ⇢ N HP
481. STRUCTURE OF ARRAYS POSITIONS X Y X Y X Y X Y X Y X Y X Y DX DY DX DY DX DY HP HP HP HP HP HP VELOCITIES DX DY DX DY DX DY DX DY HIT POINTS HP HP HP HP HP HP HP HP
482. STRUCTURE OF ARRAYS POSITIONS THREAD A X Y X Y X Y X Y X Y X Y DX DY DX DY DX DY HP HP HP HP HP HP VELOCITIES THREAD B DX DY DX DY DX DY HIT POINTS THREAD C HP HP HP HP HP HP
483. DATA-ORIENTED DESIGN ↝ SMALL LOOPS THAT OPERATE ON ARRAYS OF FIELDS. ↝ MINIMIZE THE AMOUNT OF DATA IN CACHE THAT ISN’T READ OR WRITTEN DURING THE UPDATE. ↝ SEVERAL TRANSFORMS CAN RUN IN PARALLEL ON THE SAME LOGICAL OBJECT IF THEY DON’T SHARE FIELDS.
484. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Comparing two di erent memory layouts for the ff same data.
485. DATA-ORIENTED DESIGN: BENCHMARKS
486. DATA-ORIENTED DESIGN: BENCHMARKS
487. DATA-ORIENTED DESIGN: BENCHMARKS
488. DATA-ORIENTED DESIGN: BENCHMARKS
489. THRIVING WHEN AT SCALE…
490. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
491. THE GAMES WE PLAY…
492. THE GAMES WE PLAY…
493. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
494. AND IN BROWSER APPS WE BUILD!
495. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Comparing two di erent memory layouts for the same data with ff @pmndrs/koota.
496. Questions?
497. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS 🔥🔥 Measuring Things
498. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS BEHAVIOR ANALYSIS
499. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS R AGE C LICK S
500. RAGE CLICKS: REMEMBER THEM?
501. “Rage clicks occur when users rapidly click (or tap) on your site or app. Rage clicking is the digital equivalent of cursing to release frustration.” Severity and impact of computer user frustration • 2006
502. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Detecting rage clicks.
503. RAGE CLICKS: CORRELATING — WEB PAGE USABILITY MATTERS • ADDY OSMANI, 2019
504. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
505. RAGE CLICKS: CORRELATING — UX & PERFORMANCE: METRICS THAT MATTER • PHILIP TELLIS, 2018
506. RAGE CLICKS: CORRELATING — UX & PERFORMANCE: METRICS THAT MATTER • PHILIP TELLIS, 2018
507. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS DE AD CL ICKS
508. DEAD CLICKS ↝ WHEN USERS CLICK AN ELEMENT, BUT THE CLICK HAS NO EFFECT ON THE PAGE. ↝ UNLIKE RAGE CLICKS, THEY DON'T REQUIRE RAPIDFIRE, BACK-TO-BACK CLICKS TO TRIGGER. ↝ LIKE RAGE CLICKS, THERE IS A CHANCE THAT A DEAD CLICK IS NOT OUT OF FRUSTRATION—A FALSE POSITIVE.
509. DEAD CLICKS E.G.: ↝ CLICKING PARAGRAPHS OF TEXT TO FOCUS ATTENTION AS YOU STRUGGLE TO INTERNALIZE A CHALLENGING CONCEPT. ↝ CLICKING THE BACKGROUND OF A PAGE TO ESCAPE AN OVERLAY.
510. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Detecting dead clicks.
511. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS T H RAS H ED C UR SO R
512. THRASHED CURSOR
513. THRASHED CURSOR ↝ MOVEMENT COVERING A HIGH DISTANCE TRAVELLED IN A SHORT AMOUNT OF TIME, WITH NO INTENTIONALITY. ↝ INDICATES IMPATIENCE, DOUBT, DIFFICULTY, OR ANXIETY. ↝ IT OFTEN HAPPENS WHEN THE USER IS WAITING BUT IT CAN ALSO BE ASSOCIATED WITH HIGH COGNITIVE LOAD.
514. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Detecting thrashed cursor.
515. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
516. THRASHED CURSOR
517. THRASHED CURSOR E.G.: ↝ PERFORMANCE: IF IT OCCURS WHILE USERS ARE WAITING FOR A VIDEO TO BUFFER, A PICTURE WINDOW TO OPEN, OR THE NEXT ROUTE TO LOAD. ↝ COGNITIVE LOAD: IF IT OCCURS WHILE THEY'RE ENGAGED IN AN ACT OF FILLING OUT, CREATING, WRITING, OR OTHER CHALLENGING TASK.
518. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS RAN DO M SC R OLL IN G
519. RANDOM SCROLLING ↝ RAPID SCROLLING, OFTEN THROUGH LARGE CHUNKS. ↝ INDICATES THAT A USER IS ON THE HUNT FOR THEIR NEXT STEP. ↝ PEOPLE HAVE LIMITED ATTENTION SPANS AND SCROLLING FEELS LIKE EXTRA WORK SO THIS CAN QUICKLY CAUSE USERS TO LOSE HOPE.
520. RANDOM SCROLLING: USEFULNESS
521. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Detecting random scrolling.
522. RANDOM SCROLLING: USEFULNESS
523. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
524. RANDOM SCROLLING IT CAN INDICATE… ↝ THAT CONTENT IS TOO LONG AND CAUSES USERS TO BECOME IMPATIENT. ↝ WHICH INFORMATION YOUR USERS CONSIDER USEFUL. ↝ THE RELATIONSHIP BETWEEN CONTENT AND YOUR CALLSTO-ACTION.
525. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
526. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS BAC K T R ACK IN G
527. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
528. BACKTRACKING
529. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OTHERS
530. CUSTOM METRICS
531. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
532. CUSTOM METRICS: jQUERY — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
533. CUSTOM METRICS: jQUERY
534. CUSTOM METRICS: jQUERY
535. CUSTOM METRICS: jQUERY \
536. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
537. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Monitoring jQuery calls.
538. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS The Future
539. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS REACT
540. OUTGROWING A SINGLE COMPANY
541. OUTGROWING A SINGLE COMPANY
542. THE PRESENT FUTURE ↝ REACT COMPILER FORGET ↝ ACTIVITY OFFSCREEN ↝ OPTIMISTIC STATE UPDATES ↝ RESOURCE PRELOADING ↝ TRANSITION TRACING ↝ …
543. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OFFSCREEN ACTIVITY
544. OFFSCREEN ACTIVITY ↝ 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.
545. OFFSCREEN ACTIVITY ↝ 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.
546. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
547. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
548. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SUSPENSE FOR CPU-BOUND TREES
549. SUSPENSE FOR CPU-BOUND TREES
550. 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.
551. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS REACT NATIVE
552. HERMES V1
553. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
554. STATIC HERMES — STATIC HERMES (REACT NATIVE EU 2023 ANNOUNCEMENT) • TZVETAN MIKOV
555. REACT STRICT DOM
556. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS REACT EVERYWHERE?
557. REACT EVERYWHERE!
558. REACT EVERYWHERE!
559. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS AI, AGENTS & WHATNOT
560. AI PRIMITIVES
561. AGENT-NATIVE UI BUILDING
562. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS THE WEB
563. ROUTING & MPAs vs. SPAs
564. ROUTING & MPAs vs. SPAs WATERFALLS
565. ROUTING & MPAs vs. SPAs HYBRID ROUTING
566. HYDRATION
567. 0KB JAVASCRIPT
568. CODE EXTRACTION
569. CODE EXTRACTION
570. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
571. CODE EXTRACTION
572. CODE EXTRACTION import json from "./foo.json" with { type: "json" }; import ComponentA from "./A" with { type: "client" } import ComponentB from "./B" with { type: "both" }
573. INFRASTRUCTURE
574. WHY SOMETHING IS THE FUTURE ROUTING MPAs vs. SPAs HYDRATION COMPILERS CODE EXTRACTION OKB JAVASCRIPT REACTIVITY
575. WHY SOMETHING IS THE FUTURE
576. Questions?
577. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Closing Notes
578. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #1 Software development continually goes through cycles.
579. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
580. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
581. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
583. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #2 React is a spreading agent for Computer Science in our realm. DSLs, COMPILERS, CONCURRENCY, FIBERS, EFFECT HANDLERS, IMMUTABILITY… OH MY!
584. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #3 React tries to address the lack of some JavaScript/Web Platform resources.
585. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Understanding these #4 internals and their rationales helps us implement our own abstractions.
586. OUR OWN ABSTRACTIONS… ↝ INTERNAL SUSPENSE-READY SOLUTIONS (E.G. FIRST CLASS SUPPORT FOR PROMISES). ↝ GENERATOR-BASED SCHEDULER. ↝ CUSTOM MEMORY MANAGEMENT. ↝ CUSTOM METRICS (E.G. DXA, JQUERY TRACKING).
587. OUR OWN ABSTRACTIONS: RENDERERS
588. OUR OWN ABSTRACTIONS: AGENTS
589. OUR OWN ABSTRACTIONS: COMPILERS
590. OUR OWN ABSTRACTIONS: COMPILERS
591. BUT BEWARE!
592. BUT BEWARE!
593. BUT BEWARE!
594. BUT BEWARE!
595. BUT BEWARE! — HTTPS://XKCD.COM/1172
596. BUT BEWARE! — HTTPS://XKCD.COM/1172
597. BUT BEWARE! — HTTPS://XKCD.COM/1172
598. BUT BEWARE! — HTTPS://XKCD.COM/1172
599. BUT BEWARE! — HTTPS://XKCD.COM/1172
600. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS AI agents can write React. But engineers #5 who understand scheduling, rendering, and data- ow boundaries can decide what should be fl optimized.
601. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Internals matter more in the AI era. #5 Compilers automate optimizations. Agents automate code. Only engineers understand ff tradeo s.
602. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS React stopped being #6 just a library years ago. AND WE’RE STILL CATCHING UP TO WHAT IT BECAME… ↝ COMPILER TARGET? ↝ RUNTIME SCHEDULER? ↝ SERVER-FIRST PLATFORM?
603. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #7 Core Web Vitals are a better starting point than a nish line. fi — IN THE BLINK OF AN EYE • TIM KADLEC , 2024
604. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #8 There's no silver bullet. Identify your core metrics.
605. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Always try to correlate #9 behavior analysis with contextual metrics and business outcomes to tell the full story.
606. BUSINESS OUTCOMES… — AKAMAI AND CHROME RESEARCH • 2017
607. LCP ⇆ RETENTION RATE — CORE WEB VITALS AND THEIR EFFECT ON USER EXPERIENCE • PHILIP TELLIS, 2025
608. CLS ⇆ RELOAD RATE — CORE WEB VITALS AND THEIR EFFECT ON USER EXPERIENCE • PHILIP TELLIS, 2025
609. INP ⇆ RAGE CLICK RATE — CORE WEB VITALS AND THEIR EFFECT ON USER EXPERIENCE • PHILIP TELLIS, 2025
610. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
611. BUSINESS OUTCOMES…
612. BUSINESS OUTCOMES…
613. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #10 Don't take fast networks, CPUs and RAM for granted.
614. HARDWARE CONSTRAINTS…
615. HARDWARE CONSTRAINTS…
616. HARDWARE CONSTRAINTS…
617. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #10 Test on real phones and networks.
618. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS There's probably a business case for #11 making your app faster. But web performance is about more than “just” business.
619. MORE THAN “JUST” BUSINESS!
620. MORE THAN “JUST” BUSINESS!
622. THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator