Some times dynamic row heights causing continuous re rendering of content

[nslgit]

We can use dynamic-row-height demo reproduce the problem.
Only changing the length of each content to dynamic will cause repeated re rendering and loading, resulting in the interface appearing to flash continuously.

import { useMemo, useState } from "react";
import { List, useDynamicRowHeight } from "react-window";
import { RowComponent } from "./ListRowDynamicRowHeights";
 
function Example({ lorem }: { lorem: string[] }) {
  const listState = useListState(lorem);
 
  const rowHeight = useDynamicRowHeight({
    defaultRowHeight: 50
  });
 
  return (
    <List
      rowComponent={RowComponent}
      rowCount={lorem.length}
      rowHeight={rowHeight}
      rowProps={{ listState }}
    />
  );
}
In this case, rows can just render their content as they normally would and react-window will measure it for you.
import { type RowComponentProps } from "react-window";
 
function RowComponent({
  index,
  listState,
  style
}: RowComponentProps<{
  listState: ListState;
}>) {
  const isCollapsed = listState.isRowCollapsed(index);
  const text = listState.getText(index);
 
  return (
    <div
      className={cn("p-2 cursor-pointer", {
        "bg-white/10": index % 2 === 0,
        truncate: isCollapsed
      })}
      onClick={() => listState.toggleRow(index)}
      style={style}
    >
      <ToggleIcon isCollapsed={isCollapsed} />
      {{Array.from({length: Math.random() * 500 + 100}, (_, i) => '=').join('')}}
    </div>
  );
}```