Обзор будущей версии React 18
Мы продолжаем цикл тем, посвященный технологиям frontend-разработки. Сегодня мы обсудим: React 18 - что нового?
Согласно известной шутке, каждый час в мире появляется новая JavaScript-бибилиотека. Как известно, в каждой шутке - только доля шутки.
Итак, не за горами выход новой версии одной из самых популярных библиотек - React. Альфа-версия уже доступна всем желающим: "стянуть" ее можно с помощью команд npm install react@alpha и npm install react-dom@alpha. В отличие от предыдущей, 17-ой версии, в 18-ой появится довольно много интересных нововведений. В сегодняшней статье мы кратко рассмотрим основные новые фичи.
Transition API
Теперь код в компоненте можно ранжировать по значимости и срочности обновлений. Функции, обернутые в специальный метод startTransition (например, рендеринг большой фильтруемой таблицы), будут прерываться и ждать, пока выполнятся другие, более срочные функции (пользовательский ввод в инпут фильтра). Инпут даже без throttling или debounce не будет "тупить". А таблица не будет перерендериваться с каждым нажатием клавиши - все "недорендеренные" результаты React по мере ввода будет отбрасывать, оставив только окончательный вариант.
Функции в startTransition выполняются синхронно. Любые обновления внутри них помечаются как "переходы". Чуть позже, при обработке обновлений, React будет использовать эту информацию, решая, как и когда оптимальнее отрендерить изменения. То есть, "размышления" javascript'а о рендеринге обновления начнутся чуть раньше, чем при использовании setTimeout.
Также React позаботился за нас об информировании пользователей о том, что в фоновом режиме выполняется работа. С помощью хука useTransition() мы можем получить переменную-флаг isPending. А дальше, например, делаем условный рендеринг лоудера в зависимости от булевого значения переменной.
Suspense API
Этот API разработан для тех же целей, что и предыдущий: ускорение взаимодействия пользователя со страницей после начала загрузки, и, следовательно, улучшение UX. Сейчас в React-приложениях популярен подход SSR - рендеринг на серверной стороне. Это значит, что при загрузке в браузер попадает готовая страница HTML, которую могут беспрепятственно индексировать поисковые роботы.
Загрузка страницы работает по такой цепочке: сначала происходит выборка данных (на сервере), затем создание HTML (на сервере), отправка его в браузер и гидратация (то есть, навешивание на готовый HTML обработчиков событий). Эти этапы идут последовательно друг за другом. Главный недостаток в том, что эта цепочка работает в контексте всего приложения сразу. То есть, мы должны ждать, пока сформируется весь HTML на сервере, а затем гидратируется за один проход в браузере. Suspense API призван решить эту проблему.
Теперь мы можем оборачивать части приложения в компонент, и вышеуказанная цепочка событий для каждого обернутого компонента станет независимой. То есть, можно полноценно взаимодействовать с некоторыми частями приложения до того, как загрузятся другие.
Улучшенный batching
Что такое batching? Это пакетная обработка изменений состояния. React умеет группировать несколько обновлений состояний и делать лишь один повторный рендеринг. Например, по щелчку мыши у нас меняется значение счетчика и цвет кнопки. Несмотря на то, что по факту меняется два состояния, рендер будет только один. Это и есть batching. Плюсов у него сразу несколько - повышение производительности и предотвращение отрисовки "незавершенного" состояния компонента, когда был изменен лишь один параметр.
Тем не менее, в нынешней версии React механизм пакетирования несовершенен. Обновления пакетируются лишь в обработчиках событий React. Каждое же изменение стейта в промисах или в setTimeout будет генерировать перерендер.
Грядущее обновление покончит с этой проблемой. Все изменения стейтов будут пакетироваться независимо от того, откуда они исходят. Это поможет снизить количество повторных рендеров и повысить производительность. В некоторых случаях может потребоваться возможность избежать пакетной обработки. Например, если код зависит от чтения каких-то данных из DOM сразу после обновления состояния. React такую возможность предоставляет - с помощью функции flushSync. Можно обернуть каждое изменение стейта в такую функцию и пакетирования не произойдет.
В этой статье мы не стали рассматривать все изменения, выбрали лишь самые интересные на наш взгляд. В любом случае, к моменту официального релиза стабильной версии многое может измениться. Тем не менее, основные направления улучшений можно проследить. А это значит, можно составить представление о тенденциях развития React на ближайшее время.