React Compiler был выпущен в Release Candidate, ура! На момент публикации пакет скачивают уже более 600 000 раз. Самые важные изменения следующие: объединили плагины для ESLint и добавили поддержку SWC, а это значит, что можно теперь использовать его с Vite не только в Babel-режиме.
Для чего вообще нам нужен React Compiler? Это новый инструмент, призванный помочь в автоматической оптимизации приложений на React’е. Компилятор сам применяет оптимизации, похожие на useMemo, useCallback и React.memo на основе определенных правил. Конечно, компилятор может ошибаться или вовсе не сможет оптимизировать код, и, в таком случае он пропустит его. Как разработчики - мы об этом узнаем, если нашей целью будет мемоизировать всё. И в таком случае мы сами оптимизируем код.
В Release Candidate улучшили то, как компилятор мемоизирует. Теперь появилась поддержка опциональных последовательностей и индексов массивов как зависимостей для оптимизации. Эти улучшения призваны сократить количество ререндров и сделать UI более отзывчивым.
Теперь можем попробовать работу компилятора (а он умеет в React старше 16) в настоящем проекте, и если он вносит хороший импакт – это здорово.
Очередная статья от Дэна Абрамова, в которой рассказываются преимущества гибридного подхода: серверных и клиентских компонентов. Сама статья, в некоторой части, является логическим продолжением к статье JSX Over The Wire, упомянутой в прошлом дайджесте.
В статье рассматривается несколько примеров, в которых есть какое-либо взаимодействие на серверной части: чтение файлов, генерация контента и т.д., и взаимодействие с ними на клиенте - в клиентском компоненте, который уже может быть интерактивным. И конечно такой подход изолирует и инкапсулирует код приложения.
Данный подход становится особенно удобным, если для хорошего UX нам необходима какая-то предобработка, например картинок, или заранее подготовленный layout страницы, например с именем пользователя и его правами.
Не прошло и двух релизов после последнего улучшения DevTools в Хромиуме – теперь мы получим улучшение вкладок Performance, Network и Elements.
Раздел Insights в Performance получит расширение функционала - к существующим советам мы получим советы по HTTP, какие запросы лучше закэшировать и предполагаемые оптимизации для шрифтов.
Сами треки производительности станут более интерактивными - теперь при выборе событий в дополнительных вкладках будут выделять соответствующие треки во вьюпорте.
Дополнительно улучшат UX во вкладке Network - теперь будет использоваться единая основа для измерения веса в ресурсах. Если часть была в kB, а другая в B, то теперь всё будет в kB.
Вкладка Elements получит экспериментальную фичу: появятся подсказки к существующим проблемам, но пока только для ARIA-атрибутов.
В новой экспериментальной версии React появилась возможность попробовать View Transitions и Activity, что намекает на то, что компоненты будут реализованы.
В 2022 году впервые рассказали о компоненте Offscreen, который позже переименовали в Activity. Суть Activity в том, что он позволяет скрыть компоненты визуально, но сохранить их состояние, причём эффекты размонтируются. Компонент может быть очень полезен, если надо сохранить состояние целого экрана, показав другое на короткое время - например при поиске в таблице отображать сплеш-скрин, если результатов нету.
View Transitions API – новое API, которое предоставляет возможность контролировать анимации при переключении между страницами. Данный подход можно использовать как для SPA-приложений, так и для MPA-приложений. Крупные решения активно ведут разработку по использованию такого API, и React не стал исключением! Мы сможем интегрировать VIew Transitions в роутинг и создать плавные анимации по переключению страниц с помощью CSS классов и новых псевдо-элементов.
В оригинальной статье есть классные демки по использованию View Transitions
Не обошли стороной и совсем новые фичи - команда React’а ведёт разработку по улучшению DX при работе с DevTools. С недавнего времени во вкладку Performance можно добавлять кастомные треки, что возможно позволит интегрировать React DevTools в браузеры без расширения.
Ну и нашумевший React Compiler тоже получит новую фичу в будущем: возможность расставлять dependency для эффектов, если они не заданы.
А ещё команда React’а всерьёз задумывается над тем, чтобы разрешить добавлять рефы на <Fragment />, потому что в React 19 был удалён метод findDOMNode и разработчикам библиотек стало сложнее работать с рефами и обрабатывать их. Подробнее о такой возможности нам расскажут в следующий раз. Но теперь это самая крутая ожидаемая фича.
Не обошлось и без упоминания будущих улучшение параллельных рендеров и сторов, которые в 18 Реакте имели проблемы, вызывая синхронные рендеры при обновлении сторов. Теперь это будет в прошлом и 19-й Реакт поддерживает полноценную работу с внешними сторами при помощи хука use(store), а команда Реакта продолжает исследование возможностей улучшения использования внешних сторов.
С версии Хромиума 136 и Файрфокса 136 разработчики начнут получать предупреждение о том, что семантически вложенные h-заголовки изменят внешний вид. Браузеры больше не будут исправлять стили заголовков в зависимости от вложенности в семантические элементы, а также Lighthouse начнёт предупреждать и снимать баллы за то, что для h-заголовков не заданы размеры текста при использовании внутри семантического контекста.
Заголовки с использованием следующего кода в будущем будут выглядеть одинаково:
Это изменение является запланированным, т.к. в спецификации HTML в 2022 году было удалено описание алгоритма, который отвечал за анализ уровней h-заголовков внутри семантических элементов. Возможно это изменение в том числе вызвано тем, чтобы разработчики больше внимания обращали на Accessibility.
Битва бандлеров продолжается! Более новый бандлер tsdown начинает набирать популярность. tsdown основан на Rolldown, который является более мощным инструментом, позиционирующим себя наравне с Webpack, Rollup, Vite и т.д., в то время как tsdown более простой и узконаправленный.
Основными фичами являются упрощенная конфигурация, специальные оптимизации для сборки библиотек, генерирование TypeScript-деклараций, tree-shaking и многое другое.
