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

React.lazyとSuspenseで行うLazy Load

React.lazyとSuspenseで行うLazy Load

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

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

May 27, 2019
Tweet

More Decks by camcam_lemon

Other Decks in Programming

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. ご静聴ありがとうございました!