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
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
2 週間で Twitter Bot を作ってみた
contour_gara
0
790
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
slow types ってなんだろう?
karad
0
120
GitHub Copilotのススメ
marcy731
1
230
Let's learn code review
riofujimon
2
600
Ruby Pattern Matching
bkuhlmann
0
930
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
160
Git Lint
bkuhlmann
4
760
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
180
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Featured
See All Featured
Unsuck your backbone
ammeep
664
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
The Invisible Customer
myddelton
114
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Code Reviewing Like a Champion
maltzj
515
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
In The Pink: A Labor of Love
frogandcode
138
21k
GraphQLとの向き合い方2022年版
quramy
33
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Ruby is Unlike a Banana
tanoku
96
10k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
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