itemContent is getting called with 0 items in grouped array (GroupedVirtuoso)

[pdeleastar]

itemContent is getting called with 0 items in a grouped Array with GroupedVirtuoso. With Virtuoso list this does not happen with an empty array.

Reproduction
I have created a sandbox with a GroupedVirtuoso and Virtuoso, both logging when they get called.
https://codesandbox.io/s/react-virtualized-grouped-oge5x?file=/src/App.js

 const emptyArray = new Array(0);

  /**
   * CONSOLE OUTPUT
   *
   * Grouped Virtuoso - itemContent called 0
   */
  return (
    <div>
      <GroupedVirtuoso
        style={{ height: "200px", width: "200px" }}
        groupCounts={[emptyArray.length]}
        groupContent={(index) => {
          return <div>Group {index}</div>;
        }}
        itemContent={(index) => {
          /**
           * itemContent is getting called when there
           * are 0 elements in the group.
           */
          console.log("Grouped Virtuoso - itemContent called", index);
          return <div>{index}</div>;
        }}
      />

      <Virtuoso
        style={{ height: "200px", width: "200px" }}
        totalCount={emptyArray.length}
        itemContent={(index) => {
          /**
           * itemContent does not get called with there
           * are 0 elements in the list
           */
          console.log("Virtuoso - itemContent called", index);

          return <div>Item {index}</div>;
        }}
      />
    </div>
  );

Thanks,
Pierre

[petyosi]

Supporting empty groups, (especially in the initial render) is quite complicated, due to the "probe" rendering cycle. I may eventually find a way to fix that, but for now, I would suggest that you skip the rendering of the component if you have empty groups.

[Hideman85]

Similar issue:

  /**
   * CONSOLE OUTPUT
   *
   * Grouped Virtuoso - itemContent called 0 0 A
   * Grouped Virtuoso - itemContent called 0 0 B // Sorry? Expected 1 1 B
   */
  return (
    <div>
     <GroupedVirtuoso
        style={{ height: "200px", width: "200px" }}
        data={['A', 'B']}
        groupCounts={[1, 1]}
        groupContent={(index) => {
          return <div>Group {index}</div>;
        }}
        itemContent={(index, groupIndex, item) => {
          /**
           * itemContent is getting called when there
           * are 0 elements in the group.
           */
          console.log("Grouped Virtuoso - itemContent called", index, groupIndex, item);
          return <div>{index}</div>;
        }}
      />
    </div>
  );

In addition I would add my voice to #235 the props are counterintuitive (here index is not relative to the group but to the flattened array)