Function List

lib/components/list/List.tsx:26–244

({
  children,
  className,
  defaultHeight = 0,
  listRef,
  onResize,
  onRowsRendered,
  overscanCount = 3,
  rowComponent: RowComponentProp,
  rowCount,
  rowHeight: rowHeightProp,
  rowProps: rowPropsUnstable,
  tagName = "div" as TagName,
  style,
  ...rest
}: ListProps<RowProps, TagName>)

 * Renders data with many rows.
 */
export function List<
  RowProps extends object,
  TagName extends TagNames = "div"
>({
  children,
  className,
  defaultHeight = 0,
  listRef,
  onResize,
  onRowsRendered,
  overscanCount = 3,
  rowComponent: RowComponentProp,
  rowCount,
  rowHeight: rowHeightProp,
  rowProps: rowPropsUnstable,
  tagName = "div" as TagName,
  style,
  ...rest
}: ListProps<RowProps, TagName>): ReactElement {
  const rowProps = useMemoizedObject(rowPropsUnstable);
  const RowComponent = useMemo(
    () => memo(RowComponentProp, arePropsEqual),
    [RowComponentProp]
  );

  const [element, setElement] = useState<HTMLDivElement | null>(null);

  const isDynamicRowHeight = isDynamicRowHeightUtil(rowHeightProp);

  const rowHeight = useMemo(() => {
    if (isDynamicRowHeight) {
      return (index: number) => {
        return (
          rowHeightProp.getRowHeight(index) ??
          rowHeightProp.getAverageRowHeight()
        );
      };
    }

    return rowHeightProp;
  }, [isDynamicRowHeight, rowHeightProp]);

  const {
    getCellBounds,
    getEstimatedSize,
    scrollToIndex,
    startIndexOverscan,
    startIndexVisible,
    stopIndexOverscan,
    stopIndexVisible
  } = useVirtualizer({
    containerElement: element,
    containerStyle: style,
    defaultContainerSize: defaultHeight,
    direction: "vertical",
    itemCount: rowCount,
    itemProps: rowProps,
    itemSize: rowHeight,