Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

TSLab【第7回 React勉強会】パフォーマンス最適化

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

当記事はTSLab・React定例会のレポート記事になります!

はじめに

私が運営しているTSLabの第7回・React勉強会の実施ログとなります。
第7回のテーマは【メモ化とパフォーマンスの最適化】
今回もReactおじさんに講師をして頂きました!
@react_nextjs Twitter
本当にありがとうございます!

勉強会内容

今回はReactのパフォーマンス面のお話になります。
レンダリングの仕組みから始まり、コンポーネントをメモ化する関数の解説をして頂きました。
具体的な内容は下記のドキュメントにまとまっているので気になる方はご覧ください。
https://github.com/shogo4131/TSLab-react-study/blob/main/doc/%E7%AC%AC7%E5%9B%9E%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9(%E3%83%A1%E3%83%A2%E5%8C%96)/doc.md

サマリー

今回触れたのは下記の機能になります。

  • React.memo
  • useCallback
  • useMemo

これらはコンポーネント内のDOMや関数を無駄に再生成(再レンダリング)しないようReactが公式に提供している機能。
使った場合と使わなかった場合とで実際のDOMの差分を見ながら比較して頂きました。

React.memo

  • propsが変更されない限り最後のレンダリング結果を再利用させる高階コンポーネント

React の最上位 API – React ユーザインターフェース構築のための JavaScript ライブラリ

useCallback

  • 関数の再生成を防ぐhooks
  • React.memoと併用しないと効果を発揮しない

フック API リファレンス – React ユーザインターフェース構築のための JavaScript ライブラリ

useMemo

  • 計算結果等をメモ化して無駄な処理をスキップさせるhooks

フック API リファレンス – React ユーザインターフェース構築のための JavaScript ライブラリ

ディスカッション内容

  • それぞれのパフォーマンス最適化関数を使うタイミング
  • とりあえず全てのコンポーネント/関数をメモ化するか否か
  • 初めからパフォーマンスを考慮して実装するか否か

さいごに

React勉強会シリーズ第7弾終了!
私自身、脳死でメモ化をしていたので、実際に使うシーンや必要性について学べたのでとても良かったです!
参加者同士でもとりあえず全てメモ化派遅くなってから考える派一旦動くものを作って後で調整派でざっくり分かれていたのが印象的でした。(ここは宗教論争になるので結論は控えようと思います。)
こればっかりは実際に動かしてみて速度計測してみないとわからないので、場数を踏みましょう!以上!って感じですね。
ということで、簡単なまとめになります!
最後までご覧くださりありがとうございました!