🇮🇳 React India 2022

Slide 1

Slide 1 text

Hello, React India 🙋 🇮🇳 🌏 DEEP DIVING ON CONCURRENT REACT • THE 23RD OF SEPTEMBER, 2022.

Slide 2

Slide 2 text

DEEP DIVING ON CONCURRENT REACT MATHEUS ALBUQUERQUE

Slide 3

Slide 3 text

Å I’M MATHEUS 🙋 ↝ @YTHECOMBINATOR ON THE WEB ↝ SR. SOFTWARE ENGINEER @MEDALLIA ↝ MENTOR @TECHLABS

Slide 4

Slide 4 text

Disclaimers DEEP DIVING ON CONCURRENT REACT

Slide 5

Slide 5 text

#1 REACT SOURCE CODE IS CONSTANTLY CHANGING, AND SOME THOUGHTS ARE SPECULATIVE DEEP DIVING ON CONCURRENT REACT

Slide 6

Slide 6 text

#2 🤯 = FURTHER DISCUSSIONS AFTER THE SESSION DEEP DIVING ON CONCURRENT REACT

Slide 7

Slide 7 text

Prologue DEEP DIVING ON CONCURRENT REACT

Slide 8

Slide 8 text

DEEP DIVING ON CONCURRENT REACT

Slide 9

Slide 9 text

WE TALKED ABOUT… ↝ FIBERS ↝ COROUTINES ↝ GENERATORS ↝ ALGEBRAIC EFFECTS

Slide 10

Slide 10 text

WE TALKED ABOUT… ↝ VIRTUAL DOM ↝ CONCURRENCY/PARALLELISM ↝ CONCURRENT REACT ↝ MEASUREMENT

Slide 11

Slide 11 text

DATA-DRIVEN UI LIBS DOM RECONCILIATION E.G. ANGULAR, POLYMER, LIT-HTML VIRTUAL DOM E.G. REACT, VUE, INFERNO REACTIVE E.G. KNOCKOUT, SVELTE, SOLID

Slide 12

Slide 12 text

DOM RECONCILIATION E.G. ANGULAR, POLYMER, LIT-HTML VIRTUAL DOM E.G. REACT, VUE, INFERNO REACTIVE E.G. KNOCKOUT, SVELTE, SOLID DATA-DRIVEN UI LIBS

Slide 13

Slide 13 text

DEEP DIVING ON CONCURRENT REACT

Slide 14

Slide 14 text

#QUOTE 💬 “[…] With React you can build applications without even thinking about performance and the default state is fast.” — Rethinking Best Practices by Pete Hunt, 2013

Slide 15

Slide 15 text

↝ GENERATE A VIRTUAL TREE AND THEN DIFF AGAINST THE PREVIOUS ITERATION ↝ PATCH THE DOM UPDATES ↝ USE IMMUTABILITY AND REFERENTIAL EQUALITY TO OPTIMIZE THE PROCESS WHICH RESULTS IN SIGNIFICANT CLONING AND MEMORY ALLOCATION VIRTUAL DOM

Slide 16

Slide 16 text

↝ shouldComponentUpdate, React.PureComponent ↝ React.memo ↝ useMemo, useCallback ↝ useTransition, useDeferredValue, React.Suspense & others PERF MITIGATORS

Slide 17

Slide 17 text

#PROTIP 💡 React doesn’t have any understanding of the values running through your app. It’s not reactive.

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

VIRTUAL DOM ↝ IT HAS BEEN OPTIMIZED WELL ENOUGH IN MOST SCENARIOS ↝ WE DON’T COMPLAIN ABOUT PERF IN INFERNO OR BUNDLE SIZE IN PREACT ↝ THERE ARE LIBRARIES THAT CAN PRODUCE EQUIVALENT/SMALLER BUNDLES (E.G. HyperApp)

Slide 21

Slide 21 text

VIRTUAL DOM ↝ IT'S JUST ONE OF THE APPROACHES WE HAVE AND IT'S NEVER A TRUE/FALSE QUESTION ↝ UNDERSTANDING ITS KEY TAKEAWAYS HELPS US UNDERSTAND WHERE CONCURRENT REACT FITS

Slide 22

Slide 22 text

#QUESTION 🤔 Why do we even bother discussing Concurrent React?

Slide 23

Slide 23 text

PERFOMANCE

Slide 24

Slide 24 text

PERFOMANCE PERCEIVED LOAD SPEED HOW QUICKLY A PAGE CAN LOAD AND RENDER ALL OF ITS VISUAL ELEMENTS TO THE SCREEN SMOOTHNESS DO TRANSITIONS & ANIMATIONS RENDER AT A CONSISTENT FRAME RATE AND FLOW FLUIDLY? LOAD RESPONSIVENESS HOW QUICKLY A PAGE CAN LOAD/RUN ANY REQUIRED JS IN ORDER FOR COMPONENTS TO RESPOND TO USER INTERACTION RUNTIME RESPONSIVENESS AFTER THE PAGE LOAD, HOW QUICKLY CAN THE PAGE RESPOND TO USER INTERACTION?

Slide 25

Slide 25 text

PERFOMANCE PERCEIVED LOAD SPEED HOW QUICKLY A PAGE CAN LOAD AND RENDER ALL OF ITS VISUAL ELEMENTS TO THE SCREEN LOAD RESPONSIVENESS HOW QUICKLY A PAGE CAN LOAD/RUN ANY REQUIRED JS IN ORDER FOR COMPONENTS TO RESPOND TO USER INTERACTION RUNTIME RESPONSIVENESS AFTER THE PAGE LOAD, HOW QUICKLY CAN THE PAGE RESPOND TO USER INTERACTION? SMOOTHNESS DO TRANSITIONS & ANIMATIONS RENDER AT A CONSISTENT FRAME RATE AND FLOW FLUIDLY?

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

LONG TASKS

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

PHONE USERS EXPERIENCE SLOW FIRST INPUT DELAY ON 7X MORE WEBSITES. — Web Almanac By HTTP Archive, 2021

Slide 30

Slide 30 text

DESKTOP PHONE 0 25 50 75 100 SLOW ( > = 250MS) AVERAGE FAST (<50 MS) FIRST INPUT DELAY

Slide 31

Slide 31 text

BUSINESS OUTCOMES ↝ LONG TASKS DELAYED TTI ↝ AS FIRST-PAGE LONG TASK TIME INCREASED, OVERALL CONVERSION RATES DECREASED ↝ MOBILE HAD UP TO ˜12X LONGER LONG TASKS ↝ OLDER DEVICES COULD BE SPENDING HALF OF THEIR LOAD-TIME ON LONG TASKS — AKAMAI AND CHROME RESEARCH, 2017

Slide 32

Slide 32 text

— AKAMAI AND CHROME RESEARCH, 2017 BUSINESS OUTCOMES

Slide 33

Slide 33 text

#ANSWER 💡 That’s why we do bother discussing Concurrent React!

Slide 34

Slide 34 text

#QUESTION 🤔 If you were to summarize Concurrent React in one word/expression, what’d be your pick?

Slide 35

Slide 35 text

#QUESTION 🤔 If you were to summarize Concurrent React in one word/expression, what’d be your pick? e.g. fibers ↝ units of work Concurrent React ↝ ???

Slide 36

Slide 36 text

DEEP DIVING ON CONCURRENT REACT If you were to summarize Concurrent React in one word/expression, what’d be your pick?

Slide 37

Slide 37 text

DEEP DIVING ON CONCURRENT REACT If you were to summarize Concurrent React in one word/expression, what’d be your pick? 1st/2nd/3rd ANSWERS ↝ REACT BRUSSELS DISCOUNT CODE 🇧🇪 OTHERS ↝ STICKERS 💅

Slide 38

Slide 38 text

The Main Thread DEEP DIVING ON CONCURRENT REACT

Slide 39

Slide 39 text

TASKS JAVASCRIPT STYLES LAYOUT PAINT COMPOSITE A UNIT OF WORK THAT THE BROWSER DOES TO RENDER A FRAME

Slide 40

Slide 40 text

TASKS JAVASCRIPT STYLES LAYOUT PAINT COMPOSITE

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

#QUESTION 🤔 How to avoid blocking the main thread?

Slide 43

Slide 43 text

PARALLELISM ↝ MULTIPLE THREADS = MULTIPLE TASKS AT THE SAME TIME ON SEPARATE CPU CORES CONCURRENCY ↝ SINGLE THREAD + QUICKLY SWITCHING BETWEEN TASKS SCHEDULING ↝ CONCURRENCY + TASK PRIORITIZATION TASK RUNNING STRATEGIES

Slide 44

Slide 44 text

TASK RUNNING STRATEGIES A B C D

Slide 45

Slide 45 text

TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING

Slide 46

Slide 46 text

TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING

Slide 47

Slide 47 text

WORKERS ↝ VERY DIFFERENT FROM THE THREADS IN C++, JAVA, ETC. ↝ NO ACCESS TO ANY VARIABLES/CODE FROM THE PAGE THAT CREATED THEM OR VICE VERSA ↝ DATA EXCHANGE IS THROUGH MESSAGE-PASSING

Slide 48

Slide 48 text

WORKERS ↝ NO ACCESS TO THE DOM, MAKING UI UPDATES FROM A WORKER BARELY IMPOSSIBLE ↝ APPS THAT INTEND TO USE THEM HAVE TO ADAPT THEIR ARCHITECTURE TO ACCOMMODATE THESE REQUIREMENTS ↝ TWO MODELS: ACTORS & SHARED MEMORY 🤯

Slide 49

Slide 49 text

ACTORS ↝ EACH ACTOR MAY OR MAY NOT RUN ON A SEPARATE THREAD ↝ EACH ACTOR FULLY OWNS THE DATA IT IS OPERATING ON ↝ ACTORS CAN ONLY SEND/REACT TO MESSAGES ↝ MAIN THREAD = ACTOR THAT OWNS THE DOM/UI 🤯

Slide 50

Slide 50 text

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 🤯

Slide 51

Slide 51 text

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 🤯

Slide 52

Slide 52 text

SHARED MEMORY ↝ MOST OF THE APIS ARE BUILT NO CONCURRENT ACCESS TO OBJECTS IN MIND ↝ YOU BUILD YOUR OWN MUTEXES AND OTHER CONCURRENT DATA STRUCTURES ↝ NO DIRECT WAY OF WORKING ON FAMILIAR OBJECTS/ARRAYS; JUST A SERIES OF BYTES 🤯

Slide 53

Slide 53 text

WEB ASSEMBLY ↝ WORKERS + SharedArrayBuffers TO SUPPORT THE THREADING MODEL OF C++ AND OTHERS ↝ BEST EXPERIENCE FOR SHARED-MEMORY MODEL ↝ FASTER THAN JS WHEN YOU STAY WITHIN WASM, BUT THE MORE YOU HAVE TO CROSS OVER TO JS APIS THE SLOWER IT IS

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

↝ Atomics ↝ BuffferBackedObject ↝ Comlink ↝ WorkerDOM

Slide 56

Slide 56 text

WORKERS ↝ GOOD FOR DATA PROCESSING AND CRUNCHING NUMBERS ↝ HARD TO USE FOR UI-RELATED STUFF ↝ HARDER THAN ADJUSTING IT FOR A SCHEDULER

Slide 57

Slide 57 text

TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING

Slide 58

Slide 58 text

#QUESTION 🤔 If you were to summarize Concurrent React in one word/expression, what’d be your pick?

Slide 59

Slide 59 text

DEEP DIVING ON CONCURRENT REACT If you were to summarize Concurrent React in one word/expression, what’d be your pick?

Slide 60

Slide 60 text

Scheduling in React DEEP DIVING ON CONCURRENT REACT

Slide 61

Slide 61 text

{result}

; }

Slide 62

Slide 62 text

DEEP DIVING ON CONCURRENT REACT

Slide 63

Slide 63 text

#QUESTION 🤔 How could we improve that?

Slide 64

Slide 64 text

DEEP DIVING ON CONCURRENT REACT

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

{result}

; }

Slide 67

Slide 67 text

function* resourcefulOperation(value: number) { let newValue = String(value); while (true) { yield; for (let i = 0; i < 1000000; i++) { newValue = `${value} + ${i} = ${value + i}`; } return newValue; } } const initialValue = 0; const scheduler = new Scheduler(resourcefulOperation, initialValue); function ResourcefulComponent(props: { value: number }) { const { value } = props; const result = scheduler.performUnitOfWork(value); return

{result}

; }

Slide 68

Slide 68 text

{result}

; } PROMOTED TO A GENERATOR YIELDING EXECUTION DOING CONCURRENT TASKS

Slide 69

Slide 69 text

DEEP DIVING ON CONCURRENT REACT

Slide 70

Slide 70 text

enum SchedulerState { IDLE = "IDLE", PENDING = "PENDING", DONE = "DONE", } class Scheduler { state: SchedulerState; result: T; worker: (data: T) = > Generator; iterator: Generator; constructor(worker: (data: T) = > Generator, initialResult: T) { this.state = SchedulerState.IDLE; this.worker = worker; this.result = initialResult; } performUnitOfWork(data: T) { switch (this.state) { case "IDLE": this.state = SchedulerState.PENDING; this.iterator = this.worker(data); throw Promise.resolve(); case "PENDING": const { value, done } = this.iterator.next(); if (done) { this.result = value; this.state = SchedulerState.DONE; return value; } throw Promise.resolve(); case "DONE": this.state = SchedulerState.IDLE; return this.result; } } }

Slide 71

Slide 71 text

performUnitOfWork(data: T) { switch (this.state) { case "IDLE": this.state = SchedulerState.PENDING; this.iterator = this.worker(data); throw Promise.resolve(); case "PENDING": const { value, done } = this.iterator.next(); if (done) { this.result = value; this.state = SchedulerState.DONE; return value; } throw Promise.resolve(); case "DONE": this.state = SchedulerState.IDLE; return this.result; } }

Slide 72

Slide 72 text

DID WE JUST useTransition’ED? 🤔

Slide 73

Slide 73 text

{result}

; }

Slide 74

Slide 74 text

{result}

; }

Slide 75

Slide 75 text

YES, WE DID 🤓 WITH OUR OWN SCHEDULER

Slide 76

Slide 76 text

↝ 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 SCHEDULING

Slide 77

Slide 77 text

↓ ORIGINAL RENDER TASK USER INPUT → ↑ HIGHER PRIORITY RENDER TASK ↓ RESUME ORIGINAL RENDER TASK

Slide 78

Slide 78 text

↝ 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 SCHEDULING

Slide 79

Slide 79 text

PRIORITY LEVELS

Slide 80

Slide 80 text

PRIORITY LEVELS

Slide 81

Slide 81 text

PRIORITY TIMEOUT WHEN I m m ediate SYNCHRONOUSLY TASKS THAT NEED TO RUN SYNCHRONOUSLY UserBlocking 250MS RESULTS OF A USER INTERACTION (E.G. A BUTTON CLICK) Normal 5S UPDATES THAT DON’T HAVE TO FEEL INSTANTANEOUS Low 10S TASKS THAT CAN BE DEFERRED BUT MUST STILL COMPLETE EVENTUALLY (E.G. AN ANALYTICS NOTIFICATION) Idle NO TIMEOUT TASKS THAT DO NOT HAVE TO RUN AT ALL (E.G. HIDDEN OFFSCREEN CONTENT)

Slide 82

Slide 82 text

↝ 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. RENDER LANES 🤯

Slide 83

Slide 83 text

↝ 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 RENDER LANES 🤯

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

DEEP DIVING ON CONCURRENT REACT

Slide 86

Slide 86 text

#QUESTION 🤔 How do we benefit from these in our everyday projects?

Slide 87

Slide 87 text

Scheduling in React [for the rest of us] DEEP DIVING ON CONCURRENT REACT

Slide 88

Slide 88 text

#1 HANDLING LARGE SETS OF DATA DEEP DIVING ON CONCURRENT REACT

Slide 89

Slide 89 text

😔 NON-PRACTICAL… ↝ FINDING PRIMES ↝ CRACKING PASSWORDS ↝ SIERPINSKI TRIANGLE

Slide 90

Slide 90 text

😔 NON-PRACTICAL… ↝ RENDERING MANY DATA-POINTS ↝ RENDERING ON A ↝ PROCESSING DATA

Slide 91

Slide 91 text

DAILY VISITORS (BEFORE)

Slide 92

Slide 92 text

DAILY VISITORS (BEFORE) const DailyVisitors = () = > { const [data, setData] = useState(initialData); useEffect(() = > { setData(initialData); }, []); const onChange = (newData) = > { setData(newData); }; return ( ); }; export default DailyVisitors;

Slide 93

Slide 93 text

DAILY VISITORS (AFTER) const DailyVisitors = () = > { const [data, setData] = useState(initialData); const [, startTransition] = useTransition(); useEffect(() = > { setData(initialData); }, []); const onChange = (newData) = > { startTransition(() = > { setData(newData); }); }; return ( ); }; export default DailyVisitors;

Slide 94

Slide 94 text

DAILY VISITORS (AFTER)

Slide 95

Slide 95 text

↝ ˜100K + POINTS PLOTTED ↝ SUPPORT FOR SEARCHING AND FILTERING ↝ USED WORKERS + REDUX-SAGA UTILITIES + DEBOUNCING ↝ COULD'VE USED TRANSITIONS CASE #1: MAPS

Slide 96

Slide 96 text

CASE #2: GAME ADMIN ↝ THOUSANDS OF REAL-TIME PLAYERS MESSAGING ↝ SUPPORT FOR SEARCHING AND FILTERING ↝ USED VIRTUALIZATION AND MEMOIZATION ↝ COULD'VE USED TRANSITIONS

Slide 97

Slide 97 text

#2 TACKLING WASTED RENDERS DEEP DIVING ON CONCURRENT REACT

Slide 98

Slide 98 text

useSyncExternalStore() function useSyncExternalStore( subscribe: (onStoreChange: () = > void) = > () = > void, getSnapshot: () = > Snapshot, getServerSnapshot?: () = > Snapshot ): Snapshot;

Slide 99

Slide 99 text

DEEP DIVING ON CONCURRENT REACT

Slide 100

Slide 100 text

DEEP DIVING ON CONCURRENT REACT

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

#QUESTION 🤔 How do we benefit from these in our everyday projects?

Slide 104

Slide 104 text

useLocation() function Pathname() { const { pathname } = useLocation(); return ; } function Hash() { const { hash } = useLocation(); return ; }

Slide 105

Slide 105 text

useLocation() function Pathname() { const { pathname } = useLocation(); return ; } function Hash() { const { hash } = useLocation(); return ; } OVER-RETURNING HOOK

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

useHistory() + useSyncExternalStore() function useHistorySelector(selector) { const history = useHistory(); return useSyncExternalStore(history.listen, () = > selector(history)); } function Pathname() { const pathname = useHistorySelector((history) = > history.location.pathname); return ; } function Hash() { const hash = useHistorySelector((history) = > history.location.hash); return ; }

Slide 108

Slide 108 text

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

#3 HYDRATION IMPROVEMENTS DEEP DIVING ON CONCURRENT REACT

Slide 111

Slide 111 text

↝ 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 HYDRATION

Slide 112

Slide 112 text

SELECTIVE HYDRATION }>

Slide 113

Slide 113 text

↝ REACT WON'T WAIT FOR THAT COMPONENT 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 SELECTIVE HYDRATION

Slide 114

Slide 114 text

↝ 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 ↝ RESULTS IN LOWER FID AND INP SELECTIVE HYDRATION

Slide 115

Slide 115 text

DEEP DIVING ON CONCURRENT REACT

Slide 116

Slide 116 text

#4 PROFILER ENHANCEMENTS DEEP DIVING ON CONCURRENT REACT

Slide 117

Slide 117 text

TRANSITIONS — INTRODUCING A NEW REACT PROFILER, BY BRIAN VAUGHN

Slide 118

Slide 118 text

— INTRODUCING A NEW REACT PROFILER, BY BRIAN VAUGHN BLOCKED RENDER

Slide 119

Slide 119 text

— INTRODUCING A NEW REACT PROFILER, BY BRIAN VAUGHN WARNS

Slide 120

Slide 120 text

Scheduling on the Web DEEP DIVING ON CONCURRENT REACT

Slide 121

Slide 121 text

WE HAVE A FEW SCHEDULING PRIMITIVES: ↝ setTimeout ↝ requestAnimationFrame ↝ requestIdleCallback ↝ postMessage SCHEDULING ON THE WEB

Slide 122

Slide 122 text

↝ EVERYONE SHOULD USE THE SAME SCHEDULER ↝ HAVING MORE THAN ONE SCHEDULER CAUSES RESOURCE FIGHTING ↝ INTERLEAVING TASKS WITH BROWSER WORK (RENDERING, GARBAGE COLLECTION) SCHEDULING ON THE WEB

Slide 123

Slide 123 text

#RANT 😡 We need better and uniform scheduling primitives for the web!

Slide 124

Slide 124 text

DEEP DIVING ON CONCURRENT REACT

Slide 125

Slide 125 text

SCHEDULING API ↝ A MORE ROBUST SOLUTION FOR SCHEDULING TASKS ↝ INTEGRATED DIRECTLY INTO THE EVENT LOOP ↝ CONTROL AND SCHEDULE PRIORITIZED TASKS IN A UNITED AND FLEXIBLE WAY ↝ ALIGNED WITH THE WORK OF THE REACT TEAM AND IN COOPERATION WITH GOOGLE, W3C AND OTHERS

Slide 126

Slide 126 text

DEEP DIVING ON CONCURRENT REACT

Slide 127

Slide 127 text

scheduler.postTask() SCHEDULE AND CONTROL PRIORITIZING TASKS. scheduler.wait() YIELD AND RESUME AFTER SOME AMOUNT OF TIME OR PERHAPS AFTER AN EVENT HAS OCCURRED. scheduler.yield() BREAK UP LONG TASKS BY YIELDING TO THE BROWSER AND CONTINUING AFTER BEING RESCHEDULED. isInputPending() DETERMINE IF THE CURRENT TASK IS BLOCKING INPUT EVENTS. SCHEDULING API

Slide 128

Slide 128 text

scheduler.postTask() scheduler.postTask(() = > { console.log('React Brussels'); }, { delay: 10 }); scheduler.postTask(() = > { console.log('React India'); }); scheduler.postTask(() = > { console.log('React Alicante'); }); / / 'React India' 'React Alicante' 'React Brussels'

Slide 129

Slide 129 text

scheduler.postTask() const controller = new TaskController({ priority: "user-blocking" }); const signal = controller.signal; console.log(signal.priority); / / 'user-blocking' console.log(signal.aborted); / / 'false' scheduler.postTask(doWork, { signal }); controller.setPriority("background"); controller.abort();

Slide 130

Slide 130 text

isInputPending() while (workQueue.length > 0) { if (navigator.scheduling.isInputPending()) { / / Stop doing work to handle any input event break; } let job = workQueue.shift(); job.execute(); }

Slide 131

Slide 131 text

scheduler.yield() async function doWork() { while (true) { let hasMoreWork = doSomeWork(); if (!hasMoreWork) { return; } if (!navigator.scheduling.isInputPending()) { continue; } await scheduler.yield(); } } 🤯

Slide 132

Slide 132 text

SCHEDULING API

Slide 133

Slide 133 text

↝ SCHEDULING IS AN ALTERNATIVE FOR RESPONSIVE USER INTERFACES ↝ A WEB STANDARDS PROPOSAL THAT BRINGS A UA SCHEDULER TO THE BROWSER IS BEING COOKED ↝ WE CAN SOLVE A LOT AT THE FRAMEWORK LEVEL WITH CONCURRENT REACT AND ITS SCHEDULER SCHEDULING (RECAP)

Slide 134

Slide 134 text

#NOSILVERBULLET 🔫 Code that yields too often can cause the overhead of scheduling tasks to become a negative influence on your app’s overall performance.

Slide 135

Slide 135 text

↝ DETECTION AND SCHEDULING HAVE AN OVERHEAD ↝ NO CORRECT CHUNK SIZE THAT FITS ALL DEVICES ↝ PARTIALLY COMPLETE INTERFACES CAN INCREASE THE TOTAL COST OF LAYOUT AND PAINT ↝ HARD TO FIND THE RIGHT SPOT BETWEEN PERF AND AMOUNT OF BLOCKING SCHEDULING (BAD PARTS) 🤯

Slide 136

Slide 136 text

Measure DEEP DIVING ON CONCURRENT REACT

Slide 137

Slide 137 text

MEASURE IN THE LAB

Slide 138

Slide 138 text

MEASURE IN THE FIELD

Slide 139

Slide 139 text

#PROTIP 💡 Start with observability services or libraries like web-vitals. Then create your own abstractions on top of the web + React (e.g. custom hooks).

Slide 140

Slide 140 text

TIMING USER TIMING ALLOWS YOU TO MARK POINTS IN TIME AND THEN MEASURE THE DURATION BETWEEN THOSE MARKS. EVENT TIMING EVENT PROCESSING TIME + TIME UNTIL THE NEXT FRAME CAN BE RENDERED. THE BASIS FOR THE FID METRIC. ELEMENT TIMING MEASURE THE RENDER TIME OF SPECIFIC ELEMENTS. THE BASIS FOR THE LCP METRIC.

Slide 141

Slide 141 text

PROFILING LONG TASKS API REPORTS TASKS THAT TAKES LONGER THAN 50 MS AND IT'S THE BASIS FOR TTI AND TBT METRICS JS SELF-PROFILING API PROFILE SPECIFIC COMPLEX OPERATIONS AND IDENTIFY HOT SPOTS USING A SAMPLING PROFILER UserAgentSpecificMemory DETECT MEMORY LEAKS IN APPS THAT HANDLE A HUGE VOLUME OF DATA

Slide 142

Slide 142 text

{ name: "same-origin-descendant", entryType: "longtask", startTime: 1023.40999995591, duration: 187.19000002602115, attribution: [ { name: "unknown", entryType: "taskattribution", startTime: 0, duration: 0, containerType: "iframe", containerSrc: "child.html", containerId: "", containerName: "child1" } ] } { bytes: 1000000, breakdown: [ { bytes: 1000000, attribution: [ { url: "https://example.com", scope: "Window", }, ], types: ["JS", "DOM"], }, { bytes: 0, attribution: [], types: [], }, ], } { "frames": [ { "name": "Profiler" }, { "column": 0, "line": 100, "name": "", "resourceId": 0 }, { "name": "set innerHTML" }, { "column": 10, "line": 10, "name": "A", "resourceId": 1 } { "column": 20, "line": 20, "name": "B", "resourceId": 1 } ], "resources": [ "https://example.com/page", "https://example.com/app.js", ], "samples": [ { "stackId": 0, "timestamp": 161.99500000476837 }, { "stackId": 2, "timestamp": 182.43499994277954 }, { "timestamp": 197.43499994277954 }, { "timestamp": 213.32999992370605 }, { "stackId": 3, "timestamp": 228.59999990463257 }, ], "stacks": [ { "frameId": 0 }, { "frameId": 2 }, { "frameId": 3 }, { "frameId": 4, "parentId": 2 } ] } LONG TASKS SELF-PROFILING USERAGENT MEMORY 🤯

Slide 143

Slide 143 text

The Future DEEP DIVING ON CONCURRENT REACT

Slide 144

Slide 144 text

↝ I/O LIBRARIES LIKE react-fetch ↝ BUILT-IN FOR DATA FETCHING LIBRARIES TO INTEGRATE WITH ↝ FOR CPU-BOUND TREES TO IMMEDIATELY FALLBACK WITHOUT EVEN TRYING TO RENDER THE FUTURE 🤯

Slide 145

Slide 145 text

↝ useInsertionEffect FOR STYLESHEET LIBRARIES ↝ THE COMPONENT ↝ SERVER COMPONENTS ↝ NATIVE SCHEDULING PRIMITIVES ON THE BROWSER ↝ AND MUCH MORE! THE FUTURE 🤯

Slide 146

Slide 146 text

Closing Notes DEEP DIVING ON CONCURRENT REACT

Slide 147

Slide 147 text

#1 DEEP DIVING ON CONCURRENT REACT REACT HAS BEEN PUSHING WEB APIS TO THE FUTURE E.G. THE SCHEDULER API AND DISCUSSIONS AROUND EFFECT HANDLERS

Slide 148

Slide 148 text

#2 DEEP DIVING ON CONCURRENT REACT REACT TRIES TO ADDRESS THE LACK OF SOME JS/WEB PLATFORM RESOURCES E.G. EFFECT HANDLERS, CONTINUATIONS & THE SCHEDULER API

Slide 149

Slide 149 text

#3 DEEP DIVING ON CONCURRENT REACT UNDERSTANDING THESE INTERNALS AND THEIR RATIONALES HELPS US IMPLEMENT OUR OWN ABSTRACTIONS E.G. THE GENERATOR-BASED SCHEDULER

Slide 150

Slide 150 text

#4 DEEP DIVING ON CONCURRENT REACT SCHEDULING DOES NOT NECESSARILY MEAN BETTER PERFORMANCE

Slide 151

Slide 151 text

#4 DEEP DIVING ON CONCURRENT REACT THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS.

Slide 152

Slide 152 text

#5 DEEP DIVING ON CONCURRENT REACT THERE’S A LOT OF INFORMATION OUT THERE

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

#6 DEEP DIVING ON CONCURRENT REACT TRY TO CORRELATE BUSINESS METRICS WITH PERFORMANCE

Slide 155

Slide 155 text

We’re hiring! 🗺 Mostly in… 🇺🇸🇲🇽🇦🇷🇺🇾🇪🇸🇨🇿🇮🇱🇮🇳