I am seeing a noticeable lag in processing of state changes after keyboard and mouse events on lists exceeding 1000 elements. I have this codesandbox containing an interactive list of airline flights which can be rendered with pure React and also via the FixedSizeList. When clicking on a list element with the mouse the row changes its color to red via the useState hook. Rows can also be virtually selected via ArrowUp/ArrowDown on the keyboard.
Even when the list is rendered with windowing ON, there is a noticeable lag before the row changes its color. When selection is made via the keyboard the lag is much worse especially when the ArrowUp/ArrowDown keys are held depressed.
I am not seeing much difference when scrolling the list in both modes.
Is there something wrong with my FixedSizeList implementation?
I am seeing a noticeable lag in processing of state changes after keyboard and mouse events on lists exceeding 1000 elements. I have this codesandbox containing an interactive list of airline flights which can be rendered with pure React and also via the FixedSizeList. When clicking on a list element with the mouse the row changes its color to red via the useState hook. Rows can also be virtually selected via ArrowUp/ArrowDown on the keyboard.
Even when the list is rendered with windowing ON, there is a noticeable lag before the row changes its color. When selection is made via the keyboard the lag is much worse especially when the ArrowUp/ArrowDown keys are held depressed.
I am not seeing much difference when scrolling the list in both modes.
Is there something wrong with my FixedSizeList implementation?
Thanks.