React JS virtuall scroll

react-js-virtual-scroll-for-large-list.ts

import React from 'react'
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
import { useEffect, useRef, useState } from 'react';

export default function FooterVirtualScroll({ noMoreData, list }: { noMoreData: boolean; list: Array<any> }) {
  return (
    <div className='text-center py-4 text-gray-150'>
      {!noMoreData && list.length > 0 && (
        <>Loading ...</>
      )}
      {noMoreData && list.length > 0 && (
        <>No more data!</>
      )}
    </div>
  );
}


export default function TodoListScreen() {
  const list = useRef<any>();
  const [todoList, setTodoList] = useState<Array<any>>([]);
  const [noMoreData, setNoMoreData] = useState(false);

  const footerComponent = () => {
    return (
      <FooterVirtualScroll noMoreData={noMoreData} list={todoList} />
    );
  };

  function Row(
    index: number,
    todo: any,
  ) {
    return (
      <>
        <TodoView key={todo.id || index}  todo={todo} />
      </>
    );
  }

  function loadMore() {
    // Call Api for next page data 
    // come from api 
    const newTodosArray = [];

    if (newTodosArray.length > 0) {
      // Add new arrays
      const list = todoList.concat([]);
      setTodoList(list);
    } else {
      setNoMoreData(false);
    }
  }

  function handleEndReach() {
    if (!noMoreData) {
      loadMore();
    }
  }

  useEffect(() => {
    // Call Api and set Todo list 
    setTodoList([]);
  }, []);

  return (
    <div>
      <Virtuoso
        ref={list}
        data={todoList}
        endReached={handleEndReach}
        overscan={200}
        itemContent={Row}
        components={{ Footer: footerComponent }}
      />
    </div>
  )
}