React Labs: View Transitions, Activity, and more от 23.04.2025
В новой экспериментальной версии React появилась возможность попробовать View Transitions и Activity, что намекает на то, что компоненты будут добавлены в стабильную версию.
Activity и для чего он#
В 2022 году впервые рассказали о компоненте Offscreen, который позже переименовали в Activity. Суть Activity в том, что он позволяет скрыть компоненты визуально, но сохранить их состояние, причём эффекты размонтируются. Компонент может быть очень полезен, если надо сохранить состояние целого экрана, показав другое на короткое время – например при поиске в таблице отображать сплеш-скрин, если результатов нету.
View Transitions как подход для переходов между страницами#
View Transitions API – новое API, которое предоставляет возможность контролировать анимации при переключении между страницами. Данный подход можно использовать как для SPA-приложений, так и для MPA-приложений. Крупные решения активно ведут разработку по использованию такого API, и React не стал исключением! Мы сможем интегрировать VIew Transitions в роутинг и создать плавные анимации по переключению страниц с помощью CSS классов и новых псевдо-элементов.
В оригинальной статье есть классные демки по использованию View Transitions
Что ещё появится в будущем#
Кастомные трэки в DevTools#
Не обошли стороной и совсем новые фичи – команда React’а ведёт разработку по улучшению DX при работе с DevTools. С недавнего времени во вкладку Performance можно добавлять кастомные треки, что возможно позволит интегрировать React DevTools в браузеры без расширения.
React Compiler#
Ну и нашумевший React Compiler тоже получит новую фичу в будущем: возможность расставлять dependency для эффектов, если они не заданы.
А ещё команда React’а всерьёз задумывается над тем, чтобы разрешить добавлять рефы на <Fragment />, потому что в React 19 был удалён метод findDOMNode и разработчикам библиотек стало сложнее работать с рефами и обрабатывать их. Подробнее о такой возможности нам расскажут в следующий раз. Но теперь это самая крутая ожидаемая фича.
Параллельный рендеринг#
Не обошлось и без упоминания будущих улучшение параллельных рендеров и сторов, которые в 18 Реакте имели проблемы, вызывая синхронные рендеры при обновлении сторов. Теперь это будет в прошлом и 19-й Реакт поддерживает полноценную работу с внешними сторами при помощи хука use(store), а команда Реакта продолжает исследование возможностей улучшения использования внешних сторов.