Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React Suspense
koba04
June 19, 2018
Programming
4
13k
React Suspense
koba04
June 19, 2018
Tweet
Share
More Decks by koba04
See All by koba04
How useEvent would change our applications
koba04
1
2.1k
kintoneフロントエンド刷新によるモノリスからの脱却とその先に目指す未来
koba04
2
11k
Make it Declarative with React
koba04
0
840
Ready for React in 2019
koba04
2
1.5k
Algorithms in React
koba04
10
10k
Suspense and TimeSlicing
koba04
0
100
100人100通りのフロントエンド
koba04
1
1.3k
Ready for Async Rendering
koba04
6
1.2k
Contributing to React!
koba04
2
1.9k
Other Decks in Programming
See All in Programming
Rに管理されてみる
kazutan
0
250
Pythonによる開発をアップデートするライブラリの紹介
daikikatsuragawa
1
310
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
oniak3ibm
PRO
0
170
段階的な技術的負債の解消方法.pdf
ko2ic
2
850
Efficient UI testing in Android
alexzhukovich
1
120
kintone × LINE Bot で餃子検定Botを作った話
naberina
0
240
プロダクトの成長とSREと
takuyatezuka
0
110
Now in Android Overview
aosa4054
0
370
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
8.1k
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.5k
20220706_Google Apps Scriptを実演で学ぶ~ GAS × Slack ~
apachan
2
610
ちょっとつよい足トラ
logilabo
0
330
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
15k
A better future with KSS
kneath
226
16k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
It's Worth the Effort
3n
172
26k
Building Your Own Lightsaber
phodgson
95
4.7k
How STYLIGHT went responsive
nonsquared
85
4k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Building Adaptive Systems
keathley
25
1.1k
The Power of CSS Pseudo Elements
geoffreycrofte
47
4k
Designing for humans not robots
tammielis
241
24k
Navigating Team Friction
lara
175
11k
For a Future-Friendly Web
brad_frost
166
7.5k
Transcript
4VTQFOTF IUNMK !LPCB
None
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