why does the component re-renders on each scroll change

items ref changed, but they are the same

looking at your code, you are force rendering onChange: (instance) => { rerender() options.onChange?.(instance) },

{items.map(item => (
  <div key={item.key} data-index={item.index} ref={virtualizer.measureElement}>
    <MemoItem data={rows[item.index]} />
  </div>
))}

{items.map(item => (
  <div key={item.key} data-index={item.index} ref={virtualizer.measureElement}>
    <MemoItem data={rows[item.index]} />
  </div>
))}

isScrolling not sure that is worth it..

I can get it from the DOM

if nothing changed it will be nice to get the same one.

it seems you are using the functions passed in the memo

ooo checked the code and items should be same if they don't change

it is strange that there is no correlation between renders and virtualizer properties

ooo checked the code and items should be same if they don't change in my sandbox I get different array refs for equal item arrays. did you change anything?

in general, it is strange that there is no correlation between renders and virtualizer properties, for example, you added the scrollOffset as a property and you won't re-render each time that changes. but getTotalSize and getVirtualItems are functions and it will re-render

calling those function will not trigger re-render, virtualizer is optimiazed limit those, that's why we only re-render when start/stop scrolling, range changes, items size changes or size of virtualizer container changes

this wasn't what I meant. I didn't think calling the function will trigger re-render

but getTotalSize and getVirtualItems are functions and it will re-render

if ref is different -> value is different

I'm starting to get a slight desire to try and rewrite the code. but, you are not at a stage to change the API that much even if I had the time 🙂

if we are on the topic, in react you assume that if the virtualizer is the cause of the re-render you'd get a different virtualizer instance