Reactでwhy-did-you-update

React

お前は何故更新されたんだ?

why-did-you-updateというReactのレンダリング状況をログ出力してくれるライブラリがあります。

github.com

使い方

アプリのソースコードに以下コードを書きます。どこでもいいです。
さしあたってはエントリーポイントとなるindex.jsか、ReactDOM.renderを最初に定義しているところに書けばいいのではと思います。

import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const {whyDidYouUpdate} = require('why-did-you-update');
  whyDidYouUpdate(React);
}

使ってみた

このようなログが出ます。Google Chrome Developer Toolなどから容易に確認出来ます。

https://camo.githubusercontent.com/7e36c77c0189e3de74c986611d51111c6d96585d/68747470733a2f2f692e696d6775722e636f6d2f4e6a49345059742e706e67

例をパクらさせて頂きましたが、実際に開発しているアプリケーションに適用するとかなりログが出ること出ること請け合いです。
レンダリング前後のprops, stateの値が確認しやすくなっています。

こいつらの値をshouldComponentUpdateの中で比較してレンダリングする/しないの判断をすることになるかと。
ただ、気をつけて欲しいのが、shouldComponentUpdateを既にコンポーネントに組みこんでいる場合、why-did-you-updateさんが空気を読んでくれます。
次からそのコンポーネントのログが出なくなっちゃいます。
仕組みとしてはAOPっぽい感じがしました。

まとめ

Reactで高パフォーマンス、快適なUXを出すにはいかにコンポーネントのレンダリングを減らすかにもかかっていると思うので、
why-did-you-updateは役立ちます。