Scrum4Me/docs/patterns/zustand-optimistic.md

title	status	audience	language	last_updated	when_to_read
Zustand optimistische update + rollback	active	ai-agent contributor	nl	2026-05-03	When adding client-side state mutations that need optimistic UI and rollback.

Patroon: Zustand optimistische update + rollback

Gebruik dit patroon bij elke dnd-kit onDragEnd handler.

const { pbiOrder, reorderPbis, rollbackPbis } = usePlannerStore()

async function handleDragEnd(event: DragEndEvent) {
  const { active, over } = event
  if (!over || active.id === over.id) return

  const prevOrder = [...pbiOrder[productId]]
  const newOrder = arrayMove(prevOrder, oldIndex, newIndex)

  // 1. Optimistisch updaten (direct zichtbaar voor gebruiker)
  reorderPbis(productId, newOrder)

  // 2. Persisteren via Server Action
  const result = await reorderPbisAction(productId, newOrder)

  // 3. Rollback bij fout
  if (!result.success) {
    rollbackPbis(productId, prevOrder)
    toast.error('Volgorde opslaan mislukt')
  }
}