ReactでWebアプリケーションを作るとサーバサイドの感覚でスムーズに開発ができます。しかしそれでもUI、UX周りになると気にしなければならないことも多数あります。 その一つとして長大なリストがあります。大量のDOMを表示したりスクロールすると時間がかかってしまうものです。それを改善してくれるのがReact Virtualizedです。

React Virtualizedの使い方

デモの画面です。一覧表示のコンポーネントが並んでいます。

実際に使っているところです。大量のデータを一気に表示したり、スクロールや行を指定したジャンプができるようになっています。

React Virtualizedでは一行あたりの高さを変えたり、ソートすることもできます。様々な場面で使えそうなライブラリです。

React VirtualizedはReact/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

react-virtualized bvaughn/react-virtualized