Actions в React 19
Вопрос
Расскажи, что такое actions в React 19 и как с ними сделать форму с индикатором загрузки и оптимистичным обновлением.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
В `action` формы можно передать функцию, она получает FormData, React отменяет перезагрузку
Action выполняется как transition и может быть асинхронным
`useActionState`: состояние результата, `formAction`, `isPending`; функция `(prevState, formData)`
`useFormStatus` в дочернем компоненте формы даёт `pending` без пробрасывания пропсов
`useOptimistic` показывает ожидаемый результат до ответа и откатывается после завершения
После успешного action неконтролируемые поля сбрасываются автоматически
Что могут спросить следом
- Почему
useFormStatusнельзя вызвать в том же компоненте, где форма? - Как обработать ошибку внутри action?
- Чем серверная функция в Next.js отличается от клиентского action?
Разбор
В React 19 actions это функции, которые запускают асинхронное изменение данных внутри перехода. Самый частый способ: передать функцию в action у <form>. React перехватит отправку, вызовет функцию с FormData, а после успеха сбросит неконтролируемые поля.
Для результата и загрузки беру useActionState. Он принимает функцию (prevState, formData) и начальное состояние, возвращает текущее состояние, formAction для формы и isPending. В функции я валидирую данные, вызываю API и возвращаю либо ошибку, либо успех, а компонент её показывает.
Кнопку отправки удобно сделать отдельным компонентом с useFormStatus: он читает статус родительской формы, поэтому кнопка переиспользуется в любой форме.
Для мгновенного отклика добавляю useOptimistic: в начале action вызываю addOptimistic с ожидаемым элементом, интерфейс обновляется сразу. Когда action завершится, хук вернётся к реальному состоянию, и если запрос упал, временный элемент исчезнет, а я покажу ошибку.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.