The reason why I want to use react-window is to avoid excessive DOM problem. Also, because I'm using nextjs and React.lazy() doesn't work there. I have a Layout component in which the children are being dynamically generated, you can see the problem being solved here. However, it seems to me that it's not possible to get the height of the children beforehand.

In addition to the LayoutWrapper as shown in the previous question, the VariableSizeList is being setup for me as follow:

const [heights, setHeights] = React.useState<number[]>([])

React.useEffect(() => {
  // This will actually returns [] which I don't want to happen.
  // I want it to return an array of heights
  const data = onMount()
  setHeights(data)
}, [onMount])

const Row = ({index, style}: ListChildComponentProps) => (
  <div style={style}>{childrenArr[index]}</div>
)

const getItemSize = (index: number) => heights[index]

return (
   <AutoSizer disableWidth>
     {({height, width}) => (
       <VariableSizeList
         height={height}
         itemCount={childrenArr.length}
         itemSize={getItemSize}
         width={width}
       >
        {Row}
       </VariableSizeList>
      )}
    </AutoSizer>
)

Is there any work around solution to this?