Scrolling up in VariableSizeList causes major scroll jitters when using scrollToItem.

[shaunchander]

If you create a VariableSizeList and scroll to a certain element in it using listRef.current.scrollToItem(200); then attempt to scroll up, there is a very visible jitter. I believe this happens because components of dynamic height are rendering and being upserted into the DOM above where the user is currently positioned.

The components I'm working with a dynamically sized, unlike into the demo on the docs where each element in the variable list has its heighted pre-calculated.

I'll create a minimum-reproducible-demo shortly!

[niemal]

Very interesting, are you using a shadow-DOM like technique with opacity: 0 to calculate everything? I am very curious into this, thanks.

[niemal]

EDIT: The major clutter is gone (before I had messages flying around and incorrect persistent heights for some reason), now there is a tiny bit of clutter for a few milliseconds, I don't know if my approach is the most ideal to begin with. Looking forward to your solution.

The clutter is mostly gone doing what I mentioned above:

Just above my list component:

        {!heightsCalculated && (
          <ShadowHeightCalculator messages={localMessages} />
        )}

In my ListItem component I am running the setRowHeight function in a useEffect, ShadowHeightCalculator component looks like:

function ShadowHeightCalculator({
 messages,
}: {
 messages: Array<MyDataType>;
}) {
 return (
   <div style={{ position: "relative", opacity: 0, height: "1px" }}>
     {messages.map((message, idx) => (
       <ListItem
         key={`shadow-height-${idx}`}
         index={idx}
         style={{
           position: "absolute",
           left: 0,
           top: 0,
         }}
       />
     ))}
   </div>
 );
}

And I am running a loop somewhere (a useInterval hook) checking it like so:

  const checkHeightsCalculated = (messages: Array<MyDataType>) => {
     const heightsCalculated = messages.some(
       (msg) =>
         rowHeights?.current &&
         typeof rowHeights.current[msg.hash ?? ""] !== "number"
     );

     return !heightsCalculated;
 };