ReactのuseMemoとは？shouldComponentUpdateを学び理解してみた。

本日の記事では、useMemoとshouldComponentUpdateについて解説します。

Hooksでは、shouldComponentUpdateの機能をuseMemoで再現できますので、

両方について、よく分かってない人は参考になるメモだと思います。

そもそもshouldComponentUpdateとは

まず、shouldComponentUpdateを知るためには、PureComponentを知る必要があります。

Component と PureComponentの違いは、Componentが更新される時に、shouldComponentUpdateを貫通するか否かという風に考えればいいです。

だから、propsと stateが常に変化していれば、PureComponentを使わず、Component使えばいいし、propsと stateがあまり変わらなければ、PureComponentを使えばいいです。

第一、React自体VirtualDOM機構で差分しかrenderされず性能を保証してくれるため、初心者は気にせずComponentを使用しても問題ないということです。

つまり、shouldComponentUpdateっていうのは、render関数をなるべく発火させる回数を減らすために、

もしもstateが変わっても画面を再描画させる必要ないものがあった場合に、再描画をさせない処理を描けるっていうことですよね。

じゃあ、HooksでuseMemoを使うとして、何を目指すのかというとuseMemoはパフォーマンスの改善のために使うということであり、

useEffectを別に使わなくてもいいレベルの処理に、あえてuseMemoを使うという感覚を持てばいいと思っています。

shouldComponentUpdateでは比較が 浅い比較(shallow-Equal) がされるので、

オブジェクトのプロパティが同じでも、参照が違う場合、勝手に不本意に再レンダリングされたり

逆に、 Immutable規則を守らないとrenderされなかったりするので注意です。