Прошлая неделя пронеслась незаметно🚀

Она была довольно интересная на задачки, я фиксила неоднозначные баги и занималась оптимизацией некоторых компонентов.

Чуть подробнее про оптимизацию.
Представим, что к нам от бэка пришел гигантский массив данных, и нам все это нужно вывести на фронте.
Хм, рендерить сотни тысяч элементов сразу - плохая идея, загрузка страницы будет похожа на загрузку страницы в 2009, когда я сидела ВКонтакте через нетбук и модем…

И что делать?
Виртуализировать😁
Другими словами, рендерить только те элементы, которые входят в текущую область просмотра, а остальное не рендерить.
Пользователь будет скролить список вниз, и каждый раз будут рендериться только нужные элементы.
20 штук вместо 20 тысяч.
Ну кайф же🙌🏽

Как это сделать?
Если пользоваться готовыми библиотеками, то чаще всего виртуализация уже продумана, и нам стоит дописать всего пару строк.
Например, для таблиц я использую либу mantine-react-table, где уже есть пропс виртуализации.
В либе rc-tree, которую я так же использую, тоже есть встроенная виртуализация.
Если же такой роскоши нет, то вот популярные библиотеки оконного доступа:
react-window
react-virtualized

Можно разок попробовать применить виртуализацию на своих пэт проектах, чтобы больше ее не бояться и на реальных проектах сразу делать все по красоте😌