Оптимистичные обновления интерфейса

Хук useOptimistic() в React позволяет обновлять состояние интерфейса до завершения серверного запроса, создавая ощущение мгновенного отклика. Первым аргументом передаётся массив или объект исходного состояния, вторым — функция, формирующая новое состояние из предыдущего и действия.

'use client';

import { useOptimistic } from 'react';

function TodoList({ todos }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  const handleAdd = async (text) => {
    addOptimisticTodo({ text });
    await fetch('/api/todo', { method: 'POST', body: JSON.stringify({ text }) });
  };

  return (
    <ul>
      {optimisticTodos.map((todo, i) => <li key={i}>{todo.text}</li>)}
    </ul>
  );
}

Метод addOptimisticTodo мгновенно обновляет список до ответа сервера. После получения реального ответа можно синхронизировать состояние или повторно перерендерить данные.

👉 @sWebDev