Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.lazyとSuspenseで行うLazy Load

A3ec73809a2105b3a9a829f983f6587e?s=47 camcam_lemon
May 27, 2019
Programming
2
320

React.lazyとSuspenseで行うLazy Load

React.js meetup #7 (LT会)での登壇資料です

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

May 27, 2019
Tweet

More Decks by camcam_lemon

See All by camcam_lemon
Yarn WorkSpaces × React Nativeの環境構築
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
77
フロントエンドにおけるアーキテクチャとの向き合い方
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
9
4k
UI/UXデザイナーがデザインしてるもの
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
2
290
react-reduxで追加されたHooks APIの良い所と使い方
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
5
820
ESLintで始めるTypeScriptの静的解析
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
8
1.5k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
6
1.1k
なんとなくで書かないReact/ReduxのテストTips
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
240
bundleサイズ2MBの社内サイト大改修譚.pdf
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
200
反復処理に速さを求めて
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
1
130

Other Decks in Programming

See All in Programming
それ全部エラーメッセージに書いてあるよ!〜独学でPHPプログラミングが上達するたった一つの方法〜
B793da271a45d149b52f507bca9f137c?s=48 77web
1
150
Introduction to Property-Based Testing @ COSCUP 2022
Fd9f21969cd8a0cbf0b2f48a9af0cc28?s=48 cybai
1
150
NestJS_meetup_atamaplus
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
0
200
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
0
140
WindowsコンテナDojo：第6回 Red Hat OpenShift入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
160
Google IO 2022 社内LT会 / What's new in Android development tools
B65b9817b6cdb9bc923b82657a3162b7?s=48 shingo_kobayashi
0
370
動画合成アーキテクチャを実装してみて
D5b3791309c8a03d37f05d238ded370d?s=48 satorunooshie
0
540
ベストプラクティス・ドリフト
A15b71ae6fbdecb3216bdcba552d9a77?s=48 sssssssssssshhhhhhhhhh
1
200
Regular expressions basics/正規表現の基本
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
6
250
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
120
設計の考え方とやり方
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
46
25k
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.3k
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.7k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
3.1k
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.4k
The Power of CSS Pseudo Elements
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
47
4k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.4k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenintech
48
2.6k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
127
5.5k
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
5
2.5k

Transcript

  1. React.lazyとSuspenseで行う Lazy Load React.js meetup #7

  2. None

  3. React.lazyとSuspenseって？ React 16.6から追加された非同期処理やLazy Load をサポートする機能 Suspense - ・・・dynamic importが完了するまで違う要素 を表示するコンポーネント

    React.lazy - ・・・コンポーネントをdynamic importするAPI @loadable/component を使おう SSRには未対応 ただし... なので注意

  4. 従来のLazy Load

  5. React.lazyとSusepense を使ってLazy Loadをする

  6. React.lazyとSusepenseを使う

  7. React.lazyとSusepenseを使う コンポーネントの外側で React.lazyでdynamic importする

  8. React.lazyとSusepenseを使う fallback・・・ロード中に表示する要素 children・・・dynamic importする要素

  9. めちゃくちゃ簡潔に書けるぞ！

  10. もっと動的にdynamic import してみよう

  11. やりたいこと 2 React.lazyとSuspenseを使うのは1回 3 ついでにbundleもわけよう 1 propsからimportする要素を決める

  12. None

  13. マウント時に1回だけReact.lazyでコンポーネント を取得するように処理を行う

  14. undefinedにすると無限ループしてしまう depsには空配列を指定(必要であればprops)

  15. webpackChunkNameに [request] を指定すると typeに対応するファイルを別にバンドルする

  16. Formがnullの時があるので三項演算子で判定してから Suspenseを返すようにしている

  17. まとめ 1 custom hooksによる責務の分離 2 可読性の向上 Hooksでより良い体験を propsによる動的かつ汎用的な操作 React.lazyとSuspenseの体験よき

  18. ご静聴ありがとうございました！