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.4k
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
5
2.7k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.3k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
950
BFFを導入しなかった理由
kentomoriwaki
4
12k
TypeScript in Wantedly
kentomoriwaki
2
600
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.3k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
74k
React速習会@Wantedly
kentomoriwaki
1
360
Other Decks in Programming
See All in Programming
What We Can Learn From OSS
inouehi
0
400
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
Milestoner
bkuhlmann
1
400
Hanami and htmx
bkuhlmann
0
190
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
120
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
300
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
雑に思考を整理する技術と効能
konifar
55
25k
PostmanでAPIの動作確認が楽になった話
h455h1
0
120
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Fireside Chat
paigeccino
20
2.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
RailsConf 2023
tenderlove
2
530
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Done Done
chrislema
178
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
Faster Mobile Websites
deanohume
297
30k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
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