reactレンダリング備忘録

レンダリングとは何か？

コンピュータプログラムを用い、もととなる数値データを計算し表示を行うこと

多くの場合web界隈では、ブラウザによるソースコードを画面へ描写することを指します。
ただし、reactが絡むとそうとは限りません。react内でもレンダリングプロセスがあります。図示すると以下になります。

それぞれのレンダリングの意味

react

propsとstateをもとに、DOMに変更があるか計算する（Reconciliation）

ブラウザ

ソースコード(html,css,javascriptなど)を画面へ描写すること

reactのライフサイクル

下の図のように、レンダリングとDOMの更新が終わったらuseLayoutEffectとuseEffectが呼び出されます。
useLayoutEffectはDOMの更新前、useEffectは更新後です。
https://github.com/Wavez/react-hooks-lifecycle から拝借

全てのコンポーネントを memo するべきですか？

基本的にしなくていい。レンダリングが遅いときに使う。
個人的には、関数、object、arrayはメモ化してます。計算に時間かかるものもメモ化してます。