起こった問題

Reactでグラフを表示するライブラリを用いて、現在の状態をリアルタイムで表示するアプリケーションを作ったが、いかにも描画が追いついてなさそうな感じになった。

原因

グラフ以外の部分は普通に描画できているのでストア側でなんとかする必要はない。
だから問題のコンポーネントだけ描画回数を制限すれば良い。

いろいろ探したけど、良さそうな実現方法を見つけることができなかった。
だから作ることにした。

import throttle from 'react-throttle-render';
const wrappedComponent = throttle(component, 50);

これで、このcomponentは最低50msの間隔を空けて更新されるようになる。

shouldComponentUpdateでいろいろやっているだけで、特殊なことは何もしていない。

バイト先で「Reactでグラフを表示するライブラリを用いて、現在の状態をリアルタイムで表示するアプリケーション」を量産していて、これからも作り続けていくことになりそうなのでパッケージ化した。

一応、テンポが良い記事を目指して書いてみたつもり。（あまりたくさん書きたくなかっただけ。）