🇨🇭 ZurichJS 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. Grüezi, Zürich! 👋 🇨🇭 REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS • SEPTEMBER 10, 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? — RUM REPORT • 2022
8. BROWSER MIX — RUM REPORT • 2022
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. AND 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…
39. FIXING WEB PERFORMANCE…
40. FIXING WEB PERFORMANCE…
41. FIXING WEB PERFORMANCE…
42. FIXING WEB PERFORMANCE…
44. MAKING THINGS “FAST” PERF MITIGATORS: ↝ shouldComponentUpdate • React.PureComponent ↝ React.memo ↝ useMemo • useCallback ↝ useTransition • useDeferredValue • React.Suspense & MUCH MORE!
46. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
47. […] “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
48. […] “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
49. WE’LL NOT FOCUS ON… ↝ POPULAR REACT HOOKS • (META) FRAMEWORKS. ↝ FINE-GRAINED REACTIVITY AND SIGNALS. ↝ ISG • SSR • STREAMING SSR • RSC. ↝ PROGRESSIVE/SELECTIVE/PARTIAL HYDRATION • ISLANDS ARCHITECTURE • RESUMABILITY. ↝ COMPILERS AND STATIC ANALYSIS.
50. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS METHODOLOGY
51. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
52. METHODOLOGY: APP HOLOTYPES
53. METHODOLOGY: APP HOLOTYPES 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
54. 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.
55. METHODOLOGY: VERTICALS
56. METHODOLOGY: OTHER LANGUAGES
57. METHODOLOGY: INSPIRATION
58. METHODOLOGY: INSPIRATION
59. 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
60. METHODOLOGY: TOPICS ↝ SCHEDULING THINGS ↝ RENDERING THINGS ↝ PREDICTING THINGS ↝ PRIORITIZING THINGS ↝ CLOSING NOTES
61. METHODOLOGY: STEPS ↝ CLONING THE REPO NOW. ↝ GETTING THE SLIDES LATER. ↝ QUESTIONS AT THE END OF EACH SECTION. ↝ CONFERENCE BREAKS.
62. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
63. METHODOLOGY: DEMO PROJECT
64. METHODOLOGY: DEMO PROJECT
65. METHODOLOGY: DEMO PROJECT
66. METHODOLOGY: DEEP DIVES
67. METHODOLOGY: BLOWING MINDS
68. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Scheduling Things 🔥🔥🔥
69. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Scheduling Work 🔥🔥🔥
70. 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
71. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS FIBER(S)
72. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OVERVIEW
73. STACK FRAMES function add(x,y) { const result return result; } = add(2, 2) x + y;
74. 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) = = }
75. 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, }, }, = } = }
76. 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.
77. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS UNITS OF WORK
78. 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.
79. 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.
80. 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.
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. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
83. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
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. AND THAT MAKES IT A CONVENIENT WAY TO TRACK, SCHEDULE, PAUSE AND ABORT THE WORK.
85. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Inspecting Elements.
86. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS MANIPULATING UNITS OF WORK
87. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
88. “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
89. HOMOICONICITY (let [x 1] > = (inc x)) ; 2
90. HOMOICONICITY PERFORMS A TEMPORARY BINDING (BINDS X TO THE VALUE 1) (let [x 1] > = (inc x)) ; 2
91. HOMOICONICITY (let [x 1] (inc x)) ; 2 INCREMENTS X TO GIVE THE > = RETURN VALUE OF 2
92. 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
93. HOMOICONICITY IT CAN BE THOUGHT OF AS A LIST WITH THREE ELEMENTS: ↝ A SYMBOL NAMED LET ↝ A VECTOR WITH TWO ELEMENTS A SYMBOL (X) AND AN INTEGER ↝ A LIST WITH TWO ELEMENTS A SYMBOL (INC) AND A SYMBOL (X)
94. HOMOICONICITY + REACT ↝ REACT ELEMENTS ARE JUST DATA. ↝ JUST LIKE IN LISP, REACT COMPONENTS CAN MANIPULATE THEIR CHILDREN AND RETURN COMPLETELY DIFFERENT THINGS.
95. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Pattern Matching in React.
96. “[…] 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
97. PATTERN MATCHING > a - > n * factorial (n - 1) = factorial n = 1 = factorial 0 : (Integral a) : factorial a
98. PATTERN MATCHING factorial factorial 0 factorial n fib (Integral a) fib 0 1 fib 1 1 fib n | n a a 2 > > - > = = = = > = = = : : fib (n-1) + fib (n-2)
99. PATTERN MATCHING
100. 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 ({
101. 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 ({
102. 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> ); > = = > = > = = = = }
103. 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> ); > = = > = > = = = = } PATTERN MATCHING + REACT.SUSPENSE + REACT.LAZY() = USERS DOWNLOAD ONLY THE COMPONENT BUNDLE THAT MATCHES.
104. 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> ); > = = > = > = = = = } MANIPULATING BASED ON ELEMENTS DATA. PATTERN MATCHING + REACT.SUSPENSE + REACT.LAZY() = USERS DOWNLOAD ONLY THE COMPONENT BUNDLE THAT MATCHES.
105. 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.
106. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
107. FIBERS IN REACT: RECAP
108. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
109. fi REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Inspecting elements using @pmndrs/itsne.
110. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS FIBERS IN NODE
111. 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.
112. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
113. 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.
114. 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).
115. 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.
116. 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.
117. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
119. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
120. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS FIBERS OUT THERE
121. 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.
122. FIBERS OUT THERE: BUILT-IN
123. FIBERS OUT THERE: ECOSYSTEM
124. FIBERS OUT THERE: ECOSYSTEM
125. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
127. “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
128. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS COROUTINES
129. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OVERVIEW
131. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
132. 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.
133. COROUTINES VS. FIBERS
134. COROUTINES VS. FIBERS
135. COROUTINES VS. FIBERS
136. 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.
137. 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.
138. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS COROUTINES OUT THERE
139. COROUTINES OUT THERE: JAVASCRIPT
140. COROUTINES OUT THERE: BUILT-IN
141. COROUTINES OUT THERE: ECOSYSTEM
142. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS EFFECT HANDLERS
143. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OVERVIEW
144. 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.
145. EFFECT HANDLERS: EFF (* state.eff *) type user string * int effect Get: user > - = effect Set: user unit
146. EFFECT HANDLERS: EFF (* state.eff *) type user string * int effect Get: user > - = effect Set: user unit A USER WITH A NAME AND AGE.
147. EFFECT HANDLERS: EFF (* state.eff *) type user string * int WE DEFINE EFFECTS WITH THE effect effect Get: user > - = effect Set: user unit KEYWORD AND A TYPE SIGNATURE.
148. 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)
149. EFFECT HANDLERS: EFF WE HAVE A handler WITH THREE BRANCHES, AND ALL OF THEM RETURN A FUNCTION. 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)
150. EFFECT HANDLERS: EFF NO EFFECT (WHEN WE REACH THE END OF THE BLOCK). y IS THE RETURN VALUE. 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)
151. EFFECT HANDLERS: EFF let state | y handler fun currentState | effect Get k (y, currentState) (fun currentState | effect (Set newState) k (fun _ ;; > > - - > - > - > - = > - MATCHING OUR EFFECTS. (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) ;; k IS A CONTINUATION. IT REPRESENTS THE REST OF THE > > - - > - > - > - = > - COMPUTATION AFTER WHERE WE PERFORM AN EFFECT.
153. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS EFFECT HANDLERS IN REACT
154. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
155. 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'; } = = = = }
156. 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'; } = = = = }
157. function getName(user) { let name user.name; if (name === null) { name perform 'ask_name'; } THROW → PERFORM return name; } const arya const gendry { name: null, friendNames: [] }; { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { CATCH → HANDLE if (effect === 'ask_name') { resume with 'Arya Stark'; } = = = LETS US JUMP BACK TO WHERE WE PERFORMED THE EFFECT. = }
158. 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.
159. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #1 Layout Algorithm
160. LAYOUT ALGORITHM THE REACT TEAM APPARENTLY SPENT SOME TIME EXPERIMENTING WITH EFFECT-HANDLER CONTROL STRUCTURES FOR MANAGING LAYOUT.
161. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
162. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #2 Context API Drafts
163. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
164. CONTEXT API DRAFTS THEY’VE ALSO REMODELED THE CONTEXT API USING ALGEBRAIC EFFECTS.
165. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS ff #3 Side e ects within a component
166. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
167. 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] {
168. function ThemeBorderColorRequest() { } function FancyBox(children) { const color raise new ThemeBorderColorRequest(); return { THROW → RAISE 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) ); > - = } CATCH → CATCH EFFECT [, continuation] {
169. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #4 Hooks API
170. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
171. HOOKS API SEBASTIAN POINTS THAT “CONCEPTUALLY, HOOKS ARE ALGEBRAIC EFFECTS”.
172. 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.
173. 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.
174. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #5 Suspense internals
175. SUSPENSE INTERNALS
176. SUSPENSE INTERNALS
177. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
178. 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.
179. 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.
180. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS EFFECT HANDLERS OUT THERE
181. EFFECT HANDLERS OUT THERE
182. EFFECT HANDLERS OUT THERE
183. EFFECT HANDLERS OUT THERE
184. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Questions?
185. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SCHEDULING
186. TASKS A UNIT OF WORK THAT THE BROWSER DOES TO RENDER A FRAME. JAVASCRIPT STYLES LAYOUT PAINT COMPOSITE
187. TASKS JAVASCRIPT STYLES LAYOUT PAINT COMPOSITE
188. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Visualizing long tasks.
189. LONG TASKS
190. LONG TASKS
191. LONG TASKS
192. 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.
193. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #question 🤔 How to avoid blocking the main thread?
194. TASK RUNNING STRATEGIES A B C D
195. 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.
196. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
197. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
198. 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.
199. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #1 Actors
200. 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.
201. 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.
202. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #2 Shared Memory
203. 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.
204. WEB WORKERS: ACTORS ↝ 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.
205. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #3 Web Assembly
206. 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.
207. 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.
208. ↝ Atomics ↝ BuffferBackedObject ↝ Comlink ↝ WorkerDOM ↝ Partytown ↝ AND MUCH MORE!
209. PARALLELISM IS GREAT!
210. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
211. PARALLELISM IS GREAT!
212. PARALLELISM IS GREAT! ↝ GOOD FOR DATA PROCESSING AND CRUNCHING NUMBERS. ↝ HARD TO USE FOR UI-RELATED STUFF. ↝ HARDER THAN ADJUSTING IT FOR A SCHEDULER.
213. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING
214. SCHEDULING IN REACT?
215. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SCHEDULING IN REACT •
216. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OVERVIEW
217. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Expensive component with a CPU-bound operation.
218. #question 🤔 How could we improve that?
219. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
220. SCHEDULING WITH… OUR SCHEDULER
221. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Expensive component with a CPU-bound operation & our custom scheduler.
222. function* resourcefulOperation(value: number) { let newValue String(value); while (true) { YIELDING EXECUTION yield; for (let i newValue PROMOTED TO A GENERATOR 0; i < 1000000; i++) { `${value} + ${i} ${value + i}`; } return newValue; } } const initialValue const scheduler 0; new Scheduler(resourcefulOperation, initialValue); function ResourcefulComponent(props: { value: number }) { const { value } const result props; scheduler.performUnitOfWork(value); return <p>{result}</p>; = = = = = = = = } DOING CONCURRENT TASKS
223. #question 🤔 Did we just useTransition’ed?
224. 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>; = = = = = = }
225. 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 [_, startTransition] useTransition(); const [result, setResult] useState(""); useEffect(() { startTransition(() const newResult { resourcefulOperation(props.value); setResult(newResult); }); }, [props.value]); return <p>{result}</p>; > = = = = = > = = = = }
226. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS HEURISTICS
227. 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.
228. HEURISTICS USER INPUT → ↓ ORIGINAL RENDER TASK ↓ RESUME ORIGINAL RENDER TASK ↑ HIGHER PRIORITY RENDER TASK
229. HEURISTICS
230. HEURISTICS
231. 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.
232. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PRIORITY LEVELS
233. PRIORITY LEVELS
234. PRIORITY LEVELS
235. 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)
236. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS RENDER LANES
237. 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.
238. 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.
239. BITMASK-BASED CHANGE TRACKING…
241. #question 🤔 fi How do we bene t from these in our everyday projects?
242. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS USE CASES
243. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #1 Handling large sets of data
244. HANDLING LARGE SETS OF DATA 😔 NON-PRACTICAL… 😊 PRACTICAL… ↝ FINDING PRIMES ↝ RENDERING MANY DATA-POINTS ↝ CRACKING PASSWORDS ↝ PROCESSING DATA ↝ SIERPINSKI TRIANGLE ↝ RENDERING ON A <canvas>
245. HANDLING LARGE SETS OF DATA 😔 NON-PRACTICAL… 😊 PRACTICAL… ↝ FINDING PRIMES ↝ RENDERING MANY DATA-POINTS ↝ CRACKING PASSWORDS ↝ PROCESSING DATA ↝ SIERPINSKI TRIANGLE ↝ RENDERING ON A <canvas>
246. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
247. CASE STUDY
248. FAST COMPUTER + NO TRANSITIONS
249. FAST COMPUTER + TRANSITIONS
250. SLOW COMPUTER + NO TRANSITIONS
251. SLOW COMPUTER + TRANSITIONS
252. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS LOCATION DATA ↝ ˜100K DATA POINTS PLOTTED #1 ↝ SUPPORT FOR SEARCHING AND FILTERING. ↝ USED WORKERS + REDUX-SAGA UTILITIES + DEBOUNCING. ↝ COULD'VE USED TRANSITIONS.
253. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS GAME ADMIN PANEL ↝ THOUSANDS OF REAL-TIME #2 PLAYERS MESSAGING. ↝ SUPPORT FOR SEARCHING AND FILTERING. ↝ USED VIRTUALIZATION AND MEMOIZATION. ↝ COULD'VE USED TRANSITIONS.
254. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #2 Tackling Wasted Renders
255. useSyncExternalStore function useSyncExternalStore<Snapshot>( subscribe: (onStoreChange: () getSnapshot: () void) () Snapshot, getServerSnapshot?: () Snapshot > = > = > = > = > = ): Snapshot; void,
256. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
257. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
258. useSyncExternalStore
259. useSyncExternalStore
260. #question 🤔 fi How do we bene t from these in our everyday projects?
261. useLocation
262. useLocation function Pathname() { const { pathname } useLocation(); return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } useLocation(); return <Badge title={hash} subtitle="hash" />; = = }
263. useLocation function Pathname() { const { pathname } useLocation(); return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } useLocation(); return <Badge title={hash} subtitle="hash" />; = = }
264. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Wasted renders when using useLocation.
265. 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" />; > = > = > = = = = }
266. 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" />; > = > = > = = = = }
267. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Fixing wasted renders using useSyncExternalS tore.
268. …AND MUCH MORE!
269. …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; > = }
270. …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> ); = }
271. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #3 Async/Await for React components
272. REACT USE
273. REACT USE
274. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
275. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Creating our own version of pmndrs/suspendreact.
276. #question 🤔 Did we just create react.use()?
279. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SCHEDULING ON THE WEB
280. 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.
281. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
282. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SCHEDULE TASKS
283. 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.
284. SCHEDULE TASKS: OVERVIEW scheduler.postTask(renderCriticalUI, { priority: "user-blocking" }); scheduler.postTask(loadSidebarData, { priority: "background" });
285. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS YIELDING
286. 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.
287. YIELDING: OVERVIEW async function processLargeDataset(data) { processFirstHalf(data); await scheduler.yield(); processSecondHalf(data); }
288. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PENDING INPUT
289. 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(); = / / }
290. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
291. PENDING INPUT: IN REACT
292. PENDING INPUT: HEADS UP!
293. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS CASE STUDIES
294. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS INSTRUMENTATION
295. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
296. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Debugging using React Scan.
297. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
298. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Coding using React Grab.
299. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS INTERNAL TOOLING
300. CASE STUDY: INTERNAL TOOLING 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.
301. CASE STUDY: INTERNAL TOOLING
302. CASE STUDY: INTERNAL TOOLING
303. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PRODUCTS
304. CASE STUDY: PRODUCTS
305. CASE STUDY: PRODUCTS
306. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Questions?
307. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS 10 minutes.
308. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Predicting Work 🔥
309. PREDICT WORK ↝ MANY PERFORMANCE OPTIMIZATIONS CAN BE MADE WHEN WE CAN PREDICT WHAT USERS MIGHT DO. ↝ THERE ARE A FEW SIMPLE BUT EFFECTIVE WAYS FOR DEVELOPERS TO HELP THE BROWSER STAY ONE STEP AHEAD OF THE USER AND KEEP PAGES FAST.
310. PREDICT WORK: IDEAS ↝ PREDICT TAB NAVIGATION IN DASHBOARDS. ↝ PREFETCH THE NEXT ROUTE AFTER LOGIN SUCCESS. ↝ PRECONNECT ANALYTICS ENDPOINTS AFTER CONSENT. ↝ PRERENDER CHECKOUT AFTER CART INTERACTION. ↝ PREFETCH THE NEXT ARTICLE WHEN THE READER SCROLLS 75%.
311. PREDICT WORK: IDEAS
312. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PRECONNECT
313. PRECONNECT: OVERVIEW ↝ IT ALLOWS THE BROWSER TO SET UP EARLY CONNECTIONS BEFORE THE REQUEST IS ACTUALLY SENT TO THE SERVER. THIS INCLUDES: ↝ TLS NEGOTIATIONS ↝ TCP HANDSHAKES ↝ ELIMINATES ROUND-TRIP LATENCY.
314. PRECONNECT: OVERVIEW <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://api.example.com"> <script> fetch("https://api.example.com/user"); </script>
315. PRECONNECT: OVERVIEW 100MS 200MS 300MS 400MS 500MS 600MS 700MS HTML CSS FONT 1 FONT 2 FONTS START LOADING FONTS RENDERED
316. PRECONNECT: OVERVIEW 100MS 200MS 300MS 400MS 500MS 600MS HTML CSS FONT 1 FONT 1 FONT 2 FONTS START LOADING FONT 2 FONTS RENDERED 700MS
317. PRECONNECT: IDEAS PRECONNECT: ↝ GOOGLE FONTS BEFORE CSS LOADS. ↝ THE API ORIGIN AFTER LOGIN SUCCESS. ↝ THE CDN HOSTING HERO IMAGE. ↝ THE ANALYTICS ENDPOINT AFTER CONSENT. ↝ THE CHECKOUT DOMAIN FROM THE PRODUCT PAGE.
318. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SPECULATION RULES
319. SPECULATION RULES: OVERVIEW ↝ DESIGNED TO IMPROVE PERFORMANCE FOR FUTURE DOCUMENT NAVIGATIONS. ↝ A MODERN AND MORE EXPRESSIVE REPLACEMENT FOR OLDER PRERENDER TECHNIQUES. ↝ PREFETCH/PRERENDER DOCUMENTS AHEAD OF CLICKS. ↝ WORKS BEST FOR MPAS OR ROUTE-LEVEL TRANSITIONS.
320. SPECULATION RULES: OVERVIEW <script type="speculationrules"> { "prefetch": [{ "source": "list", "urls": ["/checkout"] }] } </script> <script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/product/ " } }] } * </script>
321. SPECULATION RULES: IDEAS ↝ PREFETCH /DASHBOARD AFTER LOGIN SUCCESS. ↝ PREFETCH /CHECKOUT AFTER CART INTERACTION. ↝ PREFETCH TOP RESULT LINKS IN THE VIEWPORT. ↝ PRERENDER LIKELY NEXT SETTINGS TAB.
322. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Prioritizing Things 🔥
323. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PRIORITY HINTS
324. PRIORITY HINTS: OVERVIEW ↝ TELL THE BROWSER WHAT MATTERS FIRST. ↝ OVERRIDE DEFAULT FETCH HEURISTICS WHEN NEEDED. ↝ OPTIMIZE LCP RESOURCES EXPLICITLY.
325. 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> ! < < < PRIORITY HINTS: OVERVIEW
326. 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> ! < < < PRIORITY HINTS: OVERVIEW
327. Important validation data const user await fetch("/user"); Less important content data = = / const relatedPosts / / / PRIORITY HINTS: OVERVIEW await fetch("/posts/suggested", { priority: "low" });
328. Important validation data const user await fetch("/user"); Less important content data = = / const relatedPosts / / / PRIORITY HINTS: OVERVIEW await fetch("/posts/suggested", { priority: "low" });
329. PRIORITY HINTS: IDEAS ↝ BOOST HERO IMAGE PRIORITY. ↝ PRIORITIZE ROUTE TRANSITION BUNDLES. ↝ DEPRIORITIZE RECOMMENDATION PANELS. ↝ DEPRIORITIZE BELOW-FOLD IMAGES. ↝ CONTROL HYDRATION FETCH ORDERING.
330. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS NATIVE LAZY LOADING
331. NATIVE LAZY LOADING: OVERVIEW ↝ ZERO JAVASCRIPT. ↝ DEFER IMAGE AND IFRAME DOWNLOADS AUTOMATICALLY. ↝ LET THE BROWSER DECIDE OPTIMAL FETCH TIMING. ↝ REMOVE OFF-SCREEN CONTENT FROM THE CRITICAL RENDERING PATH.
332. NATIVE LAZY LOADING: OVERVIEW <img src="/gallery-1.jpg" loading="lazy" width="800" height="600" /> <iframe src="https://maps.example.com" loading="lazy" width="600" height="400"> </iframe>
333. NATIVE LAZY LOADING: IDEAS ↝ PRODUCT GALLERY IMAGES. ↝ EMBEDDED YOUTUBE PLAYERS. ↝ MAPS AND CHAT WIDGETS. ↝ ANALYTICS DASHBOARDS BELOW THE FOLD. ↝ ROUTE-LEVEL IFRAMES IN MICRO-FRONTENDS.
334. “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
335. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Questions?
336. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Other Techniques 🔥🔥
337. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SMOOTH NAVIGATION 2025 2026
338. SMOOTH NAVIGATION: CONTEXT
339. SMOOTH NAVIGATION: CONTEXT
340. SMOOTH NAVIGATION: CONTEXT ↝ SURVEY FATIGUE IS A WELL-DOCUMENTED PHENOMENON THAT LEADS TO ABANDONMENT AND INCOMPLETE RESPONSES. ↝ LONG SURVEYS CAN SEE COMPLETION RATES DROP DRAMATICALLY AS THE NUMBER OF QUESTIONS AND PAGES INCREASES.
341. #protip 📝 Actual Performance ≠ Perceived Performance
342. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
343. SMOOTH NAVIGATION: CONTEXT ACTUAL PERF ≠ PERCEIVED PERF
344. #insight 💡 What if we could make survey navigation feel less like page loads and more like a conversation?
345. SMOOTH NAVIGATION: OVERVIEW
346. SMOOTH NAVIGATION: OVERVIEW ↝ ANIMATE TRANSITIONS BETWEEN DOM STATES. ↝ WORKS ACROSS SPA AND MPA NAVIGATION. ↝ MAINTAINS USER CONTEXT DURING CHANGE. ↝ REDUCES PERCEIVED LATENCY.
347. SMOOTH NAVIGATION: OVERVIEW
348. SMOOTH NAVIGATION: IDEAS ↝ ANIMATE LIST → DETAIL NAVIGATION. ↝ SMOOTH DASHBOARD TAB SWITCHING. ↝ PRESERVE ELEMENT CONTINUITY BETWEEN ROUTES. ↝ REDUCE PERCEIVED LAYOUT SHIFT. ↝ MAKE MPAS FEEL LIKE NATIVE APPS.
349. SMOOTH SMOOTH NAVIGATION: NAVIGATION: CONTEXT MPA — CROSS-DOCUMENT VIEW TRANSITIONS FOR MULTI-PAGE APPLICATIONS • BRAMUS
350. Hunt esley ject L y b ro ed Creat he Noun P t m fro SMOOTH SMOOTH NAVIGATION: NAVIGATION: CONTEXT MPA — CROSS-DOCUMENT VIEW TRANSITIONS FOR MULTI-PAGE APPLICATIONS • BRAMUS
351. SMOOTH NAVIGATION: MPA DEMO
352. SMOOTH SMOOTHNAVIGATION: NAVIGATION:ECOSYSTEM CONTEXT
353. SMOOTH NAVIGATION: REACT
354. SMOOTH NAVIGATION: REACT ROUTER
355. SMOOTH NAVIGATION: NEXT.JS
356. SMOOTH NAVIGATION: ASTRO
357. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS ALI AS IN G R E ACT TO P REACT 2018 2024
358. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
359. PREACT: OVERVIEW 42.4KB (MIN+GZIP) 4KB (MIN+GZIP)
360. PREACT: OVERVIEW ↝ WAY SMALLER BUNDLE (APPROXIMATELY 3.5KB). ↝ FASTER VIRTUAL DOM IMPLEMENTATION. ↝ MORE EFFECTIVE MEMORY USAGE.
361. PREACT: SOURCE OF INSPIRATION
362. PREACT: SOURCE OF INSPIRATION
363. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Porting our app to Preact.
364. PREACT: RESULTS
365. PREACT: RESULTS
366. PREACT: CASE STUDY 205.9KB 175.26KB MIN + GZIP / NO POLYFILLS MIN + GZIP / NO POLYFILLS
367. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS W I N DOW ING 2018 2020 2023
368. WINDOWING: OVERVIEW — HOW DOES WINDOWING WORK? • BRIAN VAUGHN
369. WINDOWING: OVERVIEW — RENDERING LARGE LISTS WITH REACT-WINDOW • ADDY OSMANI
370. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Optimizing long lists with windowing.
371. WINDOWING: OPTIONS
372. WINDOWING: CASE STUDY
373. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS C O DE SP L I TTING 2018 2024
374. CODE SPLITTING: OVERVIEW — HTTPS://WWW.PATTERNS.DEV
375. CODE SPLITTING WITH REACT
376. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Code Splitting with lazy and Suspense.
377. CODE SPLITTING: CASE STUDY
378. CODE SPLITTING: CASE STUDY
379. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Code Splitting and Adaptive Loading.
380. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PRESERVE NAVIGATION
381. PRESERVE NAVIGATION: OVERVIEW ↝ RESTORE PAGES INSTANTLY ON BACK/FORWARD NAVIGATION. ↝ KEEP DOM + JAVASCRIPT HEAP ALIVE IN MEMORY. ↝ ELIMINATE RELOAD ENTIRELY. ↝ TURN NAVIGATION INTO RESTORATION.
382. PRESERVE NAVIGATION: OVERVIEW
383. PRESERVE NAVIGATION: MONITOR window.addEventListener('pageshow', (event) { if (event.persisted) { console.log('This page was restored from the bfcache.'); } else { console.log('This page was loaded normally.'); } > = });
384. PRESERVE NAVIGATION: MONITOR window.addEventListener('pagehide', (event) { if (event.persisted) { console.log('This page might be entering the bfcache.'); } else { console.log('This page will unload normally and be discarded.'); } > = });
385. PRESERVE NAVIGATION: MONITOR new PerformanceObserver(list { for (const entry of list.getEntries()) { console.log(entry.notRestoredReasons); } > = }).observe({ type: "navigation", buffered: true });
386. PRESERVE NAVIGATION: ACT
387. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS 30 minutes.
388. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS DATA- OR I ENT ED D ESIGN 2020 2025
390. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
391. DATA-ORIENTED DESIGN
392. 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.
393. 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.
394. 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.
395. BUT… MEMORY IS NOT AS FAST CPU MEMORY 4 NS ⇆ 0.5 NS ⇆ 100 NS ⇆ L2 CACHE L1 CACHE
396. BUT… MEMORY IS NOT AS FAST CPU MEMORY 200X 8X 1X L2 CACHE L1 CACHE
397. BUT… MEMORY IS NOT AS FAST
398. 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.
399. ⨯ AOS SOA ARRAY OF STRUCTURES type Entity = { STRUCTURE OF ARRAYS const positions = new Float32Array([0, 0, 10, 5 / position: { x: number; y: number }; const velocities = new Float32Array([1, 1, -1, 0 / velocity: { x: number; y: number }; const hitPoints = new Int16Array([100, 80 / hitPoints: number; }; const i = 0; 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 }, * * / * . . . / / console.log(velocities[i * 2], velocities[i * 2 + 1]); console.log(hitPoints[i]); ]; / console.log(positions[i * 2], positions[i * 2 + 1]);
400. ARRAY OF STRUCTURES type Entity = { position: { x: number; y: number }; velocity: { x: number; y: number }; }; const positions = new Float32Array([0, 0, 10, 5 / /]); const velocities = new Float32Array([1, 1, -1, 0 / /]); /]); Entity i = index in all arrays const i = 0; 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 }, console.log(positions[i * 2], positions[i * 2 + 1]); console.log(velocities[i * 2], velocities[i * 2 + 1]); console.log(hitPoints[i]); * * . / . . / . . . * * * . . . * ]; . STRUCTURE OF ARRAYS const hitPoints = new Int16Array([100, 80 / hitPoints: number; / / ⨯ AOS SOA x, y
401. ⨯ 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.
402. ⨯ 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.
403. ARRAY OF STRUCTURES POSITION X Y VELOCITY DX DY HP
404. 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
405. ARRAY OF STRUCTURES UNITS 0 ⇢ 2 HP HP HP HP HP HP HP UNITS 3 ⇢ 5 HP UNITS … ⇢ N HP
406. 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
407. 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
408. 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.
409. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Comparing two di erent memory layouts for the ff same data.
410. DATA-ORIENTED DESIGN: BENCHMARKS
411. DATA-ORIENTED DESIGN: BENCHMARKS
412. DATA-ORIENTED DESIGN: BENCHMARKS
413. DATA-ORIENTED DESIGN: BENCHMARKS
414. THRIVING WHEN AT SCALE…
415. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
416. THE GAMES WE PLAY…
417. THE GAMES WE PLAY…
418. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
419. AND IN BROWSER APPS WE BUILD!
420. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #experiment 🧪 Comparing two di erent memory layouts for the same data with ff @pmndrs/koota.
421. …AND MUCH MORE!
422. …AND MUCH MORE!
423. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Questions?
424. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Measuring 🔥🔥
425. REAL USER MONITORING ( RUM )
426. MEASURING TIMING PROFILING USER TIMING • EVENT TIMING • RESOURCE TIMING • LONG TASKS • LONG ANIMATION FRAMES • SELF SERVER TIMING • ELEMENT TIMING PROFILING • MEMORY USAGE SENSORS OTHERS NETWORK STATUS • BATTERY STATUS • COMPUTE VISIBILITY STATE • INTERSECTION OBSERVER • PRESSURE LAYOUT INSTABILITY • CUSTOM METRICS
427. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS PROFILING
428. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS LONG TASKS
429. LONG TASKS: OVERVIEW new PerformanceObserver((list) { for (const entry of list.getEntries()) { console.log("Blocked for:", entry.duration); entry.attribution?.forEach((source) { console.log("Source:", source.containerSrc); }); } > = > = }).observe({ type: "longtask", buffered: true });
430. LONG TASKS: IDEAS DETECT: ↝ HYDRATION BLOCKING THE MAIN THREAD. ↝ LARGE BUNDLE EXECUTION PAUSES. ↝ THIRD-PARTY IFRAME BLOCKING INPUT. ↝ EXPENSIVE LAYOUT RECALCULATIONS.
431. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS LONG ANIMATION FRAMES
432. LONG ANIMATION FRAMES: OVERVIEW new PerformanceObserver((list) console.log(list.getEntries()); }).observe({ type: "long-anim ation-frame", buffered: true > = }); {
433. LONG ANIMATION FRAMES: IDEAS DETECT: ↝ INP REGRESSIONS. ↝ RENDERING PIPELINE BOTTLENECKS. ↝ ANIMATION FRAME DROPS. ↝ SLOW CSS/LAYOUT RECALCULATIONS. ↝ SLOW COMPOSITING PHASES.
434. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SELF PROFILING
435. SELF PROFILING: OVERVIEW const profiler new Profiler({ sampleInterval: 10, maxBufferSize: 10000 }); await doWork(); const profile await profiler.stop(); = = console.log(profile.samples);
436. SELF PROFILING: IDEAS ↝ PROFILE REAL-WORLD HYDRATION BOTTLENECKS. ↝ PROFILE THIRD-PARTY SCRIPT EXECUTION TIME. ↝ DETECT HOT LOOPS IN DATA PROCESSING PIPELINES. ↝ DETECT REGRESSIONS AFTER FEATURE ROLLOUT.
437. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS MEMORY USAGE
438. MEMORY USAGE: OVERVIEW const result await performance.measureUserAgentSpecificMemory(); console.log("Total memory:", result.bytes); result.breakdown.forEach((entry) { console.log(entry.types, entry.bytes); > = = });
439. MEMORY USAGE: LEAKS #1 const obj { a: new Array(1000), b: new Array(2000) }; setInterval(() { console.log(obj.a); > = = }, 1000);
440. MEMORY USAGE: LEAKS #2 window.addEventListener("resize", () console.log(obj); > = }); {
441. MEMORY USAGE: LEAKS #3 document.body.removeChild(el); window.addEventListener("click", () console.log(el); > = }); {
442. MEMORY USAGE: LEAKS #4 const cache new Map(); function track(el) { cache.set(el, new Array(100000).fill("data")); = }
443. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
444. MEMORY USAGE: LEAKS ↝ FORGETTING TO UNREGISTER AN EVENT LISTENER. ↝ ACCIDENTALLY CAPTURING OBJECTS FROM AN IFRAME. ↝ NOT CLOSING A WORKER. ↝ ACCUMULATING OBJECTS IN ARRAYS. ↝ AND MUCH MORE!
445. MEMORY USAGE: IDEAS ↝ DETECT MEMORY LEAKS AFTER ROUTE TRANSITIONS. ↝ DETECT IFRAME MEMORY ISOLATION ISSUES. ↝ DETECT DOM NODE ACCUMULATION REGRESSIONS. ↝ MEASURE SPA CACHE GROWTH OVER TIME. ↝ COMPARE THE MEMORY COST OF FEATURE VARIANTS.
446. PROFILING ↝ MAIN-THREAD BLOCKING ↝ WHERE TIME GOES. ↝ FRAME PIPELINE BLOCKING ↝ WHERE FRAMES DROP. ↝ CPU HOTSPOT ATTRIBUTION ↝ WHAT CODE RUNS. ↝ MEMORY HOTSPOT ATTRIBUTION ↝ WHERE MEMORY GROWS.
447. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SENSORS
448. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS NETWORK STATUS
449. NETWORK STATUS: OVERVIEW API const networkInfo navigator.connection; navigator.connection.addEventListener('change', onConnectionChange); INFORMATION { effectiveType: "4g", rtt: 200, downlink: 1.65, saveData: false, = }
450. NETWORK STATUS: OVERVIEW API INFORMATION { effectiveType: "4g", rtt: 200, const networkInfo navigator.connection.addEventListener('change', onConnectionChange); downlink: 1.65, saveData: false, = }
451. NETWORK STATUS: IDEAS ↝ DISABLE ROUTE PREFETCHING ON SLOW CONNECTIONS. ↝ SKIP ANALYTICS UPLOADS WHEN RTT IS HIGH. ↝ LOAD LOWER-RESOLUTION ON CONSTRAINED BANDWIDTH. ↝ ADAPT TO SITUATIONS WHEN USERS ARE OFFLINE. ↝ RESPECT DATA SAVING AS A USER PERFORMANCE PREFERENCE SIGNAL.
452. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
453. NETWORK STATUS: IDEAS 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} />; }
454. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
455. NETWORK STATUS: IDEAS
456. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS BATTERY STATUS
457. BATTERY STATUS: OVERVIEW const batteryInfo await navigator.getBattery(); batteryInfo.addEventListener("chargingchange", listener); batteryInfo.addEventListener("chargingtimechange", listener); batteryInfo.addEventListener("dischargingtimechange", listener); = batteryInfo.addEventListener("levelchange", listener);
458. BATTERY STATUS: IDEAS ↝ DISABLE BACKGROUND POLLING ON LOW BATTERY. ↝ REDUCE ANIMATION FREQUENCY. ↝ STOP PREFETCHING BUNDLES. ↝ PERSIST UNSAVED DATA BEFORE SHUTDOWN RISK. ↝ SWITCH TO A STATIC MAP RATHER THAN AN INTERACTIVE ONE.
459. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS COMPUTE PRESSURE
460. COMPUTE PRESSURE: OVERVIEW const observer const state new PressureObserver(records { records[0].state; if (state === "critical") { reduceRenderingQuality(); } }); > = = = observer.observe("cpu", { sampleInterval: 2000 });
461. COMPUTE PRESSURE: IDEAS ↝ LOWER CANVAS RESOLUTION DYNAMICALLY. ↝ PAUSE BACKGROUND DATA PROCESSING PIPELINES. ↝ SWITCH FROM REAL-TIME UPDATES TO BATCHED ONES. ↝ DROP FRAME RATE IN WEBGL SCENES. ↝ REDUCE ANIMATION QUALITY WHEN CPU PRESSURE RISES.
462. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS OTHERS
463. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS React: Internals and Advanced Performance Patterns/ VISIBILITY STATE
464. PAGE VISIBILITY: OVERVIEW document.hidden; document.visibilityState; document.addEventListener("visibilitychange", () if (document.visibilityState===“hidden") { console.log("This window is hidden") } else { console.log("This window is visible") } > = }) {
465. PAGE VISIBILITY: IDEAS ↝ CANCEL POLLING LOOPS, TIMERS, AND BACKGROUND NETWORK REFRESHES WHEN THE TAB BECOMES HIDDEN. ↝ PAUSE VIDEO, AUDIO, AND ANIMATION LOOPS WHEN THE USER ISN’T ACTIVELY WATCHING THE PAGE. ↝ RESUME PROGRESSIVE DOWNLOADS OR DYNAMIC IMPORTS WHEN THE PAGE BECOMES VISIBLE AGAIN.
466. PAGE VISIBILITY: IDEAS ↝ STOP REFRESHING DASHBOARDS OR LIVE DATA FEEDS WHILE THE TAB IS BACKGROUNDED. ↝ SEND ANALYTICS RELIABLY AT SESSION END WHEN VISIBILITY BECOMES HIDDEN. ↝ SILENCE NOTIFICATIONS OR SOUNDS WHEN THE DEVICE SCREEN LOCKS OR THE TAB LOSES VISIBILITY.
467. INTERSECTION OBSERVER: OVERVIEW const onIntersection (entries) { for (const entry of entries) { if (entry.isIntersecting) { console.log(entry); } } }; const observer new IntersectionObserver(onIntersection); > = = = observer.observe(document.querySelector('#target'));
468. INTERSECTION OBSERVER: IDEAS ↝ INITIALIZE EXPENSIVE RENDERING PIPELINES (CHARTS, CANVAS, WEBGL) ONLY WHEN NEEDED. ↝ LAZY-LOAD IMAGES, IFRAMES, AND ROUTE BUNDLES WHEN THEY APPROACH THE VIEWPORT. ↝ DELAY LOADING THIRD-PARTY WIDGETS (MAPS, VIDEO EMBEDS, CHAT CLIENTS) UNTIL VISIBLE. ↝ CONTROL MEDIA PLAYBACK DEPENDING ON VISIBILITY.
469. INTERSECTION OBSERVER: IDEAS ↝ RENDER/HYDRATE COMPLEX UI COMPONENTS ONLY WHEN THEY BECOME RELEVANT. ↝ TRIGGER ANALYTICS EVENTS WHEN USERS ACTUALLY SEE IMPORTANT UI SECTIONS. ↝ MEASURE HOW LONG ELEMENTS REMAIN VISIBLE (E.G., AD IMPRESSIONS).
470. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS React: Internals and Advanced Performance Patterns/ LAYOUT INSTABILITY
471. LAYOUT INSTABILITY: OVERVIEW ↝ MANY WEBSITES HAVE DOM ELEMENTS SHIFTING AROUND DUE TO CONTENT LOADING ASYNCHRONOUSLY. ↝ MEASURE REAL CLS VALUES IN PRODUCTION. ↝ IDENTIFY THE EXACT DOM ELEMENTS RESPONSIBLE FOR LAYOUT INSTABILITY. ↝ IGNORE EXPECTED SHIFTS CAUSED BY USER INTERACTION.
472. LAYOUT INSTABILITY: OVERVIEW let cls 0; new PerformanceObserver((list) { for (const entry of list.getEntries()) { if (entry.hadRecentInput) continue; ignore expected shifts cls += entry.value; const culprit entry.sources?.[0]?.node; console.log("Shift:", entry.value); console.log("Element:", culprit); console.log("CLS so far:", cls); } / / > = = = }).observe({ type: "layout-shift", buffered: true });
473. LAYOUT INSTABILITY: IDEAS ↝ DETECT INSTABILITY INTRODUCED BY THIRD-PARTY EMBEDS OR PERSONALIZATION. ↝ DETECT IMAGES OR IFRAMES LOADING WITHOUT A RESERVED SPACE. ↝ DETECT LAYOUT SHIFTS CAUSED BY WEB-FONT SWAPS.
474. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
475. LAYOUT INSTABILITY: FINDING
476. LAYOUT INSTABILITY: FIXING
477. LAYOUT INSTABILITY: FIXING
478. CUSTOM METRICS
479. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
480. CUSTOM METRICS
481. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS U S E R FR U STR ATI ON
482. DIGITAL EXPERIENCE ANALYTICS
483. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Monitoring rage clicks.
484. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS M ONI TOR I N G T HIR D - PAR TIES
485. MONITORING THIRD-PARTIES
486. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
487. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Monitoring jQuery calls.
488. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Questions?
489. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS TIMING
490. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS React: Internals and Advanced Performance Patterns/ USER TIMING
491. USER TIMING: OVERVIEW performance.mark("checkout:start"); await submitCheckout(); performance.mark("checkout:end"); performance.measure( "checkout-duration", "checkout:start", "checkout:end" ); console.log( performance.getEntriesByName("checkout-duration")[0].duration );
492. USER TIMING: OVERVIEW
493. USER TIMING: IDEAS ↝ MEASURE ROUTE TRANSITIONS IN AN SPA. ↝ MEASURE API LATENCY (REQUEST → RENDER). ↝ MEASURE THE TIME BETWEEN USER INTENT AND UI CONFIRMATION. ↝ MEASURE HYDRATION FOR ISLANDS/COMPONENTS. ↝ TRACK TIME SPENT INSIDE SUSPENSE FALLBACKS.
494. USER TIMING: TOOLS — User Timing and custom metrics • Steve Souders
495. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS React: Internals and Advanced Performance Patterns/ EVENT TIMING
496. EVENT TIMING: OVERVIEW new PerformanceObserver(list { for (const entry of list.getEntries()) { console.log("Input delay:", entry.processingStart - entry.startTime); console.log("Handler time:", entry.processingEnd - entry.processingStart); console.log("Total latency:", entry.duration); } > = }).observe({ type: "event", buffered: true });
497. EVENT TIMING: IDEAS ↝ MEASURE DROPDOWN RESPONSIVENESS. ↝ MEASURE DRAG-AND-DROP LATENCY. ↝ DETECT SLOW SLIDER INTERACTIONS. ↝ DETECT INPUT LAG IN FORMS. ↝ TRACK RESPONSIVENESS REGRESSIONS AFTER RELEASES.
498. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS RESOURCE TIMING
499. RESOURCE TIMING: OVERVIEW new PerformanceObserver(list { for (const entry of list.getEntries()) { console.log(entry.name); console.log("TTFB:", entry.responseStart - entry.requestStart); console.log("Download:", entry.responseEnd - entry.responseStart); console.log("Cache Hit:" entry.transferSize === 0); } > = }).observe({ type: "resource", buffered: true });
500. RESOURCE TIMING: IDEAS ↝ MEASURE THIRD-PARTY SCRIPTS COST. ↝ MEASURE API ENDPOINT LATENCY. ↝ DETECT SLOW FONT LOADING. ↝ DETECT CACHE MISSES VS CACHE HITS. ↝ DETECT CDN CONFIGURATION ISSUES.
501. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS SERVER TIMING
502. SERVER TIMING: OVERVIEW SERVER Server-Timing: database;dur=123;desc="Database", templating;dur=56;desc="Template processing" CLIENT const nav performance.getEntriesByType("navigation")[0]; = console.log(nav.serverTiming);
503. SERVER TIMING: OVERVIEW
504. SERVER TIMING: TOOLS
505. SERVER TIMING: IDEAS ↝ MEASURE DB LATENCY IN THE BROWSER. ↝ DETECT A SLOW AUTH MIDDLEWARE. ↝ DEBUG EDGE-CACHE EFFECTIVENESS. ↝ DETECT TEMPLATE RENDERING BOTTLENECKS.
506. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS ELEMENT TIMING
507. ELEMENT TIMING: OVERVIEW ↝ 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.
508. ELEMENT TIMING: OVERVIEW <img src="/hero.jpg" elementtiming="hero" /> <script> new PerformanceObserver(list const entry { list.getEntries()[0]; console.log("Hero render:", entry.startTime); }).observe({ type: "element", buffered: true }); > = = </script>
509. ELEMENT TIMING: IDEAS ↝ MEASURE HERO IMAGE RENDER TIMING. ↝ MEASURE ABOVE-THE-FOLD READINESS. ↝ TRACK MARKETING CTA VISIBILITY TIMING. ↝ MEASURE WHEN SKELETON LOADERS DISAPPEAR. ↝ REPLACE SYNTHETIC LCP TRACKING WITH PRODUCTSPECIFIC METRICS.
510. #protip 💡 Existing RUM and DXA tools are great—until scale, cost, or product-speci c questions force you to measure fi things yourself.
511. COST SCALES WITH TRAFFIC VOLUME
512. PRODUCT-SPECIFIC QUESTIONS
513. PRODUCT-SPECIFIC QUESTIONS TIME UNTIL THE… ↝ SCROLL EFFECTS WORK. ↝ APP RESPONDS TO CLICKS. ↝ MOST MEANINGFUL VIDEOS/ANIMATIONS RUN. ↝ PRIMARY FEATURE SHOWS UP/IS INTERACTIVE. ↝ COOKIE BANNER SHOWS UP.
514. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Questions?
515. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Closing Notes
516. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #1 Software development continually goes through cycles.
517. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
518. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
519. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
521. 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!
522. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #3 React tries to address the lack of some JavaScript/Web Platform resources.
523. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Understanding these #4 internals and their rationales helps us implement our own abstractions.
524. OUR OWN ABSTRACTIONS… ↝ INTERNAL SUSPENSE-READY SOLUTIONS. ↝ GENERATOR-BASED SCHEDULER. ↝ CUSTOM MEMORY MANAGEMENT. ↝ CUSTOM METRICS (E.G. DXA, JQUERY TRACKING). ↝ STATIC-ANALYSIS-ENABLED WORKFLOWS.
525. OUR OWN ABSTRACTIONS: RENDERERS
526. OUR OWN ABSTRACTIONS: AGENTS
527. OUR OWN ABSTRACTIONS: COMPILERS
528. OUR OWN ABSTRACTIONS: COMPILERS
529. BUT BEWARE!
530. BUT BEWARE!
531. BUT BEWARE!
532. 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.
533. 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.
534. 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?
535. 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
536. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #8 There's no silver bullet. Identify your core metrics.
537. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS Always try to correlate #9 behavior analysis with contextual metrics and business outcomes to tell the full story.
538. BUSINESS OUTCOMES… — AKAMAI AND CHROME RESEARCH • 2017
539. LCP ⇆ RETENTION RATE — CORE WEB VITALS AND THEIR EFFECT ON USER EXPERIENCE • PHILIP TELLIS, 2025
540. CLS ⇆ RELOAD RATE — CORE WEB VITALS AND THEIR EFFECT ON USER EXPERIENCE • PHILIP TELLIS, 2025
541. INP ⇆ RAGE CLICK RATE — CORE WEB VITALS AND THEIR EFFECT ON USER EXPERIENCE • PHILIP TELLIS, 2025
542. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS
543. BUSINESS OUTCOMES…
544. BUSINESS OUTCOMES…
545. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #10 Don't take fast networks, CPUs and RAM for granted.
546. HARDWARE CONSTRAINTS…
547. HARDWARE CONSTRAINTS…
548. HARDWARE CONSTRAINTS…
549. REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS #10 Test on real phones and networks.
550. 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.
551. MORE THAN “JUST” BUSINESS!
552. MORE THAN “JUST” BUSINESS!
553. THAT’S ALL, FOLKS! DANKE! 👋 🇨🇭 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator