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
39
iOSのキーボード入力ビューをカスタマイズする
lemon
0
190
視え方と文字の大きさ
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
GAEログのコスト削減
mot_techtalk
0
120
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
9
3.4k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
180
sappoRo.R #12 初心者セッション
kosugitti
0
240
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
190
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
WebDriver BiDiとは何なのか
yotahada3
1
140
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
240
最近のVS Codeで気になるニュース 2025/01
74th
1
260
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
530
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
720
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.1k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Unsuck your backbone
ammeep
669
57k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
The World Runs on Bad Software
bkeepers
PRO
67
11k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
A better future with KSS
kneath
238
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
430
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の体験よき
ご静聴ありがとうございました!