Given you have a row width variable of a container, and items populated inside of it, calculating rows/columns based on that within useEffect hooks seems very expensive.
Looking for advice, conceptually on making it more performant.
Say you’re measuring variables of row width (container width), item height and item width.
Calculating the amount of columns that would fit in the container would be Math.floor(rowWidth / itemWidth)
Calculating the column width + the appropriate gap
columnWidth = itemWidth + (rowWidth - (itemWidth * columns)) / columns
Then the row height would be
itemHeight + 100px (any variable)
Now most of this logic, on window-resize would have to be inside of a useEffect
so it keeps changing, but like I said, it all feels very expensive. So just curious on how to do it better.
Thank you!