react-intersection-observerを使って初期描画を減らし高速化する
データをリストで表示する。データ数が多く、単純なリスト描画をすると初期描画に時間がかかる。わけアリでcursorのようにデータを逐次取得するような状態ではない。フロントエンド側で調整する。
イメージ以下のような構造
1<List>
2 {lists.map((item) => (
3 <Item item={item}/>
4 ))}
5</List>Intersection Observer API
端的に言うと、ある要素が別の要素（通常はviewport）との交差状況の変化を非同期に監視できる。これを使うことで、必要なときに描画の処理をすればよくなるため、初期描画が最適化される。
react-intersection-observer
useInViewを使う。遅延描画用のLazyItemコンポーネントを作る
1export const LazyItem: React.FC = () => {
2 const [ref, inView] = useInView({
3 triggerOnce: true,
4 rootMargin: "200px 0px",
5 });
6
7 return (
8 <div ref={ref}>
9 {inView ? <Item /> : <div style={{ height: "40px" }} />}
10 </div>
11 );
12};描画対象じゃないときは少し高さを持たせ、後続のitemが描画されないようにしている。これを使うことで遅延描画が達成