Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Suspense and TimeSlicing

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=47 koba04
June 26, 2018
Programming
0
100

Suspense and TimeSlicing

at ReactJS Tokyo June
https://www.meetup.com/ja-JP/ReactJS-Tokyo/events/251543969/

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=128

koba04

June 26, 2018
Tweet

More Decks by koba04

See All by koba04
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1.1k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
0
720
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.5k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
10
9.1k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1.2k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
4
13k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
6
1.1k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.8k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
510

Other Decks in Programming

See All in Programming
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
1
110
6dd0483f1353a4a359e92633cfd65c64?s=48 wasabeef
2
1.3k
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
280
07417ad42eeae4f8233038000f990f05?s=48 chirurimu
0
150
Cf642b7a99e07f86e6e7ec7a3bb94d87?s=48 uemura
1
310
49ae3cdb8b1a20b56aac93648f202238?s=48 futabato
0
760
7e56a691cfb413e0f6e631791f33fe54?s=48 mismith0227
0
200
B03c47042f27235b4ddd97621c02df81?s=48 storz
0
110
13fb4600e942b31c69cfeaf4768c36cc?s=48 takazudo
7
720
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
260
E10ba38646a905c8cd2c893c84d5c520?s=48 suzushin54
0
270
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
3
5.7k

Featured

See All Featured
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
60
9.7k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
55k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
109
6.7k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
20k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
88
5.4k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
25
11k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.4k
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
7
30k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
1k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
172
7.9k

Transcript

  1. 5JNF4MJDJOHBOE4VTQFOTF 3FBDU+45PLZP+VOF   !LPCB

  2. None

  3. 3FDBQ3FBDU'JCFS

  4. w 3FBDU'JCFSJTBOVOJUPGXPSL 㲈3FBDU&MFNFOU  w *UJTQPTTJCMFUPTUPQBOESFTVNFVQEBUFT 3FDBQ3FBDU'JCFS FiberA FiberB FiberD

    FiberE Commit all SideEffects Idle Time Idle Time Idle Time SideEffect SideEffect Host (DOM) FiberC Render Phase Commit Phase

  5. w 3FOEFS1IBTFʜ"TZOD w $PNNJU1IBTFʜ4ZOD 3FDBQ3FBDU'JCFS FiberA FiberB FiberD FiberE Commit

    all SideEffects Idle Time Idle Time Idle Time SideEffect SideEffect Host (DOM) FiberC Async Sync

  6. FiberC 4VTQFOEBOE3FTVNF FiberA FiberB FiberA FiberC Commit Low Priority High

    Priority Commit FiberA FiberB FiberC Low Priority Reuse Interrupt Suspend Resume

  7. 5JNF4MJDJOH

  8. w #MPDLJOH6*UISFBEJTBOBXGVMFYQFSJFODF w 5IFSFBSFNBOZQFPQMFXIPVTFMPXQPXFSEFWJDFT w %FCPVODJOHBOEUISPUUMJOHBSFGPSMPXQPXFSEFWJDFT 5JNF4MJDJOH <AsyncMode> <FilterInput onChange={value

    => { this.setState({value}); requestAnimationFrame(() => this.setState({data: this.filterData(value)}) ); }}

  9. https://github.com/facebook/react/blob/master/packages/react-dom/src/events/SimpleEventPlugin.js

  10. https://react-timeslicing-demo.netlify.com/ Low Priority High Priority

  11. Schedule by React Scheduler

  12. https://github.com/facebook/react/commit/1e3cd332a015e312149efa36eb81c7523411cc2d#diff- bbebc3357e1fb99ab13ad796e04b69a6

  13. %FNP IUUQTSFBDUUJNFTMJDJOHEFNPOFUMJGZDPN IUUQTHJUIVCDPNLPCBSFBDUUJNFTMJDJOHEFNP

  14. 4VTQFOTF

  15. 8IBUJT4VTQFOTF

  16. https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

  17. w 4VTQFOTFJTBGFBUVSFUPIBOEMFBTZODVQEBUFT w )5513FRVFTU w %ZOBNJDJNQPSU w 1SPNJTFBTBQSJNJUJWF w )BOEMJOHBTZODISPOPVTVQEBUFTBSFTPIBSEʜ

    w 4UBSU-PBEJOH "1*4VDDFTT 'BJMVSFʜ w .BOZMPBEJOHTQJOOFST KBOL6*CZGBTUSFTQPOTFT 4VTQFOTF

  18. w /P w 4VQQPSUJOH1SPNJTF$PNQPOFOUEPFTO`UTPMWFQSPCMFNT w )PXEPZPVMJGUVQEFQFOEFODJFTPG1SPNJTF$PNQPOFOUT JOBODFTUPST *T4VTQFOTFTVQQPSUJOH1SPNJTF$PNQPOFOU // How

    do you show loading message // until the user list has been fetched? {isLoading ? <Loading /> : <UserListPage />}

  19. )PXEPFT4VTQFOTFXPSL

  20. w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT UIPVHIXIJDI UISPXT1SPNJTFJOTUFBEPG&SSPS )PXEPFT4VTQFOTFXPSL User Fallback Timeout throw Promise!

    (suspend) timeout render with fetched Data (resume)

  21. 4JNQMF$BDIF1SPWJEFS

  22. https://github.com/facebook/react/tree/master/packages/simple-cache-provider

  23. Empty Pending Resolved Rejected read or preload throw promise return

    value from cache Cache load

  24. )PXUPVTF4VTQFOTF

  25. 4VTQFOTF "1*XJMMCFDIBOHFE import SimpleCacheProvider from ‘simple-cache-provider’; const cache = SimpleCacheProvider.createCache();

    const userFetcher = id => SimpleCacheProvider.createResource(id => fetch(`/api/users/${id}`).then(res => res.json()); )(cache, id); const User = props => { const user = userFetcher.read(props.id); return <div>{user.name}</div>; }; const Placeholder = props => ( <React.Timeout ms={props.timeout}> {didExpire => didExpire ? props.fallback : props.children} </React.Timeout> ); <Placeholder fallback=“Loading…” timeout={200}> <User id={100} /> </Placeholder>

  26. 4VTQFOTF "1*XJMMCFDIBOHFE import SimpleCacheProvider from ‘simple-cache-provider’; const cache = SimpleCacheProvider.createCache();

    const routeFetcher = Component => SimpleCacheProvider.createResource(Component => import(Component).then(module => module.default); )(cache, Component); const UserPage = () => { const Component = routeFetcher.read(‘./pages/User’); return <Component />; }; const Placeholder = props => ( <React.Timeout ms={props.timeout}> {didExpire => didExpire ? props.fallback : props.children} </React.Timeout> ); <Placeholder fallback=“Loading…” timeout={1000}> <UserPage /> </Placeholder>

  27. %FNP IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP

  28. w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU w 5IFpOBM"1*NJHIUCFDIBOHFE w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO 4VTQFOTF $ npm install

    react@canary react-dom@canary simple-cache-provider

  29. 5IBOLZPV TQFBLFSEFDLDPNLPCB