Proposal: switch from HoC to render prop (or function as children)

Thinking about the possibility of replacing the HoC technique with the render prop technique.

The syntax would go from:

const MyVirtualList = VirtualList()(MyList);

return (
  <MyVirtualList
    items={myBigListOfItems}
    itemHeight={100}
  />
);

to

return (
  <VirtualList
    items={myBigListOfItems}
    itemHeight={itemHeight}
    renderVirtual={({ items, style} => (
      <ul style={style}>
        {items.map(item => (
          <li key={`item_${item.id}`} style={{height: itemHeight}}>
            Lorem ipsum dolor sit amet
          </li>
        ))}
      </ul>
    ))}
    />
);

Alternatively it could be function as children:

return (
  <VirtualList
    items={myBigListOfItems}
    itemHeight={itemHeight}
    >
    {({ items, style } => (
      <ul style={style}>
        {items.map(item => (
          <li key={`item_${item.id}`} style={{height: itemHeight}}>
            Lorem ipsum dolor sit amet
          </li>
        ))}
      </ul>
    ))}
  </VirtualList>
);

Any thoughts?

[mrchief]

Based on my real world experience, here are my thoughts:

Children props approach is the cleanest in terms of the component API - but it’s also the quirkiest because children is an opaque data structure. That doesn’t necessarily mean it’s going to be harder than others - that solely depends on how we use the children prop - but in terms of flexibility, it does introduce constraints (we can only do what React lets us).

render props - its looks slightly convoluted compared to children props - but since it’s just a simple array, it gives us lots of flexibility on how we want to manipulate/use it.

Between render props and HOC, with the example given in OP, I think HOC is cleaner (code-wise). It’s well understood and works and there are no downsides as far as I can tell.

So I’d vote for children props if its easy enough to support, otherwise keep the current HOC implementation.

Last but not the least, I’m thankful to @developerdizzle for counting me as a contributor, even though I’ve had a very small contribution and I’m not innately familiar with the code (hence my uncertainty about using children prop support).

[developerdizzle]

Update on this - branch is in the works https://github.com/developerdizzle/react-virtual-list/tree/function-as-children