React-Virtuoso、React-Window、React-Virtualizedの３つを同じ記事データを使って実装比べをしてみました。3つとも複雑さはなく簡単に実装することができました。個人的には、React-Virtuosoがシンプルかつ要素の高さを自動で可変対応してくれる機能が備わっていて使いやすかったです。<h2 id="hb15b677c17">仮想スクロールを実装</h2>大量のダミーデータを使ってもよかったのですが、1200件記事（手持ちの記事30件×40）で実装しました。↓スクロールするとDOMが更新されていることが分かります。スルスル・サクサク動きます。

<h3 id="hfe5731c37c">React-Virtuoso</h3><a href="https://virtuoso.dev/" target="_blank" rel="noopener noreferrer nofollow">https://virtuoso.dev/</a>

import debounce from "lodash/debounce"; // lodashのdebounce関数を使う
import { Virtuoso } from "react-virtuoso";

const Filters = ({ posts }: PostProps) => {
 const [filter, setFilter] = useState("");
 const [filteredPosts, setFilteredPosts] = useState(posts);

 useEffect(() => {
 const delayedFilterPosts = debounce(() => {
 const filtered = posts.filter((post) =>
 post.title.toLowerCase().includes(filter.toLowerCase())
 );
 setFilteredPosts(filtered);
 }, 300);

 delayedFilterPosts();

 return () => {
 delayedFilterPosts.cancel();
 };
 }, [filter, posts]);

 const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
 setFilter(e.target.value);
 };

 return (
 <>
 <input
 type="text"
 placeholder="word..."
 value={filter}
 onChange={handleInputChange}
 style={inputText}
 />
 <Virtuoso
 style={list}
 data={filteredPosts}
 totalCount={filteredPosts.length}
 itemContent={(index, post) => (
 {post.title}
 )}
 />
 </>
 );
};
export default Filters;

<h3 id="h8cb5f3aa41">React-Window</h3>有名な仮想リストライブラリです。<a href="https://react-window.vercel.app/#/examples/list/fixed-size" target="_blank" rel="noopener noreferrer nofollow">https://react-window.vercel.app/#/examples/list/fixed-size</a>

import { FixedSizeList as List } from "react-window";

const Row = ({
 index,
 style,
}: {
 index: number;
 style: React.CSSProperties;
}) => {filteredPosts[index].title};

return (
 ～
 <List
 height={500}
 itemCount={filteredPosts.length}
 itemSize={30}
 width={"100%"}
 >
 {Row}
 </List>
 ～
)

<h3 id="h839d11de92">React-Virtualized</h3>React-windowと同じ方が制作されていて、<a href="https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized" target="_blank" rel="noopener noreferrer nofollow">React-Windowとの違い</a>も紹介されています。<a href="https://bvaughn.github.io/react-virtualized/#/components/Masonry" target="_blank" rel="noopener noreferrer nofollow">https://bvaughn.github.io/react-virtualized/#/components/Masonry</a>

import { List } from "react-virtualized";

const rowRenderer = ({
 index,
 key,
 style,
}: {
 index: number;
 key: string;
 style: React.CSSProperties;
}) => (
 <div key={key} style={style}>
 {filteredPosts[index].title}
 </div>
);

return (
 ～
 <List
 width={600}
 height={400}
 rowCount={filteredPosts.length}
 rowHeight={30}
 rowRenderer={rowRenderer}
 />
 ～
)

<h2 id="h1bb903a08e">&lt;input&gt;に入力したテキストで記事を絞り込む</h2>onChangeイベントを発生させるので、過剰に発生させないようにするためlodashのdebounce関数を使用して制限しました。

// debounce関数で処理を間引く
const delayedFilterPosts = debounce(() => {
  // フィルタリング処理
  const filtered = posts.filter((post) =>
    post.title.toLowerCase().includes(filter.toLowerCase())
  );
  setFilteredPosts(filtered);
}, 300); // 300msの遅延を設定

delayedFilterPosts(); // 初回レンダリング時に実行

debounce関数は、指定された関数を遅延させる関数を返します。この場合、300ミリ秒の遅延を設定しているので、delayedFilterPostsは300ミリ秒ごとに実行されます。これにより、filterPosts関数が短時間に連続して呼び出された場合に、最後の呼び出しのみが実際に実行され、過剰な処理を防ぎます。

<h2 id="heaa723eefe">ChatGPTに聞いてみた</h2><table><tbody><tr><th colspan="1" rowspan="1">機能 / ライブラリ</th><th colspan="1" rowspan="1">React-Virtualized</th><th colspan="1" rowspan="1">React-Window</th><th colspan="1" rowspan="1">React-Virtuoso</th></tr><tr><td colspan="1" rowspan="1">インストールの簡易さ</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td></tr><tr><td colspan="1" rowspan="1">コミュニティのサポート</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐</td></tr><tr><td colspan="1" rowspan="1">性能</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td></tr><tr><td colspan="1" rowspan="1">メモリ使用量</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td></tr><tr><td colspan="1" rowspan="1">カスタマイズ可能性</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐</td></tr><tr><td colspan="1" rowspan="1">レンダリングの柔軟性</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td></tr><tr><td colspan="1" rowspan="1">サポートされている コンポーネントの種類</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td></tr><tr><td colspan="1" rowspan="1">ドキュメントの質</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td></tr><tr><td colspan="1" rowspan="1">セルの可変高さサポート</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td></tr><tr><td colspan="1" rowspan="1">ライブラリのサイズ</td><td colspan="1" rowspan="1">⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td><td colspan="1" rowspan="1">⭐⭐⭐⭐</td></tr></tbody></table><h3 id="h088bd2a600">ChatGPTに聞いたデメリット</h3><h4 id="h839d11de92">React-Virtualized</h4><ul><li>メモリ使用量がやや多い</li><li>セルの再利用が不十分</li></ul><h4 id="h8cb5f3aa41">React-Window</h4><ul><li>セルの可変高さサポートがやや不十分</li><li>ライブラリのサイズがやや大きい</li></ul><h4 id="hfe5731c37c">React-Virtuoso</h4><ul><li>コミュニティのサポートが限られている</li></ul><h3 id="h6dc2e58b5f">他にもChatGPTに聞いてみた</h3>📏メモリ使用量が小さい順 React-Window　＜　React-Virtuoso　＜　React-Virtualized📚ライブラリのサイズが小さい順 React-Virtuoso　＜　React-Window　＜　React-Virtualized🌎普及度（推測だそうです） React-Window（2018年）＞ React-Virtualized（2015年）＞ React-Virtuoso（2020年） ※（）…最初のバージョン

📝参考<ul><li><a href="https://zenn.dev/tara_is_ok/articles/a955a9561516da" target="_blank" rel="noopener noreferrer nofollow">無限スクロールにはReact-Virtuosoが良さそう🧩</a></li><li><a href="https://github.com/bvaughn/react-window/issues/665" target="_blank" rel="noopener noreferrer nofollow">setting height of items for VariableSizeList itemSize is not working.</a></li><li><a href="https://virtuoso.dev/" target="_blank" rel="noopener noreferrer nofollow">React Virtuoso ドキュメント</a></li><li><a href="https://codesandbox.io/s/react-virtuoso-custom-scrollbar-mz4lg" target="_blank" rel="noopener noreferrer nofollow">react-virtuoso custom scrollbar</a></li></ul>