Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

従来のLazy Load

Slide 5

Slide 5 text

React.lazyとSusepense を使ってLazy Loadをする

Slide 6

Slide 6 text

React.lazyとSusepenseを使う

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

めちゃくちゃ簡潔に書けるぞ！

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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