Closed origamium closed 6 years ago
recomposeのpure, onlyUpdateForKeysとStateless Functional ComponentsのコンボのせいでPerformanceを計測してもUnknownとしか表示されず、まあContentの表示だろうという強い確信があります
https://github.com/ankeetmaini/react-infinite-scroll-component とかのinfinite scrollをつけてやれば改善しそうです
ツイートだけでなく、タイムラインも際限なく増やすと動作が重くなると思われる。タイムラインのContent Listだけでなく、Timeline ViewにもInfinite scrollをつけるとよさそうです。
Virtualizeしたら2桁ミリ秒までレンダリングを短縮できました。
それでも保持しているContentの数が100を超えると若干のもたつきが発生しますし、そもそもmaterial-uiコンポーネントのマウントコストがかなりかかっている模様。ただの文字列程度、そのままぶちこんでしまうがよろしいのでは
レンダリング時間に関しては一応の解決を見たので閉じます。
恐らくTimelineに表示するContentの数が増えるに連れてpure()によるshallow equalのコストがものすごいことになってるのが悪い。保管するデータの数を制限するか、表示するデータの数を制限すべきです。