React 19: что нового, что полезного, и куда мы движемся

С вами Дима, старший фронтенд разработчик в Surf, и сегодня мы разберём React 19 — новую версию одной из самых популярных библиотек для создания пользовательских интерфейсов. 

Команда React подготовила много интересного — обновление обещает упростить разработку, повысить производительность и открыть новые горизонты для создания современных приложений. 

Так что вперёд, к подробному разбору основных фичей, оценке их плюсов и минусов и исследованию будущего React. 

Что нового в React 19

React 19 — это не простой апгрейд, это полноценный шаг вперёд. В обновлении появились инструменты для автоматической оптимизации, новые подходы к серверному рендерингу и улучшения для повседневной работы. 

1. React Compiler: турбоускоритель кода

React Compiler — это, пожалуй, самая громкая новинка версии. Представьте инструмент, который берёт React-код и автоматически превращает его в более быстрый JavaScript — а ещё избавляет от рутинной оптимизации. Компилятор может ускорить рендеринг до двух раз, устраняя необходимость вручную использовать useMemo, useCallback или оборачивать компоненты в memo.

Как это работает

Компилятор анализирует код на этапе сборки и определяет, какие части компонентов от каких данных зависят. 

Затем он автоматически добавляет оптимизации: если данные не изменились, React не будет перерисовывать компонент. Это похоже на подход, который используют Svelte или Solid.js, где оптимизация происходит на этапе компиляции, но в React это сделано более гибко — компилятор пока опционален и не ломает существующий код.

Пример кода

Допустим, есть компонент, который выполняет сложные вычисления для рендера списка. В React 18 нам пришлось бы оптимизировать его вручную:

// React 18 import { memo, useMemo } from 'react';  const List = memo(({ items }) => {    const computedItems = useMemo(() => {        return items.map((item) => ({            ...item,            value: expensiveComputation(item),        }));    }, [items]);     return (        <ul>            {computedItems.map((item) => (                <li key={item.id}>{item.value}</li>            ))}        </ul>    ); });  function expensiveComputation(item) {    // Имитация сложных вычислений    return item.name.toUpperCase() + Math.random(); }

В React 19 с компилятором тот же код можно написать проще:

 // React 19 function List({ items }) {    const computedItems = items.map((item) => ({        ...item,        value: expensiveComputation(item),    }));     return (        <ul>            {computedItems.map((item) => (                <li key={item.id}>{item.value}</li>            ))}        </ul>    ); }  function expensiveComputation(item) {    return item.name.toUpperCase() + Math.random(); }

Компилятор сам поймёт, что нужно кешировать, и предотвратит лишние рендеры. Это полезно в больших проектах, где ручная оптимизация занимает много времени.

Статус

К марту 2025 года React Compiler остаётся экспериментальной фичей, при этом он активно тестируется. Например, команда Instagram* использует его в продакшене, сообщая о заметном приросте производительности. В будущем компилятор станет частью стандартного рабочего процесса React, а его код откроют для сообщества.

Плюсы

• Автоматическая оптимизация без лишнего кода.

• Ускорение работы приложений даже без глубоких знаний о мемоизации.

• Меньше багов из-за упущенных зависимостей в useMemo или useCallback.

Минусы

• Экспериментальный статус требует тщательного тестирования перед использованием в продакшене.

• Возможны конфликты с необычными паттернами кода, которые компилятор пока не поддерживает.

• Требуется время на интеграцию в существующие проекты.

2. Server Components: сила сервера в ваших руках

Серверные компоненты (Server Components) — это новый подход к рендерингу, который позволяет частично перенести логику на сервер. Теперь можно пометить компонент директивой «use server», и он будет исполняться только на сервере, отправляя клиенту готовый HTML. Это ускорит загрузку страниц, улучшит SEO и снизит нагрузку на клиент.

Как это работает

Серверные компоненты рендерятся на сервере, а после их результат передаётся клиенту. При этом они могут взаимодействовать с клиентскими компонентами (помеченными как «use client»), создавая гибридную архитектуру. Например, тяжёлые операции вроде запросов к базе данных можно выполнять на сервере, а интерактивные элементы — оставить на клиенте.

Пример серверного компонента

// server-component.js 'use server'; export async function fetchUserData() {    const res = await fetch('https://api.example.com/user');    return res.json(); } // page.js import { fetchUserData } from './server-component'; export default async function UserProfile() {    const user = await fetchUserData();    return (        <div>            <h1>{user.name}</h1>            <p>{user.bio}</p>        </div>    ); }

Здесь fetchUserData выполняется на сервере, а клиент получает готовый HTML с данными пользователя. Если добавить клиентский компонент, например, кнопку, React сам разберётся, как соединить серверную и клиентскую части.

Реальный кейс

Допустим, мы строим блог. Серверные компоненты могут рендерить посты из базы данных, а клиентский компонент — форму комментариев. Это снижает объём JavaScript, отправляемого клиенту, и ускоряет первую загрузку.

Плюсы

• Ускорение первой загрузка страницы благодаря серверному рендерингу.

• Улучшение SEO — поисковики сразу видят контент.

• Возможность выполнять ресурсоёмкие задачи — тот же парсинг данных — на сервере.

Минусы

• Нужна поддержка фреймворка (например, Next.js), потому что React сам по себе не управляет сервером.

• Не все компоненты можно сделать серверными — те, что используют window или другие браузерные API, останутся клиентскими.

• Усложняет архитектуру, если мы не привыкли к разделению сервер-клиент.

3. Actions: прощайте сложности с формами

Actions — герой работы с формами и асинхронными мутациями в React 19. Это новый инструмент для управления отправкой данных, который автоматически обрабатывает состояния загрузки, ошибки и даже оптимистичные обновления интерфейса.

Как это работает

Вы определяете функцию Action и передаёте её в пропс action тега <form>. React берёт на себя управление состоянием: показывает, что форма отправляется, обрабатывает ошибки и позволяет обновлять UI до завершения операции.

Пример

import { useTransition } from 'react';  function CommentForm() {    const [isPending, startTransition] = useTransition();     async function handleSubmit(formData) {        startTransition(async () => {            const response = await fetch('/api/comments', {                method: 'POST',                body: formData,            });            if (!response.ok) throw new Error('Ошибка отправки');        });    }     return (        <form action={handleSubmit}>            <input name="comment" placeholder="Ваш комментарий" />            <button type="submit" disabled={isPending}>                {isPending ? 'Отправка...' : 'Отправить'}            </button>        </form>    ); }

Здесь useTransition помогает React управлять асинхронной операцией, а isPending показывает состояние загрузки. Можно добавить обработку ошибок или оптимистичное обновление с помощью хука useOptimistic.

Расширенный пример с ошибками

import { useTransition, useState } from 'react';  function CommentForm() {      const [isPending, startTransition] = useTransition();    const [error, setError] = useState(null);     async function handleSubmit(formData) {        startTransition(async () => {            try {                const response = await fetch('/api/comments', {                    method: 'POST',                    body: formData,                });                if (!response.ok) throw new Error('Ошибка сервера');            } catch (err) {                setError(err.message);            }        });    }     return (        <form action={handleSubmit}>            <input name="comment" placeholder="Ваш комментарий" />            <button type="submit" disabled={isPending}>                {isPending ? 'Отправка...' : 'Отправить'}            </button>            {error && <p style={{ color: 'red' }}>{error}</p>}        </form>    ); }

Плюсы

• Упрощает работу с формами, избавляет от лишнего состояния.

• Встроенная поддержка загрузки и ошибок.

• Легко интегрируется с оптимистичными обновлениями через useOptimistic.

Минусы

• Требует переосмысления привычных подходов к формам (например, если вы использовали onSubmit).

• Может быть сложным для новичков, особенно при комбинировании с другими хуками.

• Пока не все кейсы покрыты из коробки — например, сложные валидации не тронуты.

4. Новый API use: упрощаем работу с ресурсами

API use — это способ работать с асинхронными ресурсами (промисами, контекстом) прямо в рендере. В отличие от хуков, его можно вызывать условно, что даёт больше свободы.

Как это работает?

use принимает ресурс, например, промис, и возвращает его значение, когда оно готово. React приостанавливает рендеринг компонента, пока данные не загрузятся, и использует Suspense для показа fallback.

Пример

import { Suspense } from 'react';  function UserData({ userPromise }) {    const user = use(userPromise);    return <h1>{user.name}</h1>; }  function App() {    const promise = fetch('/api/user').then((res) => res.json());    return (        <Suspense fallback={<p>Загрузка...</p>}>            <UserData userPromise={promise} />        </Suspense>    ); }

Если промис ещё не разрешён, пользователь увидит «Загрузка…», а затем — имя пользователя.

Условный вызов

function Component({ condition, promise }) {    if (condition) {        const data = use(promise);        return <div>{data}</div>;    }    return <div>Ничего нет</div>; }

Отметим, что это невозможно сделать с обычными хуками вроде useEffect, где вызовы должны быть строго на верхнем уровне.

Плюсы

• Упрощает работу с асинхронными данными без лишних хуков.

• Поддержка условных вызовов делает код более гибким.

• Идеально сочетается с Suspense и серверными компонентами.

Минусы

• Неочевидное поведение для тех, кто привык к строгим правилам хуков.

• Требует осторожности, чтобы не вызвать бесконечные циклы рендеринга.

• Ограниченная документация на ранних стадиях.

5. Улучшения в работе с рефами и хуками

React 19 упрощает работу с рефами и добавляет новые хуки для улучшения UX. Теперь рефы для функциональных компонентов передаются как обычные пропсы, и не нужно использовать forwardRef. Но главные звёзды этого обновления — новые хуки useFormStatus и useOptimistic. Они решают ряд задач разработчиков и делают взаимодействие с пользователем более плавным. 

Пример рефов

// React 18 import { forwardRef } from 'react';  const MyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);  // React 19 function MyInput(props) {    return <input {...props} />; }  // Использование function Parent() {    const inputRef = useRef(null);    return <MyInput ref={inputRef} />; }

Новые хуки

useFormStatus

Этот хук даёт информацию о состоянии формы, в которой он используется. Он полезен, когда мы работаем с Actions и хотим отслеживать, отправляется ли форма в данный момент, или получать дополнительные данные о её статусе. 

Хук возвращает объект с полями pending (булево значение, показывающее, выполняется ли отправка), data (объект FormData с данными формы) и method (метод формы, например, «POST» или «GET»). 

Важно: useFormStatus работает только внутри компонента, который рендерится в контексте формы с пропсом action.

Пример с useFormStatus

import { useFormStatus } from 'react-dom';  function SubmitButton() {    const { pending, data } = useFormStatus();     // Можно использовать data для дополнительных проверок    const comment = data?.get('comment') || '';     return (        <button type="submit" disabled={pending}>            {pending ? `Отправка "${comment}"...` : 'Отправить комментарий'}        </button>    ); }  function CommentForm() {    async function handleSubmit(formData) {        await fetch('/api/comments', {            method: 'POST',            body: formData,        });    }     return (        <form action={handleSubmit}>            <input name="comment" placeholder="Ваш комментарий" />            <SubmitButton />        </form>    ); }

Кнопка «Отправить» становится неактивной во время отправки, а текст кнопки динамически обновляется, показывая, что именно отправляется. Это удобно для улучшения UX, особенно в формах с длительными операциями, например, загрузкой файлов. 

Хук избавляет нас от необходимости вручную передавать состояние загрузки через пропсы или контекст — React сам отслеживает статус формы.

Когда использовать

• Если нужно показать пользователю, что форма обрабатывается.

• Когда требуется доступ к данным формы внутри дочерних компонентов без их явной передачи.

• Для создания динамических интерфейсов, зависящих от статуса отправки.

Плюсы

• Упрощает отслеживание состояния формы без лишнего кода.

• Доступ к data позволяет создавать динамичные элементы UI, зависящие от введённых данных.

• Улучшает UX за счёт встроенной обработки загрузки.

Минусы

• Работает только внутри формы с action, что ограничивает его гибкость.

• Не решает задачи сложной валидации или обработки ошибок.

• Может быть избыточным для простых форм без асинхронных операций.

useOptimistic

Этот хук позволяет реализовать так называемое оптимистичное обновление UI. Что это значит? Оптимистичное обновление — это подход, при котором мы сразу показываем пользователю результат операции — добавление комментария или лайк — не дожидаясь ответа от сервера. Если операция завершится успешно, UI будет в актуальном состоянии. Если произойдёт ошибка, мы откатим изменения. Такой подход делает интерфейс более отзывчивым и улучшает восприятие скорости приложения.

Хук useOptimistic принимает текущее состояние и коллбэк для его «оптимистичного» обновления, возвращая массив с оптимистичным состоянием и функцией для его изменения.

Пример использования useOptimistic

import { useOptimistic } from 'react';  function CommentList({ comments, addComment }) {    const [optimisticComments, addOptimisticComment] = useOptimistic(comments,      (currentComments, newComment) => [        ...currentComments,        { id: Date.now(), text: newComment, isPending: true },    ]);     async function handleAddComment(text) {        addOptimisticComment(text); // Сразу показываем комментарий        try {            await addComment(text); // Отправляем на сервер        } catch (error) {            console.error('Ошибка добавления комментария:', error);            // Здесь можно откатить изменения, если нужно        }    }     return (        <>            <button onClick={() => handleAddComment('Новый комментарий')}>                Добавить комментарий            </button>            <ul>                {optimisticComments.map((comment) => (                    <li                       key={comment.id}                       style={{ opacity: comment.isPending ? 0.5 : 1}}>                        {comment.text} {comment.isPending && '(ожидание)'}                    </li>                ))}            </ul>        </>    ); }  // Пример функции addComment async function addComment(text) {    await fetch('/api/comments', {        method: 'POST',        body: JSON.stringify({ text }),    }); }

Новый комментарий появляется в списке сразу после клика, с полупрозрачностью и пометкой «(ожидание)», пока сервер не подтвердит операцию. Если запрос завершится успешно, UI уже готов. Если нет — можно добавить логику отката, например, удалить комментарий из списка.

Когда использовать

• Для операций, где важна моментальная обратная связь — добавление лайков, комментариев, удаление записей.

• Когда задержка сервера заметна, но мы хотим создать иллюзию мгновенной реакции.

• В сочетании с Actions для форм с мутациями данных.

Плюсы

• Делает интерфейс более отзывчивым, улучшая восприятие скорости.

• Упрощает реализацию оптимистичных обновлений без сложной логики.

• Гибкость в управлении временным состоянием через коллбэк.

Минусы

• Требует ручной обработки ошибок и откатов при неудачных операциях.

• Может запутать пользователя, если сервер часто возвращает ошибки.

• Добавляет сложность в UX-дизайн для согласования оптимистичного и реального состояния.

Общие плюсы

• Меньше бойлерплейта с рефами.

• Новые хуки упрощают работу с формами и UX.

• Код становится чище и читаемее.

Общие минусы

• Придётся обновить существующие компоненты, использующие forwardRef.

• Новые хуки пока не интуитивны для всех разработчиков.

Чего ждём от React

React движется к философии «пиши меньше, делай больше». Ждём:

• полную интеграцию компилятора;

• улучшение серверных возможностей и кеширования;

• лучший DX с новыми инструментами и сообщениями об ошибках;

• более глубокую совместимость с веб-компонентами.

Стоит ли переходить

В новых проектах — однозначно да. В старых — лучше потестировать в песочнице и оценить выгоды. Хотя React 19 обещает плавный переход с помощью codemods и документации.

Что в итоге

React 19 — это эволюция, которая делает разработку удобнее и быстрее. Да, есть нюансы, но преимущества перевешивают. Пробовали ли вы новые фичи? Делитесь опытом в комментариях! Пишите крутой код и до встречи!

Больше полезного про веб-разработку — в Telegram-канале Surf Web Team

Кейсы, лучшие практики, новости и вакансии в команду Web Surf в одном месте. Присоединяйтесь!

---

*Компания Meta Platforms Inc. (Facebook и Instagram) признана экстремистской организацией, ее деятельность на территории России запрещена.