Suspense and TimeSlicing

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

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
350
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.4k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
8
7.4k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
4
12k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
6
1k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.7k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
390
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
11
7.8k

Other Decks in Programming

See All in Programming
Dbfa12cd7e1ff8b06a588609369d6e49?s=48 eddie
0
390
E76754f592fecf0116c53b2bc39ff135?s=48 kthoms
0
220
C6296f654b1cc6886aabe5b9703cbe67?s=48 ishiitetsuji
1
670
86ee5be9683418fbfb216692fc3f27c5?s=48 macochin
0
160
A6ba8150ec3d9e5f2c675ef8bd652ff5?s=48 vailkako
0
180
4ab3fec3e82ddb19bcadd93ef909a443?s=48 syucream
2
420
D225ebf0faa666ac7655cc7e4689283c?s=48 dlew
2
180
Aa2ed090fd893f58f4d139c3285106bc?s=48 universato
0
210
B471eb2445c405a8d33f5777816550e3?s=48 lukle
2
210
51f4d2341131b6b9bfa996bdb9b8dfa8?s=48 showmant
3
700
Ffc500baeba9a1024e2c8273203c9f90?s=48 raulh82vlc
3
1.5k
60a71672b538fb50cc1d15c41c971255?s=48 blackbing
0
160

Featured

See All Featured
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
123
20k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
325
15k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
85
8.4k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
71
7k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
79acae287842acf29084005533a7fb3b?s=48 hursman
104
9.1k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
293
39k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
8
1.1k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
7k
78b475797a14c84799063c7cd073962f?s=48 holman
458
270k

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