Как можно оптимизировать рендеринг элементов?

Question

[MrZillaGold]

Я перебираю больше 500 элементов массива и для каждого элемента создаю создаю span.
На мобильных устройствах происходит большой фриз.
Как можно оптимизировать загрузку элементов в таком случае?

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

Comments

[Пашенька]

Нужно сформировать HTML в памяти и вставить его в DOM одной операцией, а не втыкать их по одному в цикле.

[Yustas Alexu]

like-a-boss, это ведь не jquery

[abberati]

like-a-boss, вы не в курсе, как работает реакт, да?

[Mesuti]

abberati, О каком моменте работы реакта Вы говорите?

[abberati]

Mesuti, о виртуальном DOM, о фазах рендера и коммита, об асинхронном рендеринге и прочем

[Пашенька]

abberati, не обратил внимания, что это реакт.

Answer 1

[Alexandr]

Маловато информации, конечно... Но, мне кажется, такую операцию лучше выполнять на бэке, и отдавать фронту готовую страницу.

Comments

[MrZillaGold]

Я формирую кнопки с иконками из спрайтов, формировать на беке не вариант

[Alex Wells]

MrZillaGold, нафига это позначено ответом? Это какая-то хрень от человека, который вообще не понимает о чем говорит.

Answer 2

[hzzzzl]

что за 500 спанов, эмоджи для чатика?
может их поделить на категории и в каждой категории рендерить по 50?
или еще как-то пагинировать, через слайдер или "бесконечную подгрузку"

и да! ты это делаешь один раз при маунте компонента, или это происходит каждый раз при рендере?

Answer 3

[McBernar]

В статике сделать. Сделать простенький скрипт на ноде, который нарендерит в файл весь массив. И подключать его как компонент. Это если нет сервер-сайд рендера.