Items is [] when the component refreshes

It seems that when you mount/unmount the component and the itemCount does not change the items is [] (after the first time).

A hacky way out of it is to do something like itemCount: myCount + Math.round(Math.random() * 100) and filter later.

In other words, some kind of check takes place based on the itemCount that causes cache-related (I presume) issues.

[phaistonian]

@wellyshen Will try to make some time to do it later.

[abearief1405]

Hai @wellyshen first things first I want to thankfull for the library.

I Had similiar issue with this. After successfull render the components, I move to other pages and back to the components, data wont to render it’s because isItemLoadedArr[loadIndex] = true.

So I used to const [isItemLoadedArr, setIItemLoadedArr] = useState([]); create useEffect

useEffect(() => {
    if (isItemLoadedArr.length > 0) {
        const resetIsLoaderArr = isItemLoadedArr.map((dt) => false)
        setIItemLoadedArr(resetIsLoaderArr)
    }

}, []) 

pass isItemLoadedArr to loadMore: (e) => loadData(e, setActivities, isItemLoadedArr) and the last things pass isItemLoadedArr to const loadData = async ({ loadIndex }, setActivities, isItemLoadedArr) => {...};

This also avoid the callback from being invoked repeatedly.

This is my full code:

import React, { useEffect, useState } from "react";
import useVirtual from "react-cool-virtual";
import axios from "axios";

const api = {
    xxx
}

const loadData = async ({ loadIndex }, setActivities, isItemLoadedArr) => {
    isItemLoadedArr[loadIndex] = true;

    try {
        const { data: activities } = await axios.get(`${api}/${loadIndex + 1}`);

        if (activities.data !== null) {
            setActivities((prevActivities) => {
                const nextActivities = [...prevActivities];

                activities.data.forEach((comment) => {
                    nextActivities[comment.id - 1] = comment;
                });

                return nextActivities;
            });
        } else {
            isItemLoadedArr[loadIndex] = false;
        }
    } catch (err) {
        isItemLoadedArr[loadIndex] = false;
        loadData({ loadIndex }, setActivities, isItemLoadedArr);
    }
};

const DataActivities = ({ total }) => {
    const cActivities = total;
    const batchActivities = 5;

    const [isItemLoadedArr, setIItemLoadedArr] = useState([]);
    const [activities, setActivities] = useState([]);
    const { outerRef, innerRef, items } = useVirtual({
        itemCount: cActivities,
        itemSize: 400,
        loadMoreCount: batchActivities,
        isItemLoaded: (loadIndex) => isItemLoadedArr[loadIndex],
        loadMore: (e) => loadData(e, setActivities, isItemLoadedArr)
    });

    useEffect(() => {
        if (isItemLoadedArr.length > 0) {
            const resetIsLoaderArr = isItemLoadedArr.map((dt) => false)
            setIItemLoadedArr(resetIsLoaderArr)
        }

    }, [])

    return (
        <div
            className="outer"
            style={{ width: "300px", height: "500px", overflow: "auto" }}
            ref={outerRef}
        >
            <div ref={innerRef}>
                {items.map(({ index, measureRef }) => (
                    <div
                        key={activities[index]?.id || `fb-${index}`}
                        className={`item ${index % 2 ? "dark" : ""}`}
                        style={{ padding: "16px", minHeight: "122px" }}
                        ref={measureRef} // Used to measure the unknown item size
                    >
                        {activities[index]
                            ? `${activities[index].id}. ${JSON.stringify(activities[index])}`
                            : "⏳ Loading..."}
                    </div>
                ))}
            </div>
        </div>
    );
};

export default DataActivities;

Hope it’s help, thank you.