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
470
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
要素のサイズを変えずに押しやすくする
lemon
0
33
iOSのキーボード入力ビューをカスタマイズする
lemon
0
180
視え方と文字の大きさ
lemon
1
370
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.8k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
940
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
2.9k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
150
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
110
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
110
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
240
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
310
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
4k
技術を根付かせる / How to make technology take root
kubode
1
110
ErdMap: Thinking about a map for Rails applications
makicamel
1
1.2k
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
200
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
110
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
200
Featured
See All Featured
Navigating Team Friction
lara
183
15k
How to Ace a Technical Interview
jacobian
276
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
Writing Fast Ruby
sferik
628
61k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
KATA
mclloyd
29
14k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Gamification - CAS2011
davidbonilla
80
5.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Music & Morning Musume
bryan
46
6.3k
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の体験よき
ご静聴ありがとうございました!