re-mount the virtual window

[is-it-ayush]

Hi! I have two views of my data. A virtual item in first view is calculates it's height based on item.size but on the second view it does so automatically (I don't set any). I simply switch the styles passed onto the item <div /> based on the view state. It works great when I switch from View 1 --> View 2 where the height of every virtual item increases. Although when I switch back from View 2 --> View 1 where height should decreases back again. The height of every virtual item (shown on the screen) does not update at all. This causes the previous items that were already rendered (and are in view) to appear large (incorrect) but new items that are rendered in on scroll to have small (correct) height. I've tried the following,

• Making the key of each virtual item be dependent upon view state. This was my attempt to force a re-render but it did not work.
• Calling virtualizer.mesaure() that is dependent on view state within an useEffect. This did not work either.

This is called for every virtual item.

const styles: object = viewState === "list" ? {
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: `${item.size}px`,
  transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`,
  overflowAnchor: "none",
} : {
  position: 'absolute',
  top: 0,
  left: `${item.lane * (100 / virtualizer.options.lanes)}%`,
  width: `${(100 / virtualizer.options.lanes)}%`,
  transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`,
  overflowAnchor: "none"
}

I'm not sure how to fix this although I currently know this is fixed if I soft-reload the page when everything remounts. That's what lead to believe a remount can fix this. I was hoping for something like virtualizer.reset() that would force a remount & reset of virtual table. This is something similar to what react-table has! Although, since it doesn't exist what possible workarounds can I take here. Any help would be awesome. 🙂

My last move would be to move everything one level up and have two different virtualizers for both views. Although this is slightly tedious.