03 Мар
React 19 мчится на всех парах! После долгого ожидания выходит новая версия React, которая обещает кардинально изменить процесс разработки. Давайте разберемся в новых возможностях и попрощаемся с устаревшими методами.
Команда React недавно поделилась своим видением будущих функций в официальном блоге. Судя по всему, нас ждет принципиально новый подход к работе с фреймворком.
React-Компилятор берет управление на себя
Самое долгожданное нововведение — автоматическая оптимизация кода. Раньше, чтобы избежать пересчета значений и функций при каждом рендеринге, приходилось использовать громоздкие конструкции useMemo, useCallback и memo.
Эти хуки не только усложняли код, но и становились частой причиной ошибок. К счастью, в React 19 им грозит полное исчезновение.
Новый React-компилятор возьмет оптимизацию на себя. Он автоматически проанализирует ваш код и обеспечит его безопасную компиляцию. При этом строгий режим (StrictMode) сыграет ключевую роль в выявлении потенциальных проблем на этапе разработки. Стоит отметить, что Instagram уже успешно использует эту технологию в своем продакшене.
Улучшения SEO с помощью метаданных
Одной из важных функций Next.js является возможность добавления нужных метаданных к компонентам. Новая версия React позволит нам размещать метаданные, такие как заголовки, meta-теги и ссылки, в любом месте древа компонентов.
Это одно из самых ожидаемых функций React 19. Но их гораздо больше!
React Actions: больше контроля над данными
Если вы знакомы с фреймворками вроде Next.js, то наверняка сталкивались с серверными действиями. Они позволяют отправлять формы и выполнять мутации данных на сервере. React 19 расширяет эти возможности, внедряя поддержку обработки данных и в клиентских приложениях.
Теперь можно забыть о громоздких обработчиках событий onClick и onSubmit. React 19 предлагает новый подход — действия форм (form actions). Эти функции могут работать как синхронно, так и асинхронно. При необходимости их можно определить на сервере с помощью директивы use server.
<form action={find}>
<input name="username" />
<button>Найти</button>
</form>Хуки в React 19: useFormState и useFormStatus
Однако одним из недостатков экшинов было отсутствие информации о текущем состоянии (ожидание, успех, ошибка). Решить эту проблему помогают хуки useFormState и useFormStatus.
Первый из них (useFormState) позволяет получить результат выполненного действия, что идеально подходит для отображения сообщений об ошибках или успехе. Второй хук (useFormStatus) отслеживает статус выполнения действия.
Во время обработки запроса он позволяет блокировать поля ввода и кнопку отправки формы.
// useFormState
import { useFormState } from "react-dom";
const login = async (previousState, formData) => {
try {
// Логика авторизации
} catch (err) {
return err.message;
}
};
const LoginForm = () => {
const [state, formAction] = useFormState(login, undefined);
return (
<form action={formAction}>
<input name="username" />
<input name="password" />
<button>Войти</button>
{state}
</form>
);
};
// useFormStatus
const Submit = () => {
const status = useFormStatus();
return <button disabled={status.pending}>Отправить</button>;
};Окунитесь в захватывающий мир веб-разработки и дизайна благодаря моим уникальным курсам на платформе Udemy! Каждый курс создан с любовью и вниманием к деталям. Сейчас действуют специальные скидки до 90%! Получите доступ к качественным знаниям всего за $9!
Загрузка ресурсов: быстрее, легче, эффективнее
React 19 значительно улучшает загрузку ресурсов, таких как таблицы стилей, шрифты и скрипты. Благодаря интеграции Suspense в жизненный цикл загрузки ресурсов, нас ждут более быстрые времена отрисовки страниц.
Помимо этого, React 19 предлагает возможность предварительной загрузки ресурсов, что положительно сказывается на общем пользовательском UI.
Хук: useOptimistic (быстрый фидбек для пользователей в React 19)
Еще один хук — useOptimistic. Он позволяет временно обновлять состояние приложения, пока процесс выполняется в фоновом режиме.
Возьмем, к примеру, функцию «лайк» в социальной сети. После нажатия кнопки пользователю не придется ждать ответа от сервера. Можно сразу увеличить счетчик лайков и изменить цвет иконки. Если же сервер отклонит запрос, счетчик автоматически уменьшится, а иконка вернет прежний вид.
