Performance advice on calculating rows/columns based on window-resize for a layout grid (virtualization)

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!