🚀 Хук useOptimistic: Оптимизация UI с прогнозом изменений Привет! Сегодня расскажем о полезном хуке в React — useOptimistic, который позволяет улучшить пользовательский опыт, прогнозируя изменения данных до их завершения. 🔹Что такое useOptimistic? useOptimistic — это хук, который используется для создания оптимистичного UI. Оптимистичный UI означает, что мы сразу отображаем изменения в интерфейсе, предполагая, что операция на сервере пройдет успешно. Это помогает избежать задержек в UI и делает приложение более отзывчивым. 🔹Когда его использовать? Этот хук полезен, когда вам нужно работать с асинхронными операциями, такими как отправка данных на сервер или запросы к API. Он помогает не блокировать интерфейс до получения ответа от сервера. Например, при отправке формы или добавлении элемента в список, вы можете сразу показать обновленный список на экране, не дожидаясь ответа от сервера. 🔹Пример использования

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js"; //Promise отправки

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} />;
}

В этом примере, когда пользователь вводит сообщение в форму и нажимает кнопку "Send", хук useOptimistic позволяет сообщению сразу появиться в списке с меткой "Sending...", даже до того, как сообщение на самом деле будет отправлено на сервер. Этот «оптимистичный» подход создает впечатление скорости и отзывчивости. Затем форма пытается отправить сообщение в фоновом режиме. Как только сервер подтверждает, что сообщение было получено, метка "Sending..." удаляется. 🔹 Преимущества использования? 1. Отзывчивость интерфейса — изменения происходят немедленно, без задержки. 2. Поддержка асинхронных операций — позволяет обрабатывать операции с сервером без блокировки UI. 3. Гибкость — легко настраиваемая логика для отката изменений в случае ошибки. Этот хук поможет вам создать более быстрые и приятные интерфейсы, где пользователь будет уверенно работать с данными, не ожидая долгих задержек. 🎯 Заключение useOptimistic — это отличный инструмент для оптимизации работы с асинхронными запросами и обеспечения плавного пользовательского опыта. Используйте его, чтобы улучшить отзывчивость вашего приложения и показать пользователю, что он может продолжать работать, даже если процесс еще не завершен. В настоящее время хук useOptimistic доступен только в Canary. ReactJs Daily | #shortinfo