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
5分でわかる React "Suspense"
Search
Kento Moriwaki
March 20, 2018
Programming
3
1.5k
5分でわかる React "Suspense"
Roppongi.js #1
Kento Moriwaki
March 20, 2018
Tweet
Share
More Decks by Kento Moriwaki
See All by Kento Moriwaki
わかった気になれる CRDT を使った共同編集
kentomoriwaki
8
4.8k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.8k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
1.2k
BFFを導入しなかった理由
kentomoriwaki
4
13k
TypeScript in Wantedly
kentomoriwaki
2
750
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.7k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
75k
React速習会@Wantedly
kentomoriwaki
1
440
Other Decks in Programming
See All in Programming
CSC509 Lecture 04
javiergs
PRO
0
300
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
240
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
EMこそClaude Codeでコード調査しよう
shibayu36
0
240
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
Swift Concurrency - 状態監視の罠
objectiveaudio
2
550
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
180
CSC509 Lecture 03
javiergs
PRO
0
340
Go言語はstack overflowの夢を見るか?
logica0419
0
490
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
Introduce Hono CLI
yusukebe
6
2.9k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Thoughts on Productivity
jonyablonski
70
4.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Statistics for Hackers
jakevdp
799
220k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Git: the NoSQL Database
bkeepers
PRO
431
66k
Gamification - CAS2011
davidbonilla
81
5.5k
Site-Speed That Sticks
csswizardry
13
910
Transcript
©2018 Wantedly, Inc. 2018.3.20 - ͰΘ͔Δ 3FBDU4VTQFOTF 3PQQPOHJKT ,FOUP.PSJXBLJ @kento_trans_lu
©2018 Wantedly, Inc. ͜ͱͷ࢝·Γɺ͋ΔπΠʔτͩͬͨɻ Reactͷ։ൃऀ @dan_abaramov
©2018 Wantedly, Inc. ଓ͚ͯɺ
©2018 Wantedly, Inc. +4$POG*DFMBOEͰൃද͞Εͨͷ͕ɺ ͦͷπΠʔτ͔Βिؒޙɻ https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
©2018 Wantedly, Inc. 3FBDU4VTQFOTF 5JNF4MJDJOH
©2018 Wantedly, Inc. 3FBDU4VTQFOTF 5JNF4MJDJOH ࠓͪ͜ΒΛগ͚ͩ͠հ ͜Ε͔Β͢͜ͱɺ·ͩϦϦʔε͞Ε͍ͯͳ͍͠ɺ ֬ఆͨ͠ใͰͳ͍͜ͱΛɺྃ͝ঝ͍ͩ͘͞
©2018 Wantedly, Inc. w ඇಉظ௨৴ͳͲͷະܾఆͳঢ়ଶΛѻ͏ͨΊͷ֓೦ w ༷ʑͳωοτڥͷϢʔβʔʹૉΒ͍͠69Λఏ ڙ͢ΔͨΊʹ࡞ΒΕͨ w 4VTQFOTFͱ͍͏໊લͷԿ͔͕ϦϦʔε͞ΕΔΘ
͚Ͱͳ͍ React Suspenseͱɺ
©2018 Wantedly, Inc. ·ͣΑ͋͘Δඇಉظ௨৴͔Β
©2018 Wantedly, Inc. Suspense͕͋Δͱ͖
©2018 Wantedly, Inc. simple-cache-provider? simple-cache-providerΛΘͳ͍ྫ
©2018 Wantedly, Inc. w SFOEFSதʹ1SPNJTFΛ͛Δ͜ͱͰɺ·ͩදࣔ ͷ͕ྃͰ͖ͳ͍͜ͱΛڭ͑Δɻ w ͦͷ1SPNJTF͕SFTPMWF͞ΕͨλΠϛϯάͰɺ ͏ҰSFOEFS͕Δ PromiseΛthrowͨ͠!?
©2018 Wantedly, Inc. React.Timeout PromiseΛthrow͢ΔComponentΛϥοϓͯ͠͏ɻ Ұఆ࣌ؒҎ্ͨͬͨΒSpinnerΛදࣔͯ͠ΈΔɻ
©2018 Wantedly, Inc. w "1*ϦΫΤετΛαΫαΫ͔͚Δ w %ZOBNJDJNQPSUαΫαΫ͔͚Δ w ඇಉظ௨৴Λ͢Δίϯϙʔωϯτɺ4UBUFMFTT GVODUJPOBMDPNQPOFOUͰ͔͚Δ
Α͘ͳΔ͜ͱ
©2018 Wantedly, Inc. w ͍͔ͭΒ͑Δͷʁ w ࣍ظWFSTJPOͷ͔Ͱ͑Δͱ৴͍ͯ͡·͢ w ৮ͬͯΈ͍ͨΜ͚ͩͲ w
IUUQTDPEFTBOECPYJPT[LYWLͰ৮ͬͯΈΔ͜ͱ͕Ͱ͖·͢ w 3FEVYͲ͏ͳΔͷʁ w ಛʹؔͳ͍͚ͲɺIUUQTHJUIVCDPNSFBDUKTSFBDUSFEVYJTTVFT Ͱ͍ٞͯ͠·͢ Question