React Suspense

4VTQFOTF IUNMK !LPCB

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 XIJDIUISPXTB 1SPNJTFJOTUFBEPGBO&SSPSUIPVHI )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

4VTQFOTFPO443 https://www.youtube.com/watch?v=z-6JC0_cOns

4VTQFOTFPO"QPMMP https://www.youtube.com/watch?v=fCXYA3lZTbo

w 5IF"1*JTOPUpOBM"1* NJHIUCFDIBOHFE w *IFBSESFOEFSGVODUJPONVTUOPUIBWFBOZTJEFF⒎FDUT w 1SFMPBEJOHBOEQSFSFOEFSXJUIIJEEFOQSPQT w *OUFHSBUJOHXJUIFDPTZTUFN
w "XFTPNF8IFODBO*VTF4VTQFOTF w .BZCFJOʜ 4VTQFOTF

"SFZPVSFBEZGPS4VTQFOTF 5IBOLZPV TQFBLFSEFDLDPNLPCB

React Suspense

React Suspense

koba04

More Decks by koba04

Other Decks in Programming

Featured

Transcript

4VTQFOTF IUNMK !LPCB

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 /P w 4VQQPSUJOH1SPNJTF$PNQPOFOUEPFTO`UTPMWFQSPCMFNT w )PXEPZPVMJGUVQEFQFOEFODJFTPG1SPNJTF$PNQPOFOUT JOBODFTUPST *T4VTQFOTFTVQQPSUJOH1SPNJTF$PNQPOFOU // How

)PXEPFT4VTQFOTFXPSL

w 4VTQFOTFJTCBTFEPO&SSPS#PVOEBSJFT XIJDIUISPXTB 1SPNJTFJOTUFBEPGBO&SSPSUIPVHI )PXEPFT4VTQFOTFXPSL User Fallback Timeout throw Promise!

4JNQMF$BDIF1SPWJEFS

https://github.com/facebook/react/tree/master/packages/simple-cache-provider

Empty Pending Resolved Rejected read or preload throw promise return

)PXUPVTF4VTQFOTF

4VTQFOTF "1*XJMMCFDIBOHFE import SimpleCacheProvider from ‘simple-cache-provider’; const cache = SimpleCacheProvider.createCache();

4VTQFOTF "1*XJMMCFDIBOHFE import SimpleCacheProvider from ‘simple-cache-provider’; const cache = SimpleCacheProvider.createCache();

%FNP IUUQTSFBDUTVTQFOTFEFNPOFUMJGZDPN IUUQTHJUIVCDPNLPCBSFBDUTVTQFOTFEFNP

w 4VTQFOTFXJMMCFBWBJMBCMFJOWCZEFGBVMU w 5IFpOBM"1*NJHIUCFDIBOHFE w :PVDBOFYQFSJNFOUJUXJUIBDBOBSZWFSTJPO 4VTQFOTF $ npm install

4VTQFOTFPO443 https://www.youtube.com/watch?v=z-6JC0_cOns

4VTQFOTFPO"QPMMP https://www.youtube.com/watch?v=fCXYA3lZTbo

w 5IF"1JTOPUpOBM"1 NJHIUCFDIBOHFE w IFBSESFOEFSGVODUJPONVTUOPUIBWFBOZTJEFF⒎FDUT w 1SFMPBEJOHBOEQSFSFOEFSXJUIIJEEFOQSPQT w OUFHSBUJOHXJUIFDPTZTUFN

"SFZPVSFBEZGPS4VTQFOTF 5IBOLZPV TQFBLFSEFDLDPNLPCB