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

Suspense and TimeSlicing

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

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
620
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.5k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
9
8.6k
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
470
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
11
8.1k

Other Decks in Programming

See All in Programming
F301c0275838d562c72ea9177e7ddc68?s=48 fkino
1
100
9adb9a67e73d93190e1d07d077a9aae7?s=48 ykkc
4
210
7a33106dde82ecc65a220eaf9d131222?s=48 patrickjahr
0
120
78d39160a56e4a71b1c4a2d0cbfda223?s=48 jlkiri
0
360
B32c18d03687577950da29542d0a9180?s=48 kurumai
1
660
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
20
2.1k
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
8
5.2k
A2cd163fd3cfca5204b0d8f0c17eea29?s=48 yujif
2
130
E9e3472b8801ed21298ccefeecfaf429?s=48 takamichie
PRO
0
230
43aec61f9ef926b809d6f16e1f2c97bf?s=48 italocegatta
0
100
E505897a79eede1a676f92740261e8f8?s=48 kubode
1
300
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
3
2.4k

Featured

See All Featured
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
69
3.2k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
122
16k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
119
11k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
14
660
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
482
150k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
209
7.1k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
78b475797a14c84799063c7cd073962f?s=48 holman
463
280k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
10
730
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
20
1k

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