レンダリング回数削減tips

フロントエンドのパフォーマンスチューニングはユーザー体験向上のため
に非常に重要ですよね。今回はその中でもレンダリング回数をいかに削減できるかについて話したいと思います。

2021/03/11 【Hedge #10】フロントエンドLT会にて登壇した内容になります！
https://noengineering-nolife.connpass.com/event/203837/

Transcript

1. レンダリング回数削減Tips 【Hedge #10】フロントエンドLT会 11. Mar. 2021 - Sho Kanamaru (@show_kanamaru)
2. 2018年1月より、株式会社POLというスタートアップで LabBaseというプロダクトの開発を担当しています． フロントエンド(React)、バックエンド(Java)両方書いてます． 月1でフットサルやってるのでぜひ一緒にやりましょう！ 自己紹介 金丸 翔 @show_kanamaru
3. 科学技術人材のキャリアプラットフォーム
 （オンラインイベント） 
 （第二新卒/中途）
 （新卒）

4. 目次 1. useMemo, useCallback 2. context（stateとdispatchの分離） 3. レンダリングの可視化
5. 目次 動くものとコードを見ながら説明していきます！
6. 1. useMemo, useCallback
7. コードを見てみよう！ Parent.tsx
8. コードを見てみよう！ ButtonA.tsx ChildA.tsx
9. 全てのコンポーネントがレンダリングされる Parentで全部管理してるから、 子コンポーネントが全て再レン ダリングされてるな・・・
10. memo化してみる コンポーネントが同じpropsを与えられたと き、結果を記憶してパフォーマンスを向上させ る。つまり、Reactはコンポーネントのレン ダーをスキップし、最後のレンダー結果を再利 用します。(React公式ドキュメント)
11. React.memo使ったら・・・ それぞれのChildがレンダリング されなくなった！！！
12. useCallbackを使ってみる useCallbackはそのコールバックをメ モ化したものを返し、その関数は依存 配列の要素のいずれかが変化した場合 にのみ変化します。(React公式ドキュ メント)
13. useCallbackを使ったら・・・ Button, Childがレンダリング されなくなった！！！
14. countAが奇数か偶数かを調べる
15. countAが奇数か偶数かを調べる Bのstateが変わったときも isEvenが呼ばれているな・・・
16. useMemoを使ってみる useMemoは依存配列の要素のいずれ かが変化した場合にのみメモ化された 値を再計算します。この最適化により レンダー毎に高価な計算が実行される のを避けることができます。 (React公式ドキュメント)
17. useMemoを使ったら・・・ Bのstateが変更されても isEvenが呼ばれなくなった！
18. 2. context (stateとdispatchの分離)
19. 再レンダリングは減らせたものの・・・ memo化を常に 考慮するの大変だなあ 機能が複雑化すると、propsのバ ケツリレーが発生しそうだなあ 親コンポーネントがどんどん膨ら んできそうだなあ
20. 出典 ：https://www.freecodecamp.org/news/clever-react-context-tricks-using-typescript-not-redux-7e2b9c7e5bf6/
21. context コンテクストはツリーの各階層で明示的にプロパティを渡すことなく、 コンポーネント間でこれらの様な値を共有する方法を提供します。 (React公式ドキュメント)
22. contextの使い方 ①createContext ②Provider ③Consumer or useContext
23. contextを使ううえで大事なこと 状態参照系(state)と状態更新系(dispatch)で contextを分割する
24. contextを分割しなかった場合 ButtonAでは更新ハンドラだけを 利用しているだけなのに・・・
25. contextを分割しなかった場合 ButtonAもレンダリングされて る。。ChildAだけをレンダリング したいな・・・
26. contextを使ううえで大事なこと 状態参照系(state)と状態更新系(dispatch)で contextを分割する
27. contextを分割すると・・・ ChildAだけがレンダリングされ るようになった！！！
28. 3. レンダリングの可視化
29. レンダリングの可視化① ①React Developer Toolsを追加 ②「Chrome DevTools」→「Components」 ③Highlight updates when components render. にチェック
30. レンダリングの可視化① 再レンダリングの頻度が可視化される ※差分レンダリングの頻度が低いと寒色（青），高いと暖色（赤）の枠線が表示
31. レンダリングの可視化② why-did-you-render 不要な再レンダリングが行われているかどうかを判定するためのライブラリ 出典 ：https://github.com/welldone-software/why-did-you-render
32. Thanks ! 👋