В начале этой статьи я бы хотел немного познакомиться с вами. Меня зовут Кирилл, и достаточно долгое время я провел в должности тех. лида и, исходя из этого, мне нужно было разбираться досконально в том, что мы используем. Сам я Full-Stack, но с фронтом я знаком очень и очень давно.
Теперь, после небольшого вступления поведаю, что же такого приготовлено в React 19, что может очень сильно пошатнуть ситуацию на рынке технологий в целом. Я думаю, что вы уже начали замечать небольшие изменения в философии реакта, а именно постепенное закладывания на бэкенд.
Те, кто смотрел Next.js новых версий, понимают, о чем я говорю. Есть ощущение, и оно очень ясное, что React будет становиться Full-Stack решением, которое можно впихнуть куда угодно. Сейчас я подразумеваю новые директивы use client и use server, которые дают указание, где мы исполняем наш компонент на сервере с доступом к базе либо на клиенте с доступом к пользовательскому интерфейсу.
![Next.js](https://media.proglib.io/posts/2024/04/22/c21bd751320afc186bf476e84649025f.png)
Помимо же введения директив в новой версии, есть так же ряд любопытных изменений/добавлений. Одно из самых интересных добавлений это React Compiler – представьте, что вам не нужно беспокоиться о мемоизации и оптимизации.
То есть сам React теперь будет понимать, когда нужно вашу функцию/переменную/компонент мемоизировать, и вам не нужно думать, как и где побольше выиграть в производительности. Конечно, ручную мемоизацию никто не будет убирать, но когда лишний раз что-то делается под капотом – это очень упрощает жизнь.
Так же есть анонс новой штуки, как Offscreen (переименовано в Activity). Если переходить к примерам, то данный механизм предназначен для того, чтобы запомнить, что вы сделали на одном компоненте при переходе на другой. То есть, прыгая между табами или страницами, ваше состояние формы или чего-либо еще будет сохранено.
Данная фича была уже во Vue, только реализована она была немного не так. Если кому интересно, то речь идет про keepalive компонент.
![Vue.js](https://media.proglib.io/posts/2024/04/22/817f334c3a264967ca1f946f487b1699.png)
Еще можно выкинуть на одну библиотеку больше, так как в контексте с SEO, где бы вы не прописали метатеги, они будут перенесены в head страницы
Ну и одним из последних нововведений является form action (обработка своих функций при отправке формы) и расширенный компонент Suspense для подгружаемых ресурсов.
Так же можно будет забыть про forwardref.
Важно затронуть, что появились новые хуки:
use – теперь у нас есть возможность получить ответ от сервера, то есть подождать наш промис прямо в компоненте.
![Хук use в React 19](https://media.proglib.io/posts/2024/04/22/cd6d86a3fe9537b82ae8ac7524509648.png)
useOptimistic – суть этого хука заключается в том, что мы, вместо того, чтобы ждать пока будут осуществляться различные запросы на обновление стейта, сразу же оптимистично изменяем его и после ответа сервера производим актуальное изменение.
![Хук useOptimistic в React 19](https://media.proglib.io/posts/2024/04/22/ad6f487c0cacf307cffbf70aad23ab0c.png)
useFormStatus – тут мы получаем актуальный статус последнего сабмита формы и уже к этому можем привязываться для отображения какой-либо информации
![Хук useFormStatus в React 19](https://media.proglib.io/posts/2024/04/22/d5798126181804a0399211e36df559b2.png)
useFormState – получение стейта и обработчика формы, то есть с помощью этого хука мы более удобно можем работать с формой, что-то похожее на Formik
![Хук useFormState в React 19](https://media.proglib.io/posts/2024/04/22/83bd368e52e4a9b18ac150329e540567.png)
По итогу: Фичи React все больше и больше улучшают производительность фреймворка и приводят к росту числа проектов, написанных на нем.
Мой канал по JS в ТГ – t.me/jswrl. Мой канал по JS в Ютубе – youtube.com/@jswrl
Комментарии