Unexpected Re-Renders with Inline Render Functions

[idanasayag0]

Hi,

Referring to issue #420, I noticed that the only way to render a list is by passing a reference to a component, rather than being able to use inline render functions directly.

I tried to create a wrapper component to simplify the API for users. Here's an example:

<WrapperVariableSizeList {...props}>
  {({ index, style }) => (
    <div style={style}>{React.Children.toArray(children)[index]}</div>
  )}
</WrapperVariableSizeList>

With this wrapper, users can pass the children for the list directly, like so:

<WrapperVariableSizeList {...props}>
  {items.map((item) => (
    <p key={item.id}>{item.id}</p>
  ))}
</WrapperVariableSizeList>

However, when using this syntax, I noticed that the list component triggers unexpected re-renders, which affects performance.

Could this behavior be fixed to allow inline render functions without causing unnecessary re-renders?