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
8
4.1k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.6k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
1.1k
BFFを導入しなかった理由
kentomoriwaki
4
13k
TypeScript in Wantedly
kentomoriwaki
2
710
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.6k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
74k
React速習会@Wantedly
kentomoriwaki
1
410
Other Decks in Programming
See All in Programming
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
Datadog Workflow Automation で圧倒的価値提供
showwin
1
230
PEPCは何を変えようとしていたのか
ken7253
3
270
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
280
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
310
GoとPHPのインターフェイスの違い
shimabox
2
210
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
910
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
430
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
330
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
Optimizing for Happiness
mojombo
376
70k
Building Applications with DynamoDB
mza
93
6.2k
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