Salut, React Brussels! 👋 🇧🇪 DEEP DIVING ON CONCURRENT REACT • THE 14TH OF OCTOBER, 2022. 

DEEP DIVING ON CONCURRENT REACT MATHEUS ALBUQUERQUE 

DEEP DIVING ON CONCURRENT REACT 🧑🏫 @techlabs 🐦 @ythecombinator 👨💻 @medallia ↑ ALL THE LINKS! 🤓 🇧🇷 Matheus Albuquerque 

DEEP DIVING ON CONCURRENT REACT 🍺 DEEP DIVE! LET’S DISCUSS MORE IN THE AFTER CONF! ↑ ALL THE LINKS! 🤓 

#QUESTION 🤔 I’ve been looking forward so much to this conference! Especially because… 

DEEP DIVING ON CONCURRENT REACT 😍😍😍 

Prologue DEEP DIVING ON CONCURRENT REACT 

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

PERFOMANCE 

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? 

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? 

No content

LONG TASKS 

LONG TASKS 

LONG TASKS 

#RESEARCH 📚 Phone users experience slow First Input Delay on 7x more websites. — Web Almanac By HTTP Archive, 2021 

RESEARCH RESULTS: ↝ LONG TASKS DELAYED TTI ↝ 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 LONG TASKS 

— AKAMAI AND CHROME RESEARCH, 2017 BUSINESS OUTCOMES 

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

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

#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 = ??? 

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

The Main Thread DEEP DIVING ON CONCURRENT REACT 

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 LONG AND BLOCK OTHER TASKS 

#QUESTION 🤔 How to avoid blocking the main thread? 

TASK RUNNING STRATEGIES A B C D 

TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING 

TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING 

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 🍺 

🎭 ACTORS WORKERS ↝ EACH ACTOR FULLY OWNS THE DATA IT IS OPERATING ON ↝ ACTORS CAN ONLY SEND/REACT TO MESSAGES ↝ THE MAIN THREAD IS ACTOR THAT OWNS THE DOM/UI ↝ postMessage HAS NO BUILT-IN UNDERSTANDING OF REQUEST AND RESPONSE ↝ BALANCE: MOVING CODE TO A WORKER VS COMMUNICATION OVERHEAD/WORKER BEING BUSY 🔗 SHARED MEMORY ↝ ONE DEDICATED TYPE: SharedArrayBuffer 

🎭 ACTORS WORKERS 🔗 SHARED MEMORY ↝ ONE DEDICATED TYPE: SharedArrayBuffer ↝ IF SENT VIA postMessage, THE OTHER END GETS A HANDLE TO THE EXACT SAME MEMORY CHUNK ↝ MOST OF THE WEB APIS ARE BUILT NO CONCURRENT ACCESS TO OBJECTS IN MIND ↝ YOU BUILD YOUR OWN CONCURRENT DATA STRUCTURES ↝ NO DIRECT WAY OF WORKING ON FAMILIAR OBJECTS/ ARRAYS; JUST A SERIES OF BYTES 🍺 ↝ EACH ACTOR FULLY OWNS THE DATA IT IS OPERATING ON 

WEB ASSEMBLY ↝ THE BEST EXPERIENCE FOR SHARED-MEMORY MODEL ↝ DOESN’T OFFER THE "COMFORT" OF JAVASCRIPT ↝ FASTER WHEN YOU STAY WITHIN WASM ↝ JAVASCRIPT IS OFTEN FASTER AT DOM AND HIGH- LEVEL UI LIBRARIES CAN BE MORE PERFORMANT THAN LOW-LEVEL WASM IMPLEMENTATIONS 🍺 

↝ Atomics ↝ BuffferBackedObject ↝ Comlink ↝ WorkerDOM ↝ AND MUCH MORE! 

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

TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING 

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

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

Scheduling in React DEEP DIVING ON CONCURRENT REACT 

↝ 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 IN REACT 

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

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

PRIORITY LEVELS 

PRIORITY LEVELS 

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

↝ ONE LANE = ONE BIT IN A BITMASK ↝ ONE UPDATE IN REACT = ONE LANE ↝ UPDATES IN THE SAME LANE RENDER IN THE SAME BATCH. DIFFERENT LANES, SEPARATE BATCHES. ↝ 31 LEVELS OF GRANULARITY (= ONE BITMASK) RENDER LANES 🍺 

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

No content

DEEP DIVING ON CONCURRENT REACT 

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

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

SCHEDULING IN REACT HANDLING LOTS OF DATA WITH THE useTransition HOOK TACKLING WASTED RENDERS WITH THE useSyncExternalStore HOOK HYDRATION IMPROVEMENTS WITH SELECTIVE HYDRATION & CONCURRENT REACT PROFILER ENHANCEMENTS INSPECT TRANSITIONS, GET WARNS, AND MUCH MORE! 

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

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

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

DAILY VISITORS (BEFORE) 

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

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; 

DAILY VISITORS (AFTER) 

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

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

#2 TACKLING WASTED RENDERS DEEP DIVING ON CONCURRENT REACT 

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

DEEP DIVING ON CONCURRENT REACT 

No content

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

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

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

SPEAKERS LIST [BEFORE] 

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

useLocation() useHistorySelector() 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 ; } 

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 ; } useLocation() useHistorySelector() 

SPEAKERS LIST [AFTER] 

#3 HYDRATION IMPROVEMENTS DEEP DIVING ON CONCURRENT REACT 

↝ BEFORE, HYDRATION COULD ONLY BEGIN AFTER THE ENTIRE DATA WAS FETCHED AND RENDERED ↝ USERS COULDN’T INTERACT WITH THE PAGE UNTIL HYDRATION WAS COMPLETE FOR THE WHOLE PAGE ↝ PARTS OF YOUR APP THAT LOAD FAST WOULD ALWAYS HAVE TO WAIT FOR THE SLOW ONES HYDRATION 

↝ REACT WON'T WAIT FOR A COMPONENT TO LOAD TO CONTINUE STREAMING THE REST OF THE HTML ↝ REACT PRIORITIZES HYDRATING THE PARTS THAT THE USER INTERACTED WITH BEFORE THE REST SELECTIVE HYDRATION 

↝ COMPONENTS CAN BECOME INTERACTIVE FASTER BY ALLOWING THE BROWSER TO DO OTHER WORK AT THE SAME TIME AS HYDRATION ↝ RESULTS IN LOWER FIRST INPUT DELAY (FID) AND INTERACTION TO NEXT PAINT (INP) SELECTIVE HYDRATION 

SELECTIVE HYDRATION }> 

DEEP DIVING ON CONCURRENT REACT 

#4 PROFILER ENHANCEMENTS DEEP DIVING ON CONCURRENT REACT 

TRANSITIONS — INTRODUCING A NEW REACT PROFILER, BY BRIAN VAUGHN 

— INTRODUCING A NEW REACT PROFILER, BY BRIAN VAUGHN WARNS 

Measure DEEP DIVING ON CONCURRENT REACT 

MEASURE IN THE LAB 

MEASURE IN THE FIELD 

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. RESOURCE TIMING RETRIEVE AND ANALYZE DETAILED NETWORK TIMING DATA REGARDING THE LOADING 

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 

{ 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 🍺 

#PROTIP 💡 Use observability services or libraries like web-vitals. But remember you can also create your own abstractions on top of the web + React. 

The Future DEEP DIVING ON CONCURRENT REACT 

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

↝ useInsertionEffect FOR STYLESHEET LIBRARIES ↝ THE COMPONENT ↝ SERVER COMPONENTS ↝ NATIVE SCHEDULING PRIMITIVES ON THE BROWSER THE FUTURE 🍺 

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

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 

DEEP DIVING ON CONCURRENT REACT 

SCHEDULING API 

Closing Notes DEEP DIVING ON CONCURRENT REACT 

No content

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

#2 DEEP DIVING ON CONCURRENT REACT UNDERSTANDING THESE INTERNALS AND THEIR RATIONALES HELPS US IMPLEMENT OUR OWN ABSTRACTIONS 

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

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

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

No content

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

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

DEEP DIVING ON CONCURRENT REACT 

No content

DEEP DIVING ON CONCURRENT REACT THAT’S ALL, FOLKS! THANKS! 🤝 🇧🇪 QUESTIONS? MATHEUS ALBUQUERQUE ↑ ALL THE LINKS! 🤓