Выбор ответа Middle Формы обновлено
useOptimistic при ошибке запроса
Вопрос
Запрос sendMessage завершился ошибкой, setMessages не вызывался. Что увидит пользователь после завершения action?
const [optimistic, addOptimistic] = useOptimistic(
messages,
(cur, text) => [...cur, { text, sending: true }],
);
async function action(formData) {
const text = formData.get('text');
addOptimistic(text);
try {
const saved = await sendMessage(text);
setMessages((m) => [...m, saved]);
} catch {
showToast('Не отправилось');
}
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Оно исчезнет: после перехода optimistic снова равен messages. Оптимистичное значение живёт только пока идёт action (переход).
Варианты ответа
- Оптимистичное сообщение останется навсегда с флагом
sending - Оно исчезнет: после перехода
optimisticснова равенmessagesправильный ответ - React автоматически повторит запрос, а сообщение останется
- Приложение упадёт:
useOptimisticтребует error boundary
Разбор
Оптимистичное значение живёт только пока идёт action (переход). Когда он закончится, useOptimistic вернёт базовое состояние messages. Раз туда ничего не добавили, временное сообщение пропадёт. Ошибку при этом стоит поймать и показать пользователю.
- Остаться навсегда оно не может: оптимистичное состояние не хранится отдельно.
- Повторов React не делает.
- Падения не будет: ошибка поймана в
catch, а сам хук error boundary не требует.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.