Оптимизация React-приложений: секреты от профессионалов

Описание

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

Сначала я расскажу о методе "moving state down" – перемещении состояния вниз по дереву компонентов. Мы создадим новый компонент, который изолирует логику модалки, что решит проблему с ререндером.

Далее мы обсудим технику "render props". Она позволит обернуть тяжелый компонент и избежать ререндеров при изменении глобального состояния, которое невозможно изолировать.

Эти подходы помогут оптимизировать работу приложения без необходимости использовать memo. Если вам интересно углубиться в рендеринг и алгоритмы React, оставляйте комментарии. Спасибо за просмотр! Не забудьте поставить лайк и подписаться. До скорого!