clauderic / clauderic/react-tiny-virtual-list

getTotalSize when using itemSize array.

Open
#60 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2.5k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

When I learned `itemSize` can be a getter or array — I was hoping the array approach would help with the `getTotalSize` function and reduce the total height of the container — instead of estimating it.

In of our use cases the heights for each row are much different, resulting in janky scrolling and poor estimates for the total height.

The below example is just me trying to explain what I mean. The actual implementation might be different, for example, it might make sense to determine this in the `constructor` and `updateConfig` — as well as have some caching.

```javascript
/**
* Total size of all items being measured.
* This value will be completedly estimated initially.
* As items as measured the estimate will be updated.
* ---
* When itemSizeGetter is an array, use it to determine the total height.
*/
getTotalSize(): number {
const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();

// Just an example.
if (Array.isArray(this.itemSizeGetter)) {
return this.itemSizeGetter.reduce((acc, currentValue) {
return acc + currentValue
}, 0)
}

return (
lastMeasuredSizeAndPosition.offset +
lastMeasuredSizeAndPosition.size +
(this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize
);
}
```

@clauderic do you have any thoughts around this? I wouldn't mind passing a property to accomplish this either. Potentially we can do the same if `itemSizeGetter` is a function.

## Update

Looking at the code it seems that `itemSizeGetter` is always a function within the component:

```Typescript
itemSizeGetter = (itemSize: Props['itemSize']) => {
return index => this.getSize(index, itemSize);
};
```

I am currently trying out adding a `preCalculateTotalHeight` bool prop in my fork.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.