Obake Engineer Blog

Reactのレンダリングに関する完全ガイド - Qiitaを読んだ上での要点メモ。

要点メモ

Reactデフォルト

• Reactのデフォルトの動作では、親コンポーネントがレンダリングされると、その中のすべての子コンポーネントを再帰的にレンダリングする
  • つまり、通常のレンダリングでは、Reactは "props が変更された "かどうかを気にしない
• Reactコンポーネントがそのレンダリング出力で前回と全く同じ要素参照を返す場合、Reactはその特定の子要素の再レンダリングをスキップする
  • つまり、レンダリングがスキップされたコンポーネント以下の子コンポーネントはレンダリングされない

Context API

• デフォルトでは、親コンポーネントのStateが更新されると、コンテキスト値を読み込んでいるかどうかに関わらず、その子孫のすべてが再レンダリングされる
  • なので、コンテキストプロバイダー直下のコンポーネントにはReact.memoを使うべき(propsの変更がなければレンダリングをスキップするため)
• Contextオブジェクトを分離すれば、別のContextオブジェクトの値更新時は、コンテキスト値を読み込んでいないコンポーネントのレンダリングは走らない
  • ConsumerがContextオブジェクトの一部の値だけを使用していたとしても、別の新しいコンテキスト値による更新をスキップする方法はない

React-Redux

• connectのラッパーコンポーネントは、常にPureComponent/React.memo()と同じように動作する
  • コンポーネントに渡す ”最終的に結合されたprops(merge Props)” が変更された場合にのみ、自分のコンポーネントをレンダリングする
• useSelectorは関数コンポーネントの内部で呼び出されるフック
  • そのため、親コンポーネントがレンダリングされる時に、 useSelectorはコンポーネントのレンダリングを止めることができない
  • 必要に応じてコンポーネントをReact.memo()でラップして、親コンポーネントによる不必要な再レンダリングを防ぐ必要がある

参考

• React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜 - Qiita

/post-13

Reactのレンダリングメモ