Implementing a performant infinite scrolling list with React and TypeScript

Currently building a web application with React and TypeScript, the requested feature is to display a large list of data items fetched from a server. To optimize the performance and user experience, I’d like to implement an infinite scrolling mechanism that loads more items when the user reaches the end of the list.

The main requirements are:

1. Implementing infinite scrolling efficiently in a React functional component with TypeScript.
2. Proper handling of data fetching from the server and state updates as the user scrolls.

Here’s a simplified version of the current list component:

import React, { useState, useEffect } from 'react';

interface ListItemProps {
  id: number;
  title: string;
}

const ListItem: React.FC<ListItemProps> = ({ id, title }) => (
  <div className="list-item">
    {id}. {title}
  </div>
);

interface ListProps {
  fetchData: (start: number, limit: number) => Promise<ListItemProps[]>;
}

export const InfiniteScrollList: React.FC<ListProps> = ({ fetchData }) => {
  const [items, setItems] = useState<ListItemProps[]>([]);

  useEffect(() => {
    // Initial fetch on component mount
    fetchData(0, 20).then((data) => {
      setItems(data);
    });
  }, [fetchData]);

  return (
    <div className="list-container">
      {items.map((item) => (
        <ListItem key={item.id} id={item.id} title={item.title} />
      ))}
    </div>
  );
};

In this example, the fetchData function fetches a specified number of items from the server, starting from a given index. The initial fetch retrieves the first 20 items when the component mounts. The goal is to modify this component to support infinite scrolling and efficiently load more items as needed.