React.lazyとSuspenseで行うLazy Load

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

Transcript

1. React.lazyとSuspenseで行う Lazy Load React.js meetup #7
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する要素を決める
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. ご静聴ありがとうございました！