const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

• Справочник
  • useOptimistic(state, updateFn)
• Использование
  • Оптимистичное обновление форм

Справочник

useOptimistic(state, updateFn)

useOptimistic — это хук React, который позволяет показать другое состояние, пока выполняется какое-то асинхронное действие. Он принимает состояние, которое может отличаться во время выполнения асинхронного действия, например, таким действием может быть сетевой запрос. Вы передаёте функцию, которая принимает текущее состояние и входные параметры для какого-то действия, и возвращает оптимистичное состояние, которое используется пока действие находится в режиме ожидания.

Это состояние называется «оптимистичным», потому что оно обычно используется для немедленного отображения пользователю результата выполнения действия, даже если само действие требует времени для завершения.

import { useOptimistic } from 'react';
function AppContainer() {
const [optimisticState, addOptimistic] = useOptimistic(
state,
// updateFn
(currentState, optimisticValue) => {
// объедините и верните новое состояние
// с оптимистичным значением
}
);
}

Посмотрите больше примеров ниже.

Параметры

• state: значение, которое вернётся изначально, и во всех случаях, когда нет действий в состоянии ожидания.
• updateFn(currentState, optimisticValue): функция, которая принимает текущее состояние и оптимистичное значение, переданное в addOptimistic, и возвращает результирующее оптимистичное состояние. Функция должна быть чистой. updateFn принимает два параметра: currentState и optimisticValue. Возвращаемое значение будет результатом объединения currentState и optimisticValue.

Возвращаемое значение

• optimisticState: Результат оптимистичного состояния. Оно равно state, пока нет действий в состоянии ожидания, иначе будет равно значению, возвращённому из updateFn.
• addOptimistic: addOptimistic — это функция-диспетчер, которая вызывается при оптимистичном обновлении. Она принимает только один аргумент optimisticValue любого типа и вызовет updateFn с параметрами state and optimisticValue.

Использование

Оптимистичное обновление форм

Хук useOptimistic предоставляет возможность для оптимистичного обновления пользовательского интерфейса перед завершением работы в фоновом режиме, например, сетевого запроса. В контексте форм, эта техника помогает сделать приложение более отзывчивым. Когда пользователь отправляет форму, приложение не ждёт ответ сервера и сразу обновляет интерфейс с учётом ожидаемого результата.

Например, когда пользователь вводит сообщение в форму и нажимает кнопку “Отправить”, хук useOptimistic позволяет сообщению сразу отобразиться в списке с надписью “Отправка…”, ещё до того как сообщение фактически будет отправлено на сервер. Этот “оптимистичный” подход создаёт ощущение скорости и отзывчивости. Затем данные формы действительно отправляются на сервер в фоновом режиме. Как только приходит подтверждение сервера о том, что сообщение получено, надпись “Отправка…” удаляется.