useVirtual wrap with Profiler

List.jsx

import * as React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import { useVirtual } from "../../../";

function RowVirtualizerDynamic({ rows }) {
  const parentRef = React.useRef();

  const rowVirtualizer = useVirtual({
    size: rows.length,
    parentRef
  });

  return (
    <>
      <div
        ref={parentRef}
        className="List"
        style={{
          height: `400px`,
          width: `400px`,
          overflow: "auto"
        }}
      >
        <div
          style={{
            height: `${rowVirtualizer.totalSize}px`,
            width: "100%",
            position: "relative"
          }}
        >
          {rowVirtualizer.virtualItems.map(virtualRow => (
            <div
              key={virtualRow.index}
              ref={virtualRow.measureRef}
              className={virtualRow.index % 2 ? "ListItemOdd" : "ListItemEven"}
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: `${rows[virtualRow.index]}px`,
                transform: `translateY(${virtualRow.start}px)`
              }}
            >
              Row {virtualRow.index}
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

let count = 0;
let actual = 0;
let base = 0;
const totalSize = 10000;
let shown = false;

function App() {
  const rows = new Array(totalSize)
    .fill(true)
    .map(() => 25 + Math.round(Math.random() * 100));

  const onRender = (...args) => {
    const [_id, _phase, actualDuration, baseDuration] = args;

    if (count === 1000 && !shown) {
      shown = true;
      console.log({
        count,
        size: totalSize,
        actualDuration: actual / count,
        baseDuration: base / count,
        height: "400px"
      });
      return;
    }
    count = count + 1;
    actual = actual + actualDuration;
    base = base + baseDuration;
  };

  return (
    <div>
      <React.Profiler id={"Profiler"} onRender={onRender}>
        <RowVirtualizerDynamic rows={rows} />
      </React.Profiler>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);