Why is itemSizeCache private?

[itayganor]

Hey there :)
In my virtual list, I display placeholders when the user scrolls quickly.
I want to improve these placeholders so they match the height of the actual data — if that data has already been rendered once.
I was able to easily achieve this using measurementsCache, something like:

function Placeholder({virtualizer, index}: PlaceholderProps) {
    const cachedHeight = virtualizer.measurementsCache[index]?.size ?? null;

    return <Skeleton.Line height={cachedHeight} />;
}

My problem is that this cache uses array indexes rather than item keys. When I add or remove items from my array, I get incorrect placeholders for some items, for the same reason React advises against using key={index}.

I noticed that under the hood, measurementsCache uses itemSizeCache, which indexes items by their keys - perfect for my use case. I also tried to use that (even though it's marked as private), and it seems to achieve my desired behavior.

So I was wondering: why is itemSizeCache typed as a private field? And if it’s meant to stay private, what’s the recommended way to retrieve a cached item size by key?
Thanks :)

[itayganor]

I was able to solve this without using itemSizeCache.

In my original attempt, I read virtualizer.measurementsCache[index]?.size on the component level, but index was not the "internal virtualization index" but my actual data index. I used the Sticky pattern, which creates "fake" list items that are the sticky headers. This made a mess with the indexes, making it impossible for a "row renderer" to know what internal index was used to render it.

Instead of reading the cache in the component, I now only access it while iterating virtualizer.getVirtualItems() - where item.index is actually that internal index, including the fake sticky headers.

From my code:

<div className={styles.virtualContent} style={{ height: virtualizer.getTotalSize() }}>
    {virtualItems.map((item) => {
        const row = rows[item.index];

        return (
            <div
                key={String(item.key)}
                data-key={String(item.key)}
                data-index={item.index}
                ref={virtualizer.measureElement}
                className={styles.virtualItem}
                style={{
                    transform: `translateY(${item.start}px)`,
                }}
            >
                {row.type === 'group'
                    ? groupContent(row.groupIndex)
                    : itemContent(row.globalItemIndex, {
                        groupIndex: row.groupIndex,
                        item: data[row.globalItemIndex],
                        cachedSize: virtualizer.measurementsCache?.[item.index]?.size, // only read it here, using item.index, rather than later in the component, only having row.globalItemIndex available
                    })}
            </div>
        );
    })}
</div>

[piecyk]

So I was wondering: why is itemSizeCache typed as a private field? And if it’s meant to stay private, what’s the recommended way to retrieve a cached item size by key?

@itayganor Glad you found a solution! The primary reason it's marked as private is because it's considered an internal detail of the virtualization logic.