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会)での登壇資料です

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

    View Slide

  2. View Slide

  3. React.lazyとSuspenseって?
    React 16.6から追加された非同期処理やLazy Load
    をサポートする機能
    Suspense
    - ・・・dynamic importが完了するまで違う要素
    を表示するコンポーネント
    React.lazy
    - ・・・コンポーネントをdynamic importするAPI
    @loadable/component を使おう
    SSRには未対応
    ただし... なので注意

    View Slide

  4. 従来のLazy Load

    View Slide

  5. React.lazyとSusepense

    を使ってLazy Loadをする

    View Slide

  6. React.lazyとSusepenseを使う

    View Slide

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

    View Slide

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

    children・・・dynamic importする要素

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide