React19のuseOptimisticとDnDを組みせるといい感じ

BRANK

React19のuseOptimisticの使いどころがそんなにわからないなと思っていた昨今ですが、めっちゃハマる使いどころを見つけたので共有します！useOptimisticってなに？ client'; import { DndContext, type DragEndEvent, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core'; import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy, } from '@dnd-kit/sortable'; type Props = { items: Item[]; }; const List = ({ items }: Props) => { const sensors = useSensors( useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ); const handleDragEnd = async(event: DragEndEvent) => { const { active, over } = event; if (over === null) return; if (active.id !== over.id) { const oldIndex = lists.findIndex((item) => item.id === active.id); const newIndex = lists.findIndex((item) => item.id === over.id); await setItems(arrayM…