Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5分でわかる React "Suspense"

Kento Moriwaki
March 20, 2018
Programming
3
1.4k

5分でわかる React "Suspense"

Roppongi.js #1

Kento Moriwaki

March 20, 2018
Tweet

More Decks by Kento Moriwaki

See All by Kento Moriwaki
わかった気になれる CRDT を使った共同編集
kentomoriwaki
1
320
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
2.9k
ReactでWebとNativeの共通UIライブラリを作ろう
kentomoriwaki
0
810
BFFを導入しなかった理由
kentomoriwaki
4
11k
TypeScript in Wantedly
kentomoriwaki
2
540
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
7.9k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
59k
React速習会@Wantedly
kentomoriwaki
1
290

Other Decks in Programming

See All in Programming
Nest アプリケーションの基盤となる仕組みを見直す
lightnet328
0
170
The Lesser-Known Kotlin Features
antonarhipov
0
270
サーバーと同期してリアルタイムに更新する画面を実装する
rizumi
2
390
スクールでPHPとLaravelを学んでSymfonyの会社に就職してみた
kunihikokitamura
0
160
iOS ライブラリをセルフサービスで生成する仕組み
junkpiano
2
430
react-reconcilerでオレオレReact Nativeを作ろう！
kwzr
0
450
iOSのウィジェットでも猫走らせたい / iOSDC Japan 2022 Day2 Unconference
kyome22
3
520
話を聞き出す技術
murabayashi
6
1.8k
比較演算を壊してみる / php-break-comparison
yammerjp
1
170
PHPからC#のライブラリを呼べるようにしたdotnet_ffiを趣味でつくってみた
pgito
0
190
可觀測性(Observability)的實踐
marcustung
0
1.6k
Attacking web without JS - CSS injection
aszx87410
0
1.9k

Featured

See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.7k
How to train your dragon (web standard)
notwaldorf
62
4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Fireside Chat
paigeccino
14
1.5k
A designer walks into a library…
pauljervisheath
197
16k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
12
5k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
174
8.7k
How STYLIGHT went responsive
nonsquared
85
4k
GraphQLとの向き合い方2022年版
quramy
18
8.9k

Transcript

  1. ©2018 Wantedly, Inc. 2018.3.20 - ෼ͰΘ͔Δ 3FBDU4VTQFOTF 3PQQPOHJKT ,FOUP.PSJXBLJ @kento_trans_lu

  2. ©2018 Wantedly, Inc. ͜ͱͷ࢝·Γ͸ɺ͋ΔπΠʔτͩͬͨɻ Reactͷ։ൃऀ @dan_abaramov

  3. ©2018 Wantedly, Inc. ଓ͚ͯɺ

  4. ©2018 Wantedly, Inc. +4$POG*DFMBOEͰൃද͞Εͨͷ͕ɺ ͦͷπΠʔτ͔Βिؒޙɻ https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

  5. ©2018 Wantedly, Inc. 3FBDU4VTQFOTF  5JNF4MJDJOH

  6. ©2018 Wantedly, Inc. 3FBDU4VTQFOTF  5JNF4MJDJOH ࠓ೔͸ͪ͜ΒΛগ͚ͩ͠঺հ ͜Ε͔Β࿩͢͜ͱ͸ɺ·ͩϦϦʔε΋͞Ε͍ͯͳ͍͠ɺ ֬ఆͨ͠৘ใͰ΋ͳ͍͜ͱΛɺྃ͝ঝ͍ͩ͘͞

  7. ©2018 Wantedly, Inc. w ඇಉظ௨৴ͳͲͷະܾఆͳঢ়ଶΛѻ͏ͨΊͷ֓೦ w ༷ʑͳωοτ؀ڥͷϢʔβʔʹૉ੖Β͍͠69Λఏ ڙ͢ΔͨΊʹ࡞ΒΕͨ w 4VTQFOTFͱ͍͏໊લͷԿ͔͕ϦϦʔε͞ΕΔΘ

    ͚Ͱ͸ͳ͍ React Suspenseͱ͸ɺ

  8. ©2018 Wantedly, Inc. ·ͣ͸Α͋͘Δඇಉظ௨৴͔Β

  9. ©2018 Wantedly, Inc. Suspense͕͋Δͱ͖

  10. ©2018 Wantedly, Inc. simple-cache-provider? simple-cache-providerΛ࢖Θͳ͍ྫ

  11. ©2018 Wantedly, Inc. w SFOEFSதʹ1SPNJTFΛ౤͛Δ͜ͱͰɺ·ͩදࣔ ͷ׬͕ྃͰ͖ͳ͍͜ͱΛڭ͑Δɻ w ͦͷ1SPNJTF͕SFTPMWF͞ΕͨλΠϛϯάͰɺ
 ΋͏Ұ౓SFOEFS͕૸Δ PromiseΛthrowͨ͠!?

  12. ©2018 Wantedly, Inc. React.Timeout PromiseΛthrow͢ΔComponentΛϥοϓͯ͠࢖͏ɻ Ұఆ࣌ؒҎ্ͨͬͨΒSpinnerΛදࣔͯ͠ΈΔɻ

  13. ©2018 Wantedly, Inc. w "1*ϦΫΤετΛαΫαΫ͔͚Δ w %ZOBNJDJNQPSU΋αΫαΫ͔͚Δ w ඇಉظ௨৴Λ͢Δίϯϙʔωϯτ΋ɺ4UBUFMFTT GVODUJPOBMDPNQPOFOUͰ͔͚Δ

    Α͘ͳΔ͜ͱ

  14. ©2018 Wantedly, Inc. w ͍͔ͭΒ࢖͑Δͷʁ w ࣍ظWFSTJPOͷ͔Ͱ࢖͑Δͱ৴͍ͯ͡·͢ w ৮ͬͯΈ͍ͨΜ͚ͩͲ w

    IUUQTDPEFTBOECPYJPT[LYWLͰ৮ͬͯΈΔ͜ͱ͕Ͱ͖·͢ w 3FEVYͲ͏ͳΔͷʁ w ಛʹؔ܎͸ͳ͍͚ͲɺIUUQTHJUIVCDPNSFBDUKTSFBDUSFEVYJTTVFT Ͱٞ࿦͍ͯ͠·͢ Question