Всем привет! Наткнулся тут на обзор React Conf 2025, который проходил в прошлом месяце и решил покопаться в обновах нашего любимого инструмента. А там действительно много интересных обновлений, например официально состоявшийся релиз React компилятора, который еще живет отдельно от самого реакта, но уже готов к использованию в продакшн. Также в последней версии появились новые штуки, которые заслуживают внимания. Например, хук useEffectEvent - для выноса реактивной логики из useEffect или компонент Activity - позволяющий на время скрыть отрендеренный комопнент. О них я напишу как-нибудь в ближайшее время, а сегодня расскажу о ViewTransition - новый экспериментальный компонент. Это новый хук, который войдет в версию 19.3, но его уже можно использовать, установив canary. Этот хук заметно упрощает создание плавных анимированных переходов между состояниями интерфейса. Если раньше для подобных эффектов приходилось вручную интегрировать CSS-анимации, Web Animations API или сторонние библиотеки, то теперь у нас появится прямой декларативный путь. Мы просто оборачиваем компонент в <ViewTransition> и React автоматически будет запускать анимацию «перехода» при обновлении контента внутри компонента. React берёт на себя: - создание снимков состояния DOM до и после рендера, - синхронизацию с браузерным ViewTransition API, - корректное обновление layout до старта анимации, - предотвращение миграний или мерцаний. Вот простой пример использования: import { ViewTransition, useState, startTransition } from 'react'; function Item() { return ( <ViewTransition> <Video video={videos[0]}/> </ViewTransition> ); } export default function Component() { const [showItem, setShowItem] = useState(false); return ( <> <button onClick={() => { startTransition(() => { setShowItem((prev) => !prev); }); }} >Click me</button> ... </> ); } В результате - минимум кода (буквально добавлены ViewTransition и startTransition), но интерфейс становиться более плавным и приятным для взаимодействия. Другим преимуществом является то, что анимации создаются нативно, без использования сторонних библиотек и инструментов, а значит гарантируют максимальновозможную производительность. Ну и в целом компонент довольно гибкий, можно настраивать как саму анимацию, так и другие параметры. Ну и как всегда не без недостатков. Во-первых это все еще экспериментальное апи, а значит что-то еще может поменяться перед релизом. А во-вторых придется подождать пока это нормально заработает в Safari. Ставьте реакции о чем написать в следующем посте 🔥 - про новые хуки из React 👍 - про новые апи, уже доступные в наших браузерах