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

Suspense and TimeSlicing

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

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
570
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
2
1.4k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
9
8.3k
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1.1k
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
440
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
11
8k

Other Decks in Programming

See All in Programming
5d769d109697012317c09c6a27a6a4bf?s=48 linyows
1
190
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
160
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
3
1.6k
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
320
Ee974eb4dea26c2f17f42460366bb745?s=48 progate
1
750
F1cc70c45ba7c0ef2af982701e71fdd5?s=48 jamesmoriarty
0
110
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
320
Fd8ec708dd64775183ba0ad57a5efb28?s=48 yuta25
1
200
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
6
760
8e8410eb785755ae2cb485f85dbab6e8?s=48 hiroga
1
270
444706893bf3e53d6d96b4509d2d05d5?s=48 tanden
2
1.9k
A73cbd4500c4dbc97ad2fba6ad41ae67?s=48 mozamimy
0
200

Featured

See All Featured
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.3k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
87
8.8k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
154
11k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
253
19k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
210k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
193
9k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
238
23k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
38
1.8k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
252
11k

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