📢 Новые хуки в 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.