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
950
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
650
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
560
Software Architecture
hschwentner
6
2.1k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
210
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
180
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
190
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Designing Experiences People Love
moore
140
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How STYLIGHT went responsive
nonsquared
98
5.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Embracing the Ebb and Flow
colly
84
4.6k
Code Reviewing Like a Champion
maltzj
521
39k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
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の体験よき
ご静聴ありがとうございました!