I did some profiling and it looks like the biggest JS cost is continually calling the item key/rect/type functions.
These are supposed to be memoized, but the memoized function gets recreated every time you render (which happens every time you scroll) - so overall the memoization adds more cost than it saves while scrolling.
If we use the useMemo react hook, you can save these functions between render calls, and only recreate them if the props change - i.e. the functions themselves change, or the items passed in changed.
Note that this does assumes that the items array is immutable (i.e. you'd pass in a new items array when the layout changes), so it's behaving like a PureComponent - if you think that's not a requirement you want to make, then we could control this optimization via a prop.
I did some profiling and it looks like the biggest JS cost is continually calling the item key/rect/type functions.
These are supposed to be memoized, but the memoized function gets recreated every time you render (which happens every time you scroll) - so overall the memoization adds more cost than it saves while scrolling.
If we use the useMemo react hook, you can save these functions between render calls, and only recreate them if the props change - i.e. the functions themselves change, or the items passed in changed.
Note that this does assumes that the items array is immutable (i.e. you'd pass in a new items array when the layout changes), so it's behaving like a PureComponent - if you think that's not a requirement you want to make, then we could control this optimization via a prop.