How can element rendering be optimized?

Question

JavaScript

I iterate over 500 array elements and create a span for each element.
There is a big freeze happening on mobile devices.
How can you optimize the loading of elements in this case?

[...Array(542)].map((value, index) => 
                                <span 
                                       key={icon}
                                       className={`item-icon item-icon-${icon}`}
                                    />
                            }
                        )

Answer 1

There is not enough information, of course... But, it seems to me, it is better to perform such an operation on the back, and give the finished page to the front.