tgoop.com/startpoint_dev/56
Create:
Last Update:
Last Update:
📢 Новые хуки в React 19! Часть 2
В предыдущей части мы посмотрели на хуки useActionState и useFormStatus, а сегодня разберем useOptimistic💡
Напоминаю, что все примеры лежат в нашем репозитории здесь 👉 GitHub
🔍 useOptimistic
Часто в современных интерфейсах используют подход, который называется Optimistic UI. Он заключается в том, что мы предполагаем, что на бэкенде запрос выполнится успешно, поэтому сразу можем показать пользователям обновленное состояние.
Ранее для реализации такого поведения приходилось сильно хитрить. Нельзя просто вызвать useState в обработчике перед асинхронной операцией и ожидать, что React сразу же отрисует новое состояние. Посмотрите на пример 5:
const [optimisticResult, setOptimisticResult] = useState(store);
... = useActionState(async (__: string | null, formData: FormData) => {
setOptimisticResult((prevState) => ({
title: formData.get('title')?.toString() || prevState.title,
description: formData.get('description')?.toString() || prevState.description,
}));
await saveData(formData);
return 'ok';
}, null);
Дело в том, что в React есть специальный механизм оптимизации — Batching, который не позволяет изменениям произойти до получения ответа от сервера.
Эту проблему решает новый хук
useOptimistic. Если заменить в примере useState на этот хук, всё заработает правильно. Пример 6 использования нового хука:
const [optimisticResult, setOptimisticResult] = useOptimistic(store);
... = useActionState(async (__: string | null, formData: FormData) => {
setOptimisticResult((prevState) => ({
title: formData.get('title')?.toString() || prevState.title,
description: formData.get('description')?.toString() || prevState.description,
}));
await saveData(formData);
return 'ok';
}, null);
А если наша отправка формы завершится ошибкой, “оптимистичное” состояние автоматически сбросится. Пример использования с обработкой ошибок:
const [optimisticResult, setOptimisticResult] = useOptimistic(store);
... = useActionState(async (__: string | null, formData: FormData) => {
setOptimisticResult((prevState) => ({
title: formData.get('title')?.toString() || prevState.title,
description: formData.get('description')?.toString() || prevState.description,
}));
try {
await saveData(formData);
} catch (e) {
return 'not ok';
}
return 'ok';
}, null);
Дело в том, что при использовании
useOptimistic мы передаем в него то значение, для которого хотим сделать оптимистичную версию (в данном примере это store).
const [optimisticResult, setOptimisticResult] = useOptimistic(store);
После выполнения обработчика в хук запишется значение, соответствующее текущему состоянию
store.✍️ Пишите в комментариях, полезней ли на ваш взгляд хук
useOptimistic, чем два предыдущих. Мне кажется, этот хук будет использоваться чаще, чем useActionState и useFormStatus.BY Настя Котова // Frontend & Node.js
Share with your friend now:
tgoop.com/startpoint_dev/56