📢 Новые хуки в React 19! Часть 1.

В одном из предыдущих постов мы писали про обновление React 19, и вы проголосовали за новые хуки для работы с состоянием! 💡

Я решила поразбираться в них, чтобы понять, что к чему и чем они отличаются от наших старых добрых и любимых useState и useReducer. На разборе у меня были три самых свежих и интересных:

1. useActionState
2. useFormStatus
3. useOptimistic

Все примеры лежат в нашем репозитории здесь 👉 GitHub

🔍 useActionState и useFormStatus

В документации React говорится, что useActionState даст преимущество в работе с Server Actions, поэтому я подняла проект, используя Next 15, который из коробки поддерживает React 19 (и сам находится в бете).

Без использования директивы "use server", useActionState может показаться ничем не отличающимся от useState. Однако в сочетании с Server Action он становится очень интересным инструментом.

В самом первом примере есть простая форма с одним полем, которая отправляет данные на сервер с помощью useActionState.

export function FormUseActionState() {
  const [result, formAction] = useActionState(submitForm, null);

  return (
    <form action={formAction}>
      <h2>Form With useActionState</h2>
      <input name="title" />

      <button type="submit">Save!</button>
    </form>
  );
}

'use server';

export const submitForm = (prevState: string | null, form: FormData) => {
  return form.get('title')?.toString() || '';
};

Примечательно, что в случае работы с Server Action нам достаточно просто передать его первым аргументом в useActionState, и дальше мы можем использовать возвращаемый из хука formAction напрямую в теге form. Таким образом мы:
1. совершенно не думаем о том, каким образом данные будут ходить с клиента на сервер и обратно
2. полагаемся на нативную браузерную обработку форм, не используя дополнительные обработчики onChange каждого поля и отдельные состояния, если нам это не нужно
3. можем миксовать серверный и клиентский код рядом друг с другом

Во втором примере можно увидеть, что у нас также доступен isPending:

const [result, formAction, isPending] = useActionState(submitForm, null);

Однако если у нас произойдет какая-то ошибка в серверном submitForm, то все наше приложение упадет - можно посмотреть на 3 примере. А это значит, что мы обязательно должны позаботиться об обработке ошибок в той функции, которую передаём хуку useActionState.

Также, если мы не хотим заниматься глубоким прокидыванием isPending в дочерние компоненты форм, можно использовать новый хук useFormStatus - 4 пример

const { pending } = useFormStatus();

✍️ Во второй части разберем хук useOptimistic, а пока пишите в комментариях, что показалось интересным и как, по вашему мнению, часто будут использоваться новые хуки!

❤️ Реагируйте, если хотите увидеть обзор на Server Components и Server Actions!