React.memo とは

公式ドキュメント を見ると、

これは React.PureComponent に似ていますが、クラスではなく関数コンポーネント用です。

とあります。

つまり、 React.PureComponent を関数コンポーネントで実現するための手段らしいです。

React.PureComponent とは

公式ドキュメント を見ると、

React.PureComponent は React.Component と似ています。 両者の違いは React.Component が shouldComponentUpdate() を実装していないことに対し、 React.PureComponent は props と state を浅く (shallow) 比較することでそれを実装していることです。

とあります。

shouldComponentUpdate() によって、どういった変更があれば再描画するかを定義するようです。

追加でこの参考記事 を読んでみると、

PureComonentはprops及びstateの変更を検出した場合のみレンダリングを行います。 Messageコンポーネントではmessage propsの変更を察知し、必要分の更新を行うようになります。

とあります。

自分で再描画条件を定義できるので、無駄な再描画を省くことができ、パフォーマンス向上を期待できるんですね。

→ React.PureComponent を用いることでパフォーマンスを向上させることができるようです。
（参考記事内にもあるとおり銀の弾丸ではないようですが…）

浅い比較 とは

shouldComponentUpdate() は浅い比較によって変更検知を行う。

とありましたが、浅い比較とはなんでしょうか。
（shouldComponentUpdate() のデフォルトが浅い比較というだけで、オリジナルの比較方法を実装可能なようです）

さきほどの参考記事 にて説明されていました。

浅い比較というのは、簡潔に述べるとオブジェクトの参照先が同じであれば等しいと見なすことです。

参照先しか見ていないので、中身は見ていないということですね。
（このような実装なのは、React の思想として、props や state といったデータは immutable であるべきだとしているからだと思います）

ちなみに

ミューテート（変更）せずに新しいオブジェクトを作るには下記のようにして、新しいオブジェクトを作って返してやればいいようです。（参考 ）

Object.assign({}, prevState, {color: 'blue'});

React.memo 実践（していく予定）

React.memo の使い方は

• 公式ドキュメント
• 他の方のブログ記事

上記を見ればだいたいわかりそうです。

会社のプロジェクトに導入できそうなところあったら使ってみたいと思います💪