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

Suspense and TimeSlicing

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

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
0
510
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.4k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
9
7.8k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1.1k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
4
13k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
6
1k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.7k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
420
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
11
7.9k

Other Decks in Programming

See All in Programming
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
130
Defdf943f6e9bfc3d3cd856d9d9e0f9b?s=48 takutakahashi
3
310
C98d379da6e5517afff697a6c5615e68?s=48 mizzsugar
1
220
Ff1e356e879c9a03c73e7891cb9d63a6?s=48 makomakok
1
260
Dc52871050369929247b69f3767e8737?s=48 pirosikick
4
960
6c3e7ef20801b4b967dc1643f63d6233?s=48 ianaya89
2
230
C4e73b01e9abac83ed5edef8e9cc79b8?s=48 takapdayon
0
180
6c366ab6293eb42aec0e6f5f69b50882?s=48 ryokbt
2
310
Cd34440e6c181704f318319e131af68d?s=48 naokioouchi
1
310
3c86b5e68b972038efd6c5cd1553d46b?s=48 sters
2
140
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
2
1k
Cfbe23392787cb3ad4689c5f72463fcc?s=48 makicamel
0
210

Featured

See All Featured
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.2k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
36k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
779
240k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.9k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
437
28k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
321
53k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
79acae287842acf29084005533a7fb3b?s=48 hursman
106
9.3k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.5k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
47k

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