5JNF4MJDJOHBOE4VTQFOTF 3FBDU+45PLZP+VOF !LPCB

No content

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 { 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 ? : }

)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 ; }; const Placeholder = props => ( {didExpire => didExpire ? props.fallback : props.children} );

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 ; }; const Placeholder = props => ( {didExpire => didExpire ? props.fallback : props.children} );

%FNP IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP

w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU w 5IFpOBM"1*NJHIUCFDIBOHFE w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO 4VTQFOTF $ npm install react@canary react-dom@canary simple-cache-provider

5IBOLZPV TQFBLFSEFDLDPNLPCB