Rendering duplicates with grid view and Infinite scroll.

[meetajhu]

Is there any issue with the following code. Questions are added a comments in the code with question mark. The <AnimatedItemsProvider /> is just a Context for managing state when rendering items with pop-in animation and stores the items that has already been animated. Even the commented debounce function very rarely there are duplicates rendered.

const emptyArray = [];
const emptyRenderItem = () => <></>;

export function VirtualizerInfinite({
  data = emptyArray,
  columns, //Do not assign default values to columns
  RenderItem = emptyRenderItem,
  renderItemProps,
  canFetchMore,
  fetchNextData,
  isLoading,
  listHeightClass,
  initialLoad,
  messageNoData = "No data is available",
  messageLastData = "You're all caught up 🎉",
  animate,
  showSpinner = true,
}) {
  const parentRef = useRef(null);

  const [width, setWidth] = useState(0);

  const screens = useBreakpoint();

  const columnCount = columns ?? getGridCount(screens);
  const rowCount = Math.ceil(data.length / columnCount);

  const rowVirtualizer = useVirtualizer({
    count: canFetchMore ? rowCount + 1 : rowCount,
    estimateSize: () => 170,
    getScrollElement: () => parentRef.current,
    overscan: 5, //<-- Without the below debounced function this overscan is rendering duplicate items. Setting it to '0' renders few duplicates where the data prop also contains the duplicates?
  });

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columnCount,
    getScrollElement: () => parentRef.current,
    estimateSize: useCallback(
      () => Math.ceil(width / columnCount),
      [width, columnCount]
    ),
    overscan: 0,
  });

  /* Adding last Row and Col into state to know when last item changed during frame  */
  const [lastRow, setLastRow] = useState(
    [...rowVirtualizer.getVirtualItems()].reverse().pop()
  );

  const [lastCol, setLastCol] = useState(
    [...columnVirtualizer.getVirtualItems()].pop()
  );

  /* If window size changed and columns changed  */
  useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
    setLastRow(lastItem);
  }, [rowVirtualizer.getVirtualItems()]);

  useEffect(() => {
    const [lastItem] = [...columnVirtualizer.getVirtualItems()].reverse();
    setLastCol(lastItem);
  }, [columnVirtualizer.getVirtualItems()]);

  useLayoutEffect(() => {
    if (!parentRef.current) {
      return null;
    }

    const resizeObserver = new ResizeObserver(
      debounce((entry) => {
        if (entry) {
          const { inlineSize: width } = entry[0].borderBoxSize[0];
          setWidth(width);
        }
      }),
      200
    );

    resizeObserver.observe(parentRef.current);

    return function cleanup() {
      resizeObserver.disconnect();
    };
  }, [parentRef.current]);

  useEffect(() => {
    columnVirtualizer.measure();
  }, [width, columnVirtualizer]);

  /* Without this debouncedFetchNextData the data prop itself has duplicates? */
  // const debouncedFetchNextData = useCallback(debounce(fetchNextData, 500), [
  //   fetchNextData,
  // ]);

  useEffect(() => {
    if (!lastRow || !lastCol) {
      return;
    }

    /* Getting exact last index in grid layout */
    const lastVisibleItemIndex = lastRow.index * columnCount + lastCol.index;

    if (
      lastVisibleItemIndex >= data.length - columnCount &&
      canFetchMore &&
      !isLoading
    ) {
      fetchNextData();
    }
  }, [canFetchMore, fetchNextData, isLoading, data.length, lastRow, lastCol]);

  return (
    <AnimatedItemsProvider initialLoad={initialLoad}>
      {!initialLoad && RenderItem ? (
        <div
          className={twMerge(
            "overflow-y-auto overflow-x-hidden",
            listHeightClass ?? "h-full"
          )}
          ref={parentRef}
        >
          <div className="w-full h-full">
            <div
              className="relative w-full"
              style={{
                height: `${rowVirtualizer.getTotalSize()}px`,
              }}
            >
              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
                const isLoaderRow =
                  virtualRow.index > Math.ceil(data.length / columnCount) - 1;
                return columnVirtualizer
                  .getVirtualItems()
                  .map((virtualColumn) => {
                    const index =
                      virtualColumn.index + virtualRow.index * columnCount;
                    const item = data[index];
                    const styler = {
                      width: `${virtualColumn.size}px`,
                      height: `${virtualRow.size}px`,
                      transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
                    };
                    return (
                      <div
                        className="absolute top-0 left-0"
                        key={index}
                        style={styler}
                      >
                        {!isLoaderRow && item ? (
                          <AnimatedElement
                            animate={animate}
                            index={index}
                            key={index}
                          >
                            <RenderItem item={item} {...renderItemProps} />
                          </AnimatedElement>
                        ) : null}
                      </div>
                    );
                  });
              })}
            </div>
            {data.length === 0 ? (
              <div className="flex h-full w-full items-center justify-center">
                {messageNoData}
              </div>
            ) : null}
            {!canFetchMore && data.length > 0 ? (
              <div className="mt-2 flex justify-center">{messageLastData}</div>
            ) : null}
            {isLoading && showSpinner ? (
              <div className="flex justify-center">
                <SpinnerLottie className="w-12 h-12" />
              </div>
            ) : null}
          </div>
        </div>
      ) : null}
    </AnimatedItemsProvider>
  );
}

[meetajhu]

Closing this as it was related to the API handler.