Bug when virtualizing a filtered array

[Klavionik]

Bug Report

Describe the Bug

I'm facing some kind of strange behavior when trying to use virtual scrolling along item filtering. For some reason I'm getting more items in the virtual items array than in the filtered items array. Maybe it's some React quirk that I don't understand?

How to Reproduce

I've prepared a code sandbox (see below).

Try to enter Item #22 in the search box and the app will crash. In the browser console you are able to see that while filtered array has length of 1 (which is correct), virtual array has length of 5 and the app crashes. The same thing will happen if you try to find item that does not exist, try putting "hello" in the search box. If you instead use a commented line, it will fix this.

CodeSandbox Link

https://codesandbox.io/p/sandbox/bold-lucy-ypnsk1

I was searching through issues in this repo and found this: #248
In the code sandbox for this issue you can see that the author was puzzled too with the same thing: https://codesandbox.io/s/lively-fast-5834r?file=/src/List.js:448-655

Expected Behavior

I expect virtual items array to have a length that is not greater than the original items array length.

[MarlBurroW]

Same usecase, filtered array with a debounced search text input. When too few items in the filtered array, my app crash because the item.index is out of my array length (too many items).

[4m1z]

Any update on this issue ? wellyshen

can i take a look at this issue ?

[wellyshen]

Sorry for the late. You might need to sync the itemCount with the filtered items by the useState hook.

[ekabolotina]

Same problem. Maybe we need to iterate though filtered items instead?

filteredItems.map((data, index) => {
  const { size } = items[index];

  return (
    <div key={data.id} style={{ height: size }}>
      {data.content}
    </div>
  );
})