useActionState: новый герой в мире React

Привет, бравый покоритель фронтенда! Если ты когда-либо ковырялся в React и думал: «Эх, как же устроить красивую и понятную обработку состояния?», то вот новсть: есть такой хук — useActionState, и он может стать твоим лучшим другом.

Но постой! Разве раньше не было чего-то похожего под названием useFormState? И почему одни разработчики импортируют это из react-dom, а другие из react? Если такие вопросы посещали твою светлую голову, то добро пожаловать: сейчас мы разберёмся, почему useFormState ушёл на пенсию и чем так хорош useActionState.

Коротко о былом

В экспериментальных (Canary) версиях React существовал хук useFormState, который жил в пакете react-dom. Он помогал управлять состоянием формы и выполнял действия еще до того, как JavaScript успевал проснуться — всё звучит круто, да? Но в какой-то момент команда React решила, что функциональность этого хука гораздо шире, чем просто «форма». Так на его место пришёл useActionState, и обитает он уже не в react-dom, а прямо в react.

Иногда можно встретить статьи или примеры, где написано:

import { useFormState } from 'react-dom';

Но на дворе уже 19-я версия React (или ты можешь быть на другом экспериментальном канале), и useFormState больше не актуален. Теперь всё внимание на:

import { useActionState } from 'react';

Что это и как это работает

useActionState — это хук для тех, кто любит поддерживать порядок. Он позволяет управлять состоянием через «действия», то есть какие-то команды вроде «сделай это сейчас». При этом он чувствует себя отлично не только с формами, но и с любыми другими элементами, которые требуют обновления состояния при совершении какого-то действия.

Сигнатура проста:

const [currentState, actionFunction, isPending] = useActionState(fn, initialState, permalink?);

• currentState — актуальное состояние (любого типа, который ты ему назначишь);

• actionFunction — функция (или значение), которую можно прикреплять, например, к formAction или вызывать вручную;

• isPending — булевый флажок, который подскажет, находится ли действие в процессе выполнения (полезно для спиннеров, загрузок и прочих индикаторов).

А теперь подробнее о каждом параметре, который ты передаёшь в сам useActionState:

• fn — Главная функция, которую вызываем при действии (отправка формы, клик и т.д.).

  • Принимает предыдущее состояние (или начальное, если вызывается впервые)

  • Также получает все аргументы, которые обычно передаются при действии (например, FormData)

  • Возвращает новое состояние, которое затем попадает в currentState

• initialState — Начальное значение для состояния. Может быть чем угодно (число, строка, объект).

  • Используется только один раз, до первого вызова fn

  • После первого экшена итоговое состояние будет всегда возвращаться из fn

• permalink (необязательный) — Уникальный URL, куда перенаправляется форма, если JavaScript ещё не загрузился.

  • Полезно на динамических страницах (ленты товаров, блоги и т.д.)

  • На целевом URL должна рендериться та же форма (с тем же fn и permalink), чтобы React правильно передал состояние

  • После гидратации этот параметр не используется, так как весь дальнейший рендеринг идёт на клиенте

Если тебе этот хук напоминает useState на стероидах — значит, ты на верном пути!

Почему не просто useState?

useState— замечательный хук, и он с лёгкостью покрывает 90% базовых задач. Но бывают ситуации, когда в компоненте возникает 3–4 (или больше) состояний, связанных именно с результатом действия (например, сообщение об успехе/ошибке, флаг загрузки, дополнительная информация с сервера). Пример

const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [toastMessage, setToastMessage] = useState(''); // И это только начало...

Каждый раз заводить новый useState для вспомогательного статуса/ошибки — утомительно, и код становится громоздким. Вот тут useActionState бьёт кулаком по столу и говорит: «Позволь, я покажу класс!». Он позволяет хранить все «результаты» в одном объекте (например, { success, error, message, }) плюс имеет встроенный флаг isPending. Проще говоря, если перед тобой стоит задача «отправить данные и получить ответ» — лучше взять useActionState, чем лепить кучу маленьких useState .

Стоит учитывать, что когда говорят, что «useActionState может заменить множество useState», обычно имеют в виду именно вспомогательные состояния (статусы, ошибки, тексты уведомлений). Если же у тебя большая форма с десятью полями (имя, почта, пароль и т. д.), и ты хочешь управлять ими «всё в одном месте», то useActionState не подходит для всей логики: он не создан для многоэтапной работы над каждым полем. В таких случаях либо оставляют поля неконтролируемыми, либо используют useState/useReducer для управления значениями самих инпутов. А useActionState дополнительно помогает показать, как «форма отправилась и вернулась с сервера» — то есть результат и статус запроса.

Отличия от useFormState

Вкратце: useFormState жил в react-dom и подразумевал, что ты работаешь именно с формами. useActionState переехал в react и теперь его сфера применения не ограничена тегом <form>. Он работает с любыми действиями, будь то клик по кнопке, отправка формы, или вызов асинхронной функции, — и это чертовски удобно!

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

• Дружит с Server Components, позволяя обрабатывать состояние на сервере ещё до загрузки JS.

• Название с «action» в имени как бы намекает, что дело не только в формах.

Базовый пример

Что может быть лучше счётчика? Только пекарня! BunBakery — место, где мы добавим на прилавок столько булочек, сколько захотите!

import { useActionState } from 'react';  const bakeBun = async (previousCount, formData) => {   return previousCount + 1; };  export default function BunBakery() {   // Начальное количество булочек на прилавке - 0   const [bunsCount, bakeBunAction, isBaking] = useActionState(bakeBun, 0);    return (     <div>       <p>Булочек на прилавке: {bunsCount}</p>       <form>         <button formAction={bakeBunAction} disabled={isBaking}>           {isBaking ? 'Пеку пеку...' : 'Испечь булочку'}         </button>       </form>     </div>   ); }

Что здесь происходит?

• Когда вы нажимаете кнопку, вызывается bakeBunAction, который внутри себя запускает функцию bakeBun().

• Пока булочка «печётся» (да, даже если это занимает доли секунды), флажок isBaking будет равен true.

• Как только процесс завершится, количество булочек на прилавке (bunsCount) увеличится на 1.

Выглядит крайне лаконично. И это только вершина айсберга!

Пример «Загрузка файла»

Давай посмотрим, как useActionState справляется с чем-то более серьёзным, чем простой счётчик. Например, создадим компонент для загрузки файлов —UploadForm.

import { useActionState } from 'react';  // Функция обработки загрузки файла async function handleFileUpload(prevState, formData) {   try {     await new Promise(resolve => setTimeout(resolve, 2000));     return { success: true, message: 'Файл успешно загружен!' };   } catch (error) {     return { success: false, message: 'Ошибка при загрузке файла.' };   } }  function UploadForm() {   const [uploadStatus, uploadFileAction, isUploading] = useActionState(handleFileUpload, null);    return (     <form>       <input type="file" name="file" />       <button formAction={uploadFileAction} disabled={isUploading}>         {isUploading ? 'Загружаем...' : 'Загрузить файл'}       </button>        {uploadStatus && (         <p className={uploadStatus.success ? 'success' : 'error'}>           {uploadStatus.message}         </p>       )}     </form>   ); }  export default UploadForm; 

Здесь есть несколько моментов:

• uploadStatus — наше текущее состояние, которое может содержать что угодно: сообщение об успехе/ошибке, дополнительные поля и т. д.

• uploadFileAction — «экшен», который прикрепляется к кнопке через атрибут formAction. Он запускает процесс загрузки файла.

• isUploading — булевый флаг, показывающий, что файл загружается, и отключающий кнопку, чтобы избежать повторных кликов во время процесса.

Серверные функции и Server Components

Одна из важных «фишек» useActionState — это работа с Server Components и так называемыми «серверными действиями». Если ты используешь Next.js 13+ или другой фреймворк, поддерживающий React Server Components, то можешь вызывать серверную функцию напрямую:

import { useActionState } from 'react'; import { getDataFromServer } from './actions.server.js'; // "use server"  export default function ServerDataFetcher() {   // fetchData — «экшен», который запускает запрос на сервер   const [fetchedData, fetchData, isPending] = useActionState(async (prevData) => {     const result = await getDataFromServer();     return result;   }, null);    return (     <div>       <button onClick={() => fetchData()} disabled={isPending}>         {isPending ? 'Загружаем...' : 'Получить данные с сервера'}       </button>       {fetchedData && (         <p>Ответ сервера: {fetchedData}</p>       )}     </div>   ); }  // actions.server.js "use server";  export async function getDataFromServer() {   // Имитируем запрос к серверу   return 'Привет от сервера!'; }

Даже если JavaScript на клиенте отключен или не успел загрузиться, Server Components могут обработать твой запрос и передать готовый ответ. А когда клиент «проснётся» (гидратация завершится), React сопоставит обновлённое состояние с интерфейсом, так что пользователю всё равно всё будет работать «из коробки».

Best practices и мини-шпаргалка

• Инициализируй состояние так, чтобы оно отражало реальный объект, с которым предстоит работать.

• Обрабатывай ошибки возвращая из своей функции объект с error или success, чтобы в интерфейсе легко было показать соответствующее сообщение.

• Пользуйся isPending. Не бойся показывать индикатор загрузки или дизейблить кнопку. Пользователи любят понимать, что что-то происходит.

• Не ограничивай себя формами. Если у тебя экшены не связаны с формой, смело вызывай actionFunction() внутри onClick.

Итоги

useActionState — «прокачанный» вариант useState, позволяющий удобно обрабатывать одно «действие» (будь то отправка формы, добавление в корзину или загрузка файла) и иметь встроенный флаг загрузки. Он идеально подходит для сценариев, где после нажатия на кнопку (или отправки формы) нужно дождаться ответа с сервера и показать, как всё прошло: успешно или с ошибкой.

• Не для всего: если у тебя сложная форма с десятком полей и множеством отдельных действий, useActionState не заменит useReducer или несколько useState.

• Для «быстрой магии»: когда тебе нужно всего лишь одно действие, результат и isPending, он сэкономит время и строки кода.

• Интеграция с Server Components: даёт возможность обрабатывать «серверные действия» до гидратации, что ускоряет UX и упрощает код.

Если ты искал способ упростить логику «запрос — результат — отображение» и при этом не хотел городить огород изuseState, useActionState может стать тем самым «Ах, вот оно!».