$30 off During Our Annual Pro Sale. View Details »

๐Ÿ‡ฌ๐Ÿ‡ง React Advanced 2022

๐Ÿ‡ฌ๐Ÿ‡ง React Advancedย 2022

โ„น๏ธ Deep diving on Concurrent React

Writing fluid user interfaces become more and more challenging as the application complexity increases. In this talk, weโ€™ll explore how proper scheduling improves your appโ€™s experience by diving into some concurrent React features, understanding their rationales, and how they work under the hood.

Matheus Albuquerque

October 21, 2022
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. Hello, React Advanced! ๐Ÿ‘‹ ๐Ÿ‡ฌ๐Ÿ‡ง DEEP DIVING ON CONCURRENT REACT

    โ€ข THE 21ST OF OCTOBER, 2022.
  2. DEEP DIVING ON CONCURRENT REACT MATHEUS ALBUQUERQUE

  3. DEEP DIVING ON CONCURRENT REACT ๐Ÿง‘๐Ÿซ @techlabs ๐Ÿฆ @ythecombinator ๐Ÿ‘จ๐Ÿ’ป

    @medallia โ†‘ ALL THE LINKS! ๐Ÿค“
  4. None
  5. DEEP DIVING ON CONCURRENT REACT ๐Ÿคฟ DEEP DIVE! LETโ€™S DISCUSS

    MORE IN THE AFTER CONF! โ†‘ ALL THE LINKS! ๐Ÿค“
  6. #QUESTION ๐Ÿค” If you were to summarize Concurrent React in

    one word/expression, whatโ€™d be your pick?
  7. #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 = ???
  8. 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?
  9. The Main Thread DEEP DIVING ON CONCURRENT REACT

  10. LONG TASKS

  11. None
  12. LONG TASKS

  13. LONG TASKS

  14. #RESEARCH ๐Ÿ“š Phone users experience slow First Input Delay on

    7x more websites. โ€”โ€‰Web Almanac By HTTP Archive, 2021
  15. 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
  16. โ€”โ€‰AKAMAI AND CHROME RESEARCH, 2017 BUSINESS OUTCOMES

  17. #QUESTION ๐Ÿค” How to avoid blocking the main thread?

  18. TASK RUNNING STRATEGIES A B C D

  19. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING

  20. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING

  21. 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 ๐Ÿคฟ
  22. ๐ŸŽญ 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
  23. ๐ŸŽญ 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
  24. 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 ๐Ÿคฟ
  25. โ† Atomics โ† BuffferBackedObject โ† Comlink โ† WorkerDOM โ† AND

    MUCH MORE!
  26. WORKERS โ† GOOD FOR DATA PROCESSING AND CRUNCHING NUMBERS โ†

    HARD TO USE FOR UI-RELATED STUFF โ† HARDER THAN ADJUSTING WORK FOR A SCHEDULER
  27. TASK RUNNING STRATEGIES PARALLELISM CONCURRENCY SCHEDULING

  28. #QUESTION ๐Ÿค” If you were to summarize Concurrent React in

    one word/expression, whatโ€™d be your pick?
  29. DEEP DIVING ON CONCURRENT REACT If you were to summarize

    Concurrent React in one word/expression, whatโ€™d be your pick?
  30. Scheduling in React DEEP DIVING ON CONCURRENT REACT

  31. HEURISTICS COOPERATIVE MULTITASKING WITH A SINGLE INTERRUPTIBLE RENDERING THREAD PRIORITY

    LEVELS REGISTER CALLBACKS WITH DIFFERENT PRIORITY LEVELS IN THE BROWSER RENDER LANES ABSTRACTIONS AROUND A BITMASK; BRING GRANULARITY, AVOID OVERHEAD & ALLOW BATCHING SCHEDULING IN REACT
  32. โ† 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
  33. โ† 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
  34. PRIORITY LEVELS

  35. PRIORITY LEVELS

  36. 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)
  37. โ† 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 ๐Ÿคฟ
  38. โ† 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 ๐Ÿคฟ
  39. None
  40. DEEP DIVING ON CONCURRENT REACT

  41. #QUESTION ๐Ÿค” How do we benefit from these in our

    everyday projects?
  42. Scheduling in React [for the rest of us] DEEP DIVING

    ON CONCURRENT REACT
  43. 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!
  44. #1 HANDLING LARGE SETS OF DATA DEEP DIVING ON CONCURRENT

    REACT
  45. ๐Ÿ˜” NON-PRACTICALโ€ฆ โ† FINDING PRIMES โ† CRACKING PASSWORDS โ† SIERPINSKI

    TRIANGLE
  46. ๐Ÿ˜” NON-PRACTICALโ€ฆ โ† RENDERING MANY DATA-POINTS โ† RENDERING ON A

    <canvas> โ† PROCESSING DATA
  47. DAILY VISITORS (BEFORE)

  48. DAILY VISITORS (BEFORE) const DailyVisitors = () = > {

    const [data, setData] = useState(initialData); useEffect(() = > { setData(initialData); }, []); const onChange = (newData) = > { setData(newData); }; return ( <Dashboard data={data} initialData={initialData} onChange={onChange} /> ); }; export default DailyVisitors;
  49. DAILY VISITORS (AFTER) const DailyVisitors = () = > {

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

  51. โ† หœ100K + POINTS PLOTTED โ† SUPPORT FOR SEARCHING AND

    FILTERING โ† USED WORKERS + REDUX-SAGA UTILITIES + DEBOUNCING โ† COULD'VE USED TRANSITIONS CASE #1: MAPS
  52. CASE #2: GAME ADMIN โ† THOUSANDS OF REAL-TIME PLAYERS MESSAGING

    โ† SUPPORT FOR SEARCHING AND FILTERING โ† USED VIRTUALIZATION AND MEMOIZATION โ† COULD'VE USED TRANSITIONS
  53. #2 TACKLING WASTED RENDERS DEEP DIVING ON CONCURRENT REACT

  54. useSyncExternalStore() function useSyncExternalStore<Snapshot>( subscribe: (onStoreChange: () = > void) =

    > () = > void, getSnapshot: () = > Snapshot, getServerSnapshot?: () = > Snapshot ): Snapshot;
  55. DEEP DIVING ON CONCURRENT REACT

  56. None
  57. #QUESTION ๐Ÿค” How do we benefit from these in our

    everyday projects?
  58. None
  59. useLocation() function Pathname() { const { pathname } = useLocation();

    return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } = useLocation(); return <Badge title={hash} subtitle="hash" />; }
  60. useLocation() function Pathname() { const { pathname } = useLocation();

    return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } = useLocation(); return <Badge title={hash} subtitle="hash" />; } OVER-RETURNING HOOK
  61. SPEAKERS LIST [BEFORE]

  62. useLocation() function Pathname() { const { pathname } = useLocation();

    return <Badge title={pathname} subtitle="pathname" />; } function Hash() { const { hash } = useLocation(); return <Badge title={hash} subtitle="hash" />; }
  63. useLocation() 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" />; }
  64. 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" />; } useLocation() useHistorySelector()
  65. SPEAKERS LIST [AFTER]

  66. #3 HYDRATION IMPROVEMENTS DEEP DIVING ON CONCURRENT REACT

  67. โ† 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
  68. โ† 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
  69. โ† 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
  70. DEEP DIVING ON CONCURRENT REACT

  71. #4 PROFILER ENHANCEMENTS DEEP DIVING ON CONCURRENT REACT

  72. TRANSITIONS โ€” INTRODUCING A NEW REACT PROFILER, BY BRIAN VAUGHN

  73. โ€” INTRODUCING A NEW REACT PROFILER, BY BRIAN VAUGHN WARNS

  74. The Future DEEP DIVING ON CONCURRENT REACT

  75. โ† I/O LIBRARIES LIKE react-fetch โ† BUILT-IN <Cache> FOR DATA

    FETCHING LIBRARIES TO INTEGRATE WITH <Suspense> โ† <Suspense> FOR CPU-BOUND TREES TO IMMEDIATELY FALLBACK WITHOUT EVEN TRYING TO RENDER THE FUTURE ๐Ÿคฟ
  76. โ† useInsertionEffect FOR STYLESHEET LIBRARIES โ† THE <Offscreen> COMPONENT โ†

    SERVER COMPONENTS โ† NATIVE SCHEDULING PRIMITIVES ON THE BROWSER THE FUTURE ๐Ÿคฟ
  77. DEEP DIVING ON CONCURRENT REACT

  78. 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
  79. 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
  80. SCHEDULING API

  81. Closing Notes DEEP DIVING ON CONCURRENT REACT

  82. DEEP DIVING ON CONCURRENT REACT

  83. #1 DEEP DIVING ON CONCURRENT REACT REACT IS NOT REACTIVE,

    BUT IT IS CONCURRENT AND THAT MIGHT BE ENOUGH FOR YOU
  84. None
  85. #2 DEEP DIVING ON CONCURRENT REACT REACT HAS BEEN PUSHING

    WEB APIS TO THE FUTURE E.G. THE SCHEDULER API
  86. DEEP DIVING ON CONCURRENT REACT

  87. ๐Ÿคฟ

  88. export const Hello = () = > { const value

    = usePromise(() = > delay("Hello, React Advanced! ๐Ÿ‘‹ ๐Ÿ‡ฌ๐Ÿ‡ง ", 5000)); return <Typography variant="h3">{value}</Typography>; }; function Demo() { return ( <Grid container justifyContent="center"> <Suspense fallback={<Loading message="Loading . . . " />}> <Hello /> </Suspense> </Grid> ); } ๐Ÿคฟ
  89. DID WE JUST CREATE React.use()? ๐Ÿค”

  90. YES, WE DID ๐Ÿค“

  91. #3 DEEP DIVING ON CONCURRENT REACT UNDERSTANDING THESE INTERNALS AND

    THEIR RATIONALES HELPS US IMPLEMENT OUR OWN ABSTRACTIONS E.G. FIRST CLASS SUPPORT FOR PROMISES
  92. #4 DEEP DIVING ON CONCURRENT REACT SCHEDULING DOES NOT NECESSARILY

    MEAN BETTER PERFORMANCE ๐Ÿคฟ
  93. #5 DEEP DIVING ON CONCURRENT REACT THERE'S NO SILVER BULLET.

    IDENTIFY YOUR CORE METRICS.
  94. #6 DEEP DIVING ON CONCURRENT REACT THEREโ€™S A LOT OF

    INFORMATION OUT THERE
  95. None
  96. #7 DEEP DIVING ON CONCURRENT REACT ALWAYS TRY TO CORRELATE

    BUSINESS METRICS WITH PERFORMANCE
  97. DEEP DIVING ON CONCURRENT REACT

  98. None
  99. DEEP DIVING ON CONCURRENT REACT THATโ€™S ALL, FOLKS! THANKS! ๐Ÿค

    ๐Ÿ‡ฌ๐Ÿ‡ง QUESTIONS? MATHEUS ALBUQUERQUE โ†‘ ALL THE LINKS! ๐Ÿค“