useOptimistic

  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) => {
      // merge and return new state
      // with optimistic value
    }
  );
}

См. примеры ниже.

Параметры

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

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

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

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

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

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

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

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js";

function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}