React.js meetup #7 (LT会)での登壇資料です
React.lazyとSuspenseで行うLazy LoadReact.js meetup #7
View Slide
React.lazyとSuspenseって?React 16.6から追加された非同期処理やLazy Loadをサポートする機能Suspense- ・・・dynamic importが完了するまで違う要素を表示するコンポーネントReact.lazy- ・・・コンポーネントをdynamic importするAPI@loadable/component を使おうSSRには未対応ただし... なので注意
従来のLazy Load
React.lazyとSusepenseを使ってLazy Loadをする
React.lazyとSusepenseを使う
React.lazyとSusepenseを使うコンポーネントの外側でReact.lazyでdynamic importする
React.lazyとSusepenseを使うfallback・・・ロード中に表示する要素children・・・dynamic importする要素
めちゃくちゃ簡潔に書けるぞ!
もっと動的にdynamic importしてみよう
やりたいこと2 React.lazyとSuspenseを使うのは1回3 ついでにbundleもわけよう1 propsからimportする要素を決める
マウント時に1回だけReact.lazyでコンポーネントを取得するように処理を行う
undefinedにすると無限ループしてしまうdepsには空配列を指定(必要であればprops)
webpackChunkNameに [request] を指定するとtypeに対応するファイルを別にバンドルする
Formがnullの時があるので三項演算子で判定してからSuspenseを返すようにしている
まとめ1 custom hooksによる責務の分離2 可読性の向上Hooksでより良い体験をpropsによる動的かつ汎用的な操作React.lazyとSuspenseの体験よき
ご静聴ありがとうございました!