React-window: Item styles should be cached by item key instead of item index

[gbiryukov]

Hi there, thanks for great library!

I found small issue with item style cache when itemKey prop is used with VariableSizeList.
When item with new key added into middle of the list it receives styles of element that was located previously on this place.

It happens because styles cached by index but not by keys. It is possible to resolve it somehow?

[bvaughn]

Styles determine the position (top/left offset) so they're bound to index, not id/key (which are only decoupled since they might move around in the tree, after e.g. a resort or a addition/deletion).

Maybe I'm misunderstanding something that you're saying. Please provide a Code Sandbox example?

[gbiryukov]

Thanks for quick response. Here the example https://codesandbox.io/s/2o9rk3q7z0
Click on add item and you will see that new item will have wrong size.

[bvaughn]

I see. There are two types of "styles" we might be referring to.

The first is CSS style. These control both positioning (which is index specific) and sizing (which is item specific). Cached styles aren't meant to be stable when the underlying data changes. They're just meant to prevent breaking shouldComponentUpdate for e.g. back to back renders that happen while the user is scrolling. (In fact, you can see that I even reset the cache after scrolling has stopped to avoid tricky invalidation issues.)

The second is what I call "metadata" (e.g. offset, size) which VariableSizeList caches to avoid having to call the itemSize function unnecessarily (since that function might need to perform some calculations). This cache _is_ stable, and relies on external code calling resetAfterIndex to inform the list whenever its underlying data changes in a way that requires rebuilding this metadata.

Here's a fork of your sandbox that shows how that works:
https://codesandbox.io/s/yk30zklp69

Hope this clears things up 😄

[gbiryukov]

Got it, thanks for your help 👍