React.lazyを他コンポーネントに定義した札を下げています

Transcript

1. React.lazyを他コンポーネントに 定義した札を下げています SAPPORO ENGINEER BASE #03 nmemoto
2. 自己紹介 nmemoto 好きな藤井風の曲: 花、まつり、燃えよ
3. フロントエンドカンファレンス北海道2024ありがとう https://www.frontend-conf.jp/ あの入口の写真とってなかったorz
4. 今日は誰にもツッコまれなかったこの件をお話します https://twitter.com/nmemoto/status/1827146161301729676
5. 前提知識
6. React Web とネイティブユーザインターフェースのためのライブラリ https://ja.react.dev/ 今日はクライアントサイドの話
7. React.Suspense >子要素が読み込みを完了するまで フォールバックを表示させることがで きます。 https://ja.react.dev/reference/react/Suspense
8. React.lazy >コンポーネントのコードの読み込みを、初めてレンダーされるときまで遅延させる https://ja.react.dev/reference/react/lazy#usage lazyコンポーネントと呼 ぶことにします lazyコンポーネントは必 要になったらレンダー開 始
9. 本題
10. 何が起こった 5秒に1回カウントして表示するだけな のに数百回console.logが出力
11. 何が起こった 5秒に1回カウントして表示するだけな のに数百回console.logが出力 lazyコンポーネントを SimpleFailの中に定義 してしまった
12. こうすると意図通りになった lazyコンポーネントを SimpleFailの外に定義 した
13. なぜ発生するのか 1. countが1増える 2. SimpleFailコンポーネントの再 レンダリングが発生する 3. LazyComponent再作成 a. 新しいPromise作成 4. Suspense再レンダリング施行 5. SimpleFailコンポーネントのの 再レンダリングが発生する a. 2に戻る 1 2 3 4 5
14. なぜ発生するのか 1. countが1増える 2. SimpleFailコンポーネントの再 レンダリングが発生する 3. LazyComponent再作成 a. 新しいPromise作成 4. Suspense再レンダリング施行 5. SimpleFailコンポーネントのの 再レンダリングが発生する a. 2に戻る ＿人人人人人人人人人人＿ ＞　無限ループ発生！　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣ 1 2 3 4 5
15. Suspenseの境界を含むコンポーネント全体で 再レンダリング施行が必要な理由 1. countが1増える 2. SimpleFailコンポーネントの再 レンダリングが発生する 3. LazyComponent再作成 a. 新しいPromise作成 4. Suspense再レンダリング施行 5. SimpleFailコンポーネントのの 再レンダリングが発生する a. 2に戻る ＿人人人人人人人人人人＿ ＞　無限ループ発生！　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣ Suspenseの内部だけの状態更新で よいのでは？ SimpleFailコンポーネント全体の再 レンダリングいらないのでは？ 思ってた影響範囲 実際の影響範囲
16. Suspenseの境界を含むコンポーネント全体で 再レンダリング施行が必要な理由 1. countが1増える 2. SimpleFailコンポーネントの再 レンダリングが発生する 3. LazyComponent再作成 a. 新しいPromise作成 4. Suspense再レンダリング施行 5. SimpleFailコンポーネントのの 再レンダリングが発生する a. 2に戻る ＿人人人人人人人人人人＿ ＞　無限ループ発生！　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣ Suspenseの内部だけの状態更新で よいのでは？ SimpleFailコンポーネント全体の再 レンダリングいらないのでは？ 思ってた影響範囲 実際の影響範囲 Suspenseより上の状態変化が Suspense内 部のコンポーネントに影響を与える可能性が あるため (らしい、ここは自信がないので伸びしろ )
17. ドキュメントを見ると https://ja.react.dev/reference/react/lazy#troubleshooting
18. ドキュメントを見ると https://ja.react.dev/reference/react/lazy#troubleshooting
19. ちゃんと書いてあった ＼(^o^)／
20. まとめ • React.lazyはコンポーネントの外部に定義しましょう • Reactのレンダリングプロセス理解したい