起こった問題
Reactでグラフを表示するライブラリを用いて、現在の状態をリアルタイムで表示するアプリケーションを作ったが、いかにも描画が追いついてなさそうな感じになった。
原因
- ライブラリの描画コストが高すぎる。
- Propsの変更頻度が割と高い。
解決策
グラフ以外の部分は普通に描画できているのでストア側でなんとかする必要はない。
だから問題のコンポーネントだけ描画回数を制限すれば良い。
調査
いろいろ探したけど、良さそうな実現方法を見つけることができなかった。
だから作ることにした。
作った
import throttle from 'react-throttle-render';
const wrappedComponent = throttle(component, 50);
これで、このcomponentは最低50msの間隔を空けて更新されるようになる。
やってること
shouldComponentUpdateでいろいろやっているだけで、特殊なことは何もしていない。
パッケージ化の理由
バイト先で「Reactでグラフを表示するライブラリを用いて、現在の状態をリアルタイムで表示するアプリケーション」を量産していて、これからも作り続けていくことになりそうなのでパッケージ化した。
どういう時に役に立つか
- 特定のコンポーネントだけ重い時。
- 単純に負荷軽減をしたい時。
その他あまり関係のないこと
一応、テンポが良い記事を目指して書いてみたつもり。（あまりたくさん書きたくなかっただけ。）
リンク
npm: 
github: ryo33/react-throttle-render