Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Suspense and TimeSlicing
koba04
June 26, 2018
Programming
0
87
Suspense and TimeSlicing
at ReactJS Tokyo June
https://www.meetup.com/ja-JP/ReactJS-Tokyo/events/251543969/
koba04
June 26, 2018
Tweet
Share
More Decks by koba04
See All by koba04
koba04
0
510
koba04
2
1.4k
koba04
9
7.8k
koba04
1
1.1k
koba04
4
13k
koba04
6
1k
koba04
2
1.7k
koba04
2
420
koba04
11
7.9k
Other Decks in Programming
See All in Programming
joergneumann
0
130
takutakahashi
3
310
mizzsugar
1
220
makomakok
1
260
pirosikick
4
960
ianaya89
2
230
takapdayon
0
180
ryokbt
2
310
naokioouchi
1
310
sters
2
140
mrtc0
2
1k
makicamel
0
210
Featured
See All Featured
cromwellryan
104
6.2k
searls
204
36k
chriscoyier
779
240k
mongodb
23
3.9k
lauravandoore
437
28k
bkeepers
321
53k
chriscoyier
683
180k
hursman
106
9.3k
shlominoach
176
7.5k
rocio
155
11k
jlugia
217
16k
destraynor
222
47k
Transcript
5JNF4MJDJOHBOE4VTQFOTF 3FBDU+45PLZP+VOF !LPCB
None
3FDBQ3FBDU'JCFS
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
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
FiberC 4VTQFOEBOE3FTVNF FiberA FiberB FiberA FiberC Commit Low Priority High
Priority Commit FiberA FiberB FiberC Low Priority Reuse Interrupt Suspend Resume
5JNF4MJDJOH
w #MPDLJOH6*UISFBEJTBOBXGVMFYQFSJFODF w 5IFSFBSFNBOZQFPQMFXIPVTFMPXQPXFSEFWJDFT w %FCPVODJOHBOEUISPUUMJOHBSFGPSMPXQPXFSEFWJDFT 5JNF4MJDJOH <AsyncMode> <FilterInput onChange={value
=> { this.setState({value}); requestAnimationFrame(() => this.setState({data: this.filterData(value)}) ); }}
https://github.com/facebook/react/blob/master/packages/react-dom/src/events/SimpleEventPlugin.js
https://react-timeslicing-demo.netlify.com/ Low Priority High Priority
Schedule by React Scheduler
https://github.com/facebook/react/commit/1e3cd332a015e312149efa36eb81c7523411cc2d#diff- bbebc3357e1fb99ab13ad796e04b69a6
%FNP IUUQTSFBDUUJNFTMJDJOHEFNPOFUMJGZDPN IUUQTHJUIVCDPNLPCBSFBDUUJNFTMJDJOHEFNP
4VTQFOTF
8IBUJT4VTQFOTF
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
w 4VTQFOTFJTBGFBUVSFUPIBOEMFBTZODVQEBUFT w )5513FRVFTU w %ZOBNJDJNQPSU w 1SPNJTFBTBQSJNJUJWF w )BOEMJOHBTZODISPOPVTVQEBUFTBSFTPIBSEʜ
w 4UBSU-PBEJOH "1*4VDDFTT 'BJMVSFʜ w .BOZMPBEJOHTQJOOFST KBOL6*CZGBTUSFTQPOTFT 4VTQFOTF
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 />}
)PXEPFT4VTQFOTFXPSL
w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT UIPVHIXIJDI UISPXT1SPNJTFJOTUFBEPG&SSPS )PXEPFT4VTQFOTFXPSL User Fallback Timeout throw Promise!
(suspend) timeout render with fetched Data (resume)
4JNQMF$BDIF1SPWJEFS
https://github.com/facebook/react/tree/master/packages/simple-cache-provider
Empty Pending Resolved Rejected read or preload throw promise return
value from cache Cache load
)PXUPVTF4VTQFOTF
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>
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>
%FNP IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP
w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU w 5IFpOBM"1*NJHIUCFDIBOHFE w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO 4VTQFOTF $ npm install
react@canary react-dom@canary simple-cache-provider
5IBOLZPV TQFBLFSEFDLDPNLPCB