React.lazyとSuspenseで行うLazy Load

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

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