React Virtualized AutoSizer + Masonry doesn't render until resized

Question

I'm trying to bind AutoSizer and Masonry components in react-virtualized. My list of items lives in state and appears asynchronously in componentDidMount(). If I use simple anonymous arrow function for rendering Masonry, everything is OK. But If I use separate function like "renderMasonry", I get an empty result until I resize a window and trigger re-rendering. I don't understand why AutoSizer is not re-rendered itself in this case. Plunkr is here https://plnkr.co/edit/fmAqp1MOzlKGP96LeDjP

Answer 1

If I use simple anonymous arrow function for rendering Masonry, everything is OK. But If I use separate function like "renderMasonry" ...

This is the key. An anonymous function gets recreated each time, so AutoSizer's shouldComponentUpdate sees a new value and returns true rather than false. (Near the top of the react-virtualized docs, there's a section titled "Pure Components" that's related to this.)

In this case, the only 2 properties being passed to AutoSizer are disableHeight and children. If neither of these change between renders, then AutoSizer itself will assume it's safe to skip re-rendering.

In hindsight, I'm not sure it was a great idea to have AutoSizer extend PureComponent, since the cost of re-rendering it is small and the potential for confusion is large. That being said, it's common for folks to use inline functions as children for react-virtualized components and this avoids the problem as explained above.