Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Suspense and TimeSlicing
Search
koba04
June 26, 2018
Programming
0
230
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
Standing on the shoulders of giants
koba04
0
2.5k
React/Next によるアプリケーション開発のこれから
koba04
60
16k
フロントエンド刷新をプロジェクトとして進める際に気をつけていること
koba04
3
1.7k
How useEvent would change our applications
koba04
1
2.8k
kintoneフロントエンド刷新によるモノリスからの脱却とその先に目指す未来
koba04
3
14k
Make it Declarative with React
koba04
0
1.3k
Ready for React in 2019
koba04
2
1.6k
Algorithms in React
koba04
13
11k
100人100通りのフロントエンド
koba04
1
1.5k
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
Fragment Composition of GraphQL
quramy
13
1.4k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
500
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
110
Next.js App Router
quramy
11
1.7k
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
350
Elm Form Validation
bkuhlmann
0
510
Netty Chicago Java User Group 2024-04-17
sullis
0
200
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Side Projects
sachag
451
41k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
A Philosophy of Restraint
colly
197
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.5k
Web Components: a chance to create the future
zenorocha
306
41k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Unsuck your backbone
ammeep
663
57k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Git: the NoSQL Database
bkeepers
PRO
423
63k
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