React 19 useOptimistic: как справиться с условиями гонки, когда несколько оптимистичных обновлений влияют на один и тот ⇐ Javascript

[Anonymous]

Я создаю приложение для совместного управления задачами, используя хук useOptimistic в React 19. Несколько пользователей могут одновременно обновлять свойства задачи (статус, приоритет, ответственный). Я сталкиваюсь с состоянием гонки, когда оптимистичные обновления перезаписывают друг друга, что приводит к несогласованному состоянию пользовательского интерфейса.
Среда
React 19.0.0
Next.js 15.1.0
Действия сервера при мутациях
Когда два быстрых обновления нацелены на одну и ту же задачу, но с разными свойствами, второе оптимистическое обновление полностью заменяет первое, а не объединение изменений. Это приводит к тому, что пользовательский интерфейс на короткое время отображает неверные данные, пока не поступит ответ сервера.
вот код:

Код: Выделить всё

'use client';
import { useOptimistic } from 'react';
import { updateTaskStatus, updateTaskPriority } from './actions';

function TaskItem({ task }) {
const [optimisticTask, setOptimisticTask] = useOptimistic(
task,
(state, newTaskData) => ({ ...state, ...newTaskData })
);

const handleStatusChange = async (newStatus) => {
setOptimisticTask({ status: newStatus });
await updateTaskStatus(task.id, newStatus);
};

const handlePriorityChange = async (newPriority) => {
setOptimisticTask({ priority: newPriority });
await updateTaskPriority(task.id, newPriority);
};

return (

{optimisticTask.title}
 handleStatusChange(e.target.value)}
>
To Do
In Progress
Done


 handlePriorityChange(e.target.value)}
>
Low
Medium
High


Status: {optimisticTask.status}
Priority: {optimisticTask.priority}

);
}

Проблема: в пользовательском интерфейсе кратко отображается статус: «todo» (исходное), поскольку второе оптимистическое обновление не включало статус.
Вопрос:
Каков рекомендуемый шаблон для обработки нескольких одновременных оптимистических обновлений в React 19 с использованием Optimistic перехватчика, когда обновления могут приходить не по порядку и влиять на перекрывающееся состояние? Должен ли я реализовать очередь ожидающих обновлений с логикой слияния, или React 19 предоставляет встроенные механизмы согласования, о которых я не знаю?

Подробнее здесь: https://stackoverflow.com/questions/798 ... timistic-u