Про оптимизации Недавно мне задали вопрос: «Что делать, если табличка лагает? Вроде memo накинул, а всё равно медленно» В таких ситуациях у меня первый вопрос: "Профилировал? В отрисовке дело, или в react?" Ответ был: «Конечно же, не профилировал» И тут я понял, почему все так носятся с этими useCallback, React.memo. Сравнивают React с Vue/Solid и говорят, какой же он медленный. Большая часть людей никогда даже в профайлер не заглядывала. А если заглянуть… Да не просто заглянуть, а собрать прод сборку и накинуть замедление CPUx4. То часто оказывается интересная картина. React рендер занимает, условно, 9мс, а отрисовка браузера 30мс (то, что в профайлере фиолетовым и зелёным) И тут, следите за руками 🧙‍♂️ Вы берёте и героическими усилиями оптимизируете отрисовку реакт в 3 раза!!! О боже, как же быстро всё должно теперь работать А теперь посчитаем: Изначальное время отрисовки 9 react + 30 браузер = 39 Конечное время 3 react + 30 браузер = 33 (33 - 39) / 39 = 15% Оптимизация React в 3 раза на самом деле ускоряет результат всего лишь на 15% Почему так получается? Да очень просто. Оптимизировать нужно бутылочное горлышко! Мы тут хоть React вообще уберём, но быстрее 30 мс работать не будет! Простая математика Поэтому оптимизировать без профайлера – это ананизм Но многие скажут: «Так нет же! Я профилировал. И там React – это огого, как долго!» Но дьявол, как всегда, в деталях. В Dev сборке React накидывает просто тонну оверхеда. Кучу отладочной информации, strict мод, где всё работает по кучу раз, и постоянные проверки правил хуков и подобного. И при замедлении React в dev версии мы получаем, что он начинает быть соизмерим (или больше) с отрисовкой по вкладу. Но это обманчиво! На деве React медленне. Но браузер на проде и деве то одинаковый! А ещё, не забывайте отключать браузерные расширения при профилировании. Они тоже могут сильно замедлять) Итог. Если работает медленно – идём в профайлер. Отимизации слепого котёнка – полная бессмыслица ☝️Если вам интересна тема профилирования, то в это воскресенье в сообществе пройдёт воркшоп «Профилирование и оптимизация React кода» Где мы на примере miro доски: ✔️ Научимся искать бутылочные горлышки. ✔️ Посмотрим способы оптимизации React рендеров без изменения архитектуры ✔️ Напишем простую виртуализацию ✔️И разберемся с фазами отрисовки бразузера В результате вы научитесь понимать, что там вообще в профайлере за белиберда. И как профилировать, чтобы результаты не врали) Приходите, будет интересно! 🔥