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 full-size slide

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

    View full-size slide

  3. 従来のLazy Load

    View full-size slide

  4. React.lazyとSusepense

    を使ってLazy Loadをする

    View full-size slide

  5. React.lazyとSusepenseを使う

    View full-size slide

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

    View full-size slide

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

    children・・・dynamic importする要素

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide