data param on itemSize func for VariableSizeList

Thanks for adding the data param on the itemKey func in 3c9a558.

I use the itemSize function in my usage of VariableSizeList, where the size of the item depends on the data in some way. It would be useful if the itemSize function also had a data param.

I can send a PR if you like, just wanted to run it by you first. Thanks.

[jancama2]

Here is a simplified example:

<VariableSizeList
  height={totalHeight}
  itemData={items}
  itemCount={items.length}
  itemSize={(index) => items[index].itemType === 'header' ? 32 : 64 }
  itemKey={(index, data) => data[index].key }
  >
  {ItemRenderer}
</VariableSizeList>

class ItemRenderer extends React.PureComponent {
  render() {
    const item = this.props.data[this.props.index]

    return (
      <div style={this.props.style}>
        {
          item.itemType === 'header'
          ? <h2>{item.headerText}</h2>
          : <div>{item.otherStuff}</div>
        }
      </div>
    )
  }
}

The list of items is long (say, hundreds long), and they are grouped into a few sections, each with a header for that section. The section header is smaller in height than the item itself, so the item size is variable.

The above works fine. Just I was able to add the data param for itemKey, and as you can see it would be equally useful on itemSize.

@mj1856 Is this solution working for you even if the items are changing over time (adding, removing)? I have exactly the same type of list and I have an issue with itemSize being called only once when an item is rendered for the first time.

[pastinepolenta]

@bvaughn being new to the library I was also surprised by the lack of data prop (or just the item/row prop) as parameter for this function. I read your opinion on the matter and I just have a question if you might have time to clarify what is the best approach.

My surprise comes from the fact that this forces the usage of a closure like so:

itemSize={ index => {
    const myItem = myItems[index];
    // ... determine the size based on myItem
}}

As mentioned by others this makes the function less “movable” because it relies on and external variable myItems, but perhaps this is not such a strong point to complexify the library?

Also, I am always worried (perhaps mistakenly, please advise) that a closure like so is redefined at each render. That causes a new function to get passed down as props and this I thought is considered a bad practice because it causes unnecessary re-renders of the child component.

Is the solution in this case to memoize the closure with a useCallback ? Is this optimization not so necessary? Having more parameters in the library will solve this, but will perhaps just move the issue on another place causing a perf loss anyway?

Thanks