React.lazyとSuspenseで行うLazy Load

React.lazyとSuspenseで行う Lazy Load React.js meetup #7

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の体験よき

ご静聴ありがとうございました！

React.lazyとSuspenseで行うLazy Load

React.lazyとSuspenseで行うLazy Load

camcam_lemon

More Decks by camcam_lemon

Other Decks in Programming

Featured

Transcript