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
React.lazyとSuspenseで行うLazy Load
Search
camcam_lemon
May 27, 2019
Programming
2
410
React.lazyとSuspenseで行うLazy Load
React.js meetup #7 (LT会)での登壇資料です
camcam_lemon
May 27, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
iOSのキーボード入力ビューをカスタマイズする
lemon
0
120
視え方と文字の大きさ
lemon
1
330
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
230
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.7k
UI/UXデザイナーがデザインしてるもの
lemon
2
300
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
900
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.4k
なんとなくで書かないReact/ReduxのテストTips
lemon
0
320
Other Decks in Programming
See All in Programming
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Activities at Cairo Library
cairolibrary720
0
1.2k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Code Review Best Practice
trishagee
58
16k
GitHub's CSS Performance
jonrohan
1026
450k
Designing the Hi-DPI Web
ddemaree
276
34k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Building Your Own Lightsaber
phodgson
101
5.9k
A designer walks into a library…
pauljervisheath
201
24k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Transcript
React.lazyとSuspenseで行う Lazy Load React.js meetup #7
None
React.lazyとSuspenseって? React 16.6から追加された非同期処理やLazy Load をサポートする機能 Suspense - ・・・dynamic importが完了するまで違う要素 を表示するコンポーネント
React.lazy - ・・・コンポーネントをdynamic importするAPI @loadable/component を使おう SSRには未対応 ただし... なので注意
従来のLazy Load
React.lazyとSusepense を使ってLazy Loadをする
React.lazyとSusepenseを使う
React.lazyとSusepenseを使う コンポーネントの外側で React.lazyでdynamic importする
React.lazyとSusepenseを使う fallback・・・ロード中に表示する要素 children・・・dynamic importする要素
めちゃくちゃ簡潔に書けるぞ!
もっと動的にdynamic import してみよう
やりたいこと 2 React.lazyとSuspenseを使うのは1回 3 ついでにbundleもわけよう 1 propsからimportする要素を決める
None
マウント時に1回だけReact.lazyでコンポーネント を取得するように処理を行う
undefinedにすると無限ループしてしまう depsには空配列を指定(必要であればprops)
webpackChunkNameに [request] を指定すると typeに対応するファイルを別にバンドルする
Formがnullの時があるので三項演算子で判定してから Suspenseを返すようにしている
まとめ 1 custom hooksによる責務の分離 2 可読性の向上 Hooksでより良い体験を propsによる動的かつ汎用的な操作 React.lazyとSuspenseの体験よき
ご静聴ありがとうございました!