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

React
  • URLをコピーしました!
目次

はじめに

私が運営しているTSLabの第7回・React勉強会の実施ログとなります。

第7回のテーマは【メモ化とパフォーマンスの最適化】

今回もReactおじさん(Twitter)に講師をして頂きました!

本当にありがとうございます!


前回の勉強会内容が気になる方は下記の記事も合わせてご覧くださいませ。

勉強会内容

今回はReactのパフォーマンス面のお話になります。

レンダリングの仕組みから始まり、コンポーネントをメモ化する関数の解説をして頂きました。

具体的な内容は下記のドキュメントにまとまっているので気になる方はご覧ください。

サマリー

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

  • React.memo
  • useCallback
  • useMemo

これらはコンポーネント内のDOMや関数を無駄に再生成(再レンダリング)しないようReactが公式に提供している機能

使った場合と使わなかった場合とで実際のDOMの差分を見ながら比較して頂きました。

React.memo

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

useCallback

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

useMemo

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

ディスカッション内容

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

さいごに

React勉強会シリーズ第7弾終了!

私自身、脳死でメモ化をしていたので、実際に使うシーンや必要性について学べたのでとても良かったです!

参加者同士でもとりあえず全てメモ化派遅くなってから考える派一旦動くものを作って後で調整派でざっくり分かれていたのが印象的でした。(ここは宗教論争になるので結論は控えようと思います。)

こればっかりは実際に動かしてみて速度計測してみないとわからないので、場数を踏みましょう!以上!って感じですね。

ということで、簡単なまとめになります!

最後までご覧くださりありがとうございました!

React

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次