React 19: новые возможности, удалённые API и обновление

React 19 это мажорная версия React, вышедшая в декабре 2024 года. Она добавляет Actions (асинхронные функции, которые управляют состоянием ожидания, ошибками и формами), хуки useActionState, useOptimistic и use, ref как обычный пропс и теги <title> и <meta>, которые React переносит в head документа. React 19.2 (октябрь 2025 года) добавил <Activity> и useEffectEvent.

Каждый пример ниже работает на React 19.2. Вот Action: асинхронная функция, переданная форме, а состоянием ожидания и возвращённой ошибкой управляет useActionState.

import { useActionState } from 'react';

function saveName(name) {
    // Stands in for a real request
    return new Promise((resolve) => setTimeout(resolve, 800));
}

async function updateName(previousState, formData) {
    const name = formData.get('name').trim();
    if (!name) {
        return { error: 'Please type a name.', saved: previousState.saved };
    }
    await saveName(name);
    return { error: null, saved: name };
}

export default function App() {
    const [state, formAction, isPending] = useActionState(updateName, {
        error: null,
        saved: null,
    });

    return (
        <form action={formAction}>
            <input name="name" placeholder="Your name" />
            <button type="submit" disabled={isPending}>
                {isPending ? 'Saving...' : 'Save'}
            </button>
            {state.error && <p style={{ color: 'crimson' }}>{state.error}</p>}
            {state.saved && <p>Saved as {state.saved}.</p>}
        </form>
    );
}

Нажмите Save с пустым полем, чтобы увидеть ошибку, затем введите имя и сохраните: кнопка 800 мс показывает «Saving...». Нет ни useState для ошибки, ни флага isLoading, ни e.preventDefault().

Actions и действия форм

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

• startTransition (и useTransition) теперь принимают асинхронную функцию. isPending остаётся true, пока вся функция не закончится.
• <form action={fn}> вызывает fn с FormData формы при её отправке. Он выполняется как Action, а после его завершения React сбрасывает неконтролируемые поля формы.
• <button formAction={fn}> даёт одной кнопке отправки собственное действие.
• useActionState хранит значение, которое действие вернуло последним, поэтому действие может вернуть сообщение об ошибке или сохранённую запись.
• useFormStatus из react-dom позволяет компоненту внутри формы узнать, отправляется ли эта форма, без передачи пропсов вниз. Ему нужен родительский <form>, поэтому здесь он показан в статическом блоке:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Sending...' : 'Send'}</button>;
}

useOptimistic

useOptimistic показывает ожидаемый результат, пока Action ещё выполняется, и возвращается к настоящему состоянию, когда Action заканчивается. Счётчик лайков может увеличиться в момент клика и откатиться, если запрос не удался.

const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (current, delta) => current + delta);

Страница о useOptimistic содержит запускаемый пример с поддельным API, который намеренно сбоит, чтобы вы видели откат.

API use

use читает значение из промиса или из контекста. С промисом он приостанавливает компонент, пока промис не выполнится, а ближайший <Suspense> тем временем показывает свой запасной вариант. В отличие от всех остальных хуков, use можно вызывать внутри if или цикла и после раннего return.

React 19 также позволяет рендерить <ThemeContext value="dark"> напрямую вместо <ThemeContext.Provider>. Оба появляются в этом примере:

import { createContext, use, useState } from 'react';

const ThemeContext = createContext('light');

function Badge({ show }) {
    if (!show) return null;
    // A normal hook could not be called after an early return. use can.
    const theme = use(ThemeContext);
    const dark = theme === 'dark';
    return (
        <span style={{ padding: '2px 8px', background: dark ? '#222' : '#eee', color: dark ? '#fff' : '#222' }}>
            Theme: {theme}
        </span>
    );
}

export default function App() {
    const [theme, setTheme] = useState('light');
    const [show, setShow] = useState(true);

    return (
        <ThemeContext value={theme}>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Switch theme</button>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} badge</button>
            <p>
                <Badge show={show} />
            </p>
        </ThemeContext>
    );
}

ref как пропс и очистка ref

Функциональный компонент теперь получает ref как любой другой пропс. Больше не нужно оборачивать его в forwardRef, чтобы передать ref к элементу DOM.

import { useRef } from 'react';

function TextField({ label, ref }) {
    return (
        <label>
            {label} <input ref={ref} />
        </label>
    );
}

export default function App() {
    const inputRef = useRef(null);

    return (
        <div>
            <TextField label="Email" ref={inputRef} />
            <button onClick={() => inputRef.current.focus()}>Focus the field</button>
        </div>
    );
}

Ref-колбэк также может вернуть функцию очистки. React вызывает её, когда элемент уходит с экрана, так же как работает очистка эффекта. Колбэк, который ничего не возвращает, по-прежнему вызывается с null при удалении, как в React 18.

import { useState } from 'react';

export default function App() {
    const [visible, setVisible] = useState(true);

    return (
        <div>
            <button onClick={() => setVisible(!visible)}>{visible ? 'Remove' : 'Add'} the box</button>
            {visible && (
                <div
                    ref={(node) => {
                        console.log('attached to', node.tagName);
                        return () => console.log('cleanup: detached');
                    }}
                    style={{ marginTop: 8, padding: 12, background: '#e8f0fe' }}
                >
                    A box with a ref
                </div>
            )}
        </div>
    );
}

Нажмите кнопку несколько раз и прочитайте консоль: каждое удаление выводит строку очистки, каждое возвращение выводит attached to DIV.

Метаданные документа

<title>, <meta> и <link> можно рендерить в любом месте компонента, и React перенесёт их в <head>. Компонент страницы может задать собственный заголовок без библиотеки вроде react-helmet.

import { useEffect, useState } from 'react';

function Article({ title }) {
    return (
        <article>
            <title>{title}</title>
            <meta name="description" content={`An article about ${title}`} />
            <h3>{title}</h3>
        </article>
    );
}

export default function App() {
    const [title, setTitle] = useState('Hooks');

    useEffect(() => {
        console.log('document.title is now:', document.title);
    }, [title]);

    return (
        <div>
            <button onClick={() => setTitle(title === 'Hooks' ? 'Actions' : 'Hooks')}>Open the other article</button>
            <Article title={title} />
        </div>
    );
}

У превью нет вкладки браузера, которую можно показать, поэтому эффект вместо этого выводит document.title. Переключайте статьи, и выводимый заголовок будет следовать за ними.

Таблицы стилей получили то же: <link rel="stylesheet" href="..." precedence="default" /> внутри компонента вставляется в head один раз, в порядке приоритета, и React ждёт его загрузки, прежде чем показать содержимое, которому он нужен. <script async src="...">, отрендеренный несколькими компонентами, загружается только один раз. react-dom также экспортирует preload, preinit, preconnect и prefetchDNS для подсказок о ресурсах.

Activity и useEffectEvent (React 19.2)

<Activity mode="hidden"> скрывает детей, не выбрасывая их состояние. React скрывает DOM, выполняет очистки эффектов и восстанавливает всё, когда режим снова становится "visible". Это подходит для вкладок и панелей, к которым пользователь, скорее всего, вернётся.

import { Activity, useEffect, useState } from 'react';

function Notes() {
    const [text, setText] = useState('');
    useEffect(() => {
        console.log('Notes effect: setup');
        return () => console.log('Notes effect: cleanup');
    }, []);
    return <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} placeholder="Type a note" />;
}

export default function App() {
    const [tab, setTab] = useState('notes');

    return (
        <div>
            <button onClick={() => setTab('notes')}>Notes</button>
            <button onClick={() => setTab('about')}>About</button>
            <div style={{ marginTop: 8 }}>
                <Activity mode={tab === 'notes' ? 'visible' : 'hidden'}>
                    <Notes />
                </Activity>
                {tab === 'about' && <p>Your note is kept while this tab is open.</p>}
            </div>
        </div>
    );
}

Напишите заметку, переключитесь на About и обратно. Текст на месте, а консоль показывает, что эффект был очищен, пока панель была скрыта. Замените обёртку <Activity> на {tab === 'notes' && <Notes />}, и заметка будет теряться при каждом переключении.

useEffectEvent выносит функцию из зависимостей эффекта. Функция всегда видит последние пропсы и состояние, но их изменение не перезапускает эффект:

function ChatRoom({ roomId, theme }) {
    const onConnected = useEffectEvent(() => {
        showNotification('Connected!', theme);
    });

    useEffect(() => {
        const connection = createConnection(roomId);
        connection.on('connected', () => onConnected());
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]); // theme is not a dependency
}

19.2 также добавил cacheSignal для Server Components (он сообщает, когда результат cache() больше не нужен) и Performance Tracks в панели производительности Chrome DevTools. React 19.1 добавил captureOwnerStack, функцию только для разработки, которая возвращает, какие компоненты отрендерили текущий.

Server Components и Server Functions

Server Components это компоненты, которые выполняются заранее на сервере (или во время сборки) и отправляют свой вывод в браузер. Они могут быть async и читать базу данных напрямую, а их код никогда не попадает на клиент. Server Functions (сначала назывались Server Actions) это асинхронные функции, помеченные 'use server', которые клиентский компонент может вызывать как обычную функцию. Обоим нужен фреймворк с бандлером, который их поддерживает, например App Router в Next.js, поэтому в этом редакторе они запуститься не могут.

// A Server Component: async, runs on the server only
export default async function Notes() {
    const notes = await db.notes.findMany();
    return notes.map((note) => <Note key={note.id} note={note} />);
}

// A Server Function, usable as a form action
async function createNote(formData) {
    'use server';
    await db.notes.create({ text: formData.get('text') });
}

Удалённые и изменённые API

React 19 удалил API, которые много лет были устаревшими:

Классовые компоненты сохраняют defaultProps. Ошибки тоже сообщаются иначе: ошибки, пойманные границей ошибок, один раз логируются через console.error, непойманные ошибки уходят в window.reportError, а createRoot принимает опции onCaughtError и onUncaughtError, чтобы сообщать о них самостоятельно.

Обновление до React 19

Сначала обновитесь до React 18.3. Он идентичен 18.2, но предупреждает об устаревших API и других изменениях, которые нужны React 19, поэтому их можно исправить, пока приложение ещё работает. React 19 также требует современного преобразования JSX, которое уже используют Vite и все актуальные фреймворки. Затем установите React 19:

npm install react@^19 react-dom@^19
npm install --save-dev @types/react@^19 @types/react-dom@^19

Официальное руководство по обновлению указывает на codemod для механических изменений. Первый охватывает строковые рефы, импорты act и ReactDOM.render; второй обновляет код TypeScript под новые типы:

npx codemod@latest react/19/migration-recipe
npx types-react-codemod@latest preset-19 ./src

После обновления ничто не заставляет вас переходить на Actions или новые хуки. Существующие компоненты, хуки и классовые компоненты продолжают работать; формы можно переводить на <form action> по одной.