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.6k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.7k
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
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Kiroで始めるAI-DLC
kaonash
2
580
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
190
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
2
140
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
320
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
420
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
How GitHub (no longer) Works
holman
315
140k
BBQ
matthewcrist
89
9.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Gamification - CAS2011
davidbonilla
81
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building an army of robots
kneath
306
46k
Docker and Python
trallard
45
3.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Building Adaptive Systems
keathley
43
2.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Navigating Team Friction
lara
189
15k
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