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
32
iOSのキーボード入力ビューをカスタマイズする
lemon
0
180
視え方と文字の大きさ
lemon
1
370
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
250
フロントエンドにおけるアーキテクチャとの向き合い方
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
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
140
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
290
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
520
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
610
Оптимизируем производительность блока Казначейство
lamodatech
0
920
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
26
3k
HTML/CSS超絶浅い説明
yuki0329
0
180
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
2
150
テストケースの名前はどうつけるべきか?
orgachem
PRO
1
290
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
980
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
6
690
Flatt Security XSS Challenge 解答・解説
flatt_security
0
660
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
The Invisible Side of Design
smashingmag
299
50k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
We Have a Design System, Now What?
morganepeng
51
7.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Speed Design
sergeychernyshev
25
730
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
950
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
860
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Embracing the Ebb and Flow
colly
84
4.5k
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の体験よき
ご静聴ありがとうございました!