Optimistic Inline Commit
An instant-feedback control with the parts everyone skips: request sequencing and a rollback that restores the right value.
- Category
- Components
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
- click two statuses quickly
Props
"use client";
import { useEffect, useRef, useState } from "react";
const STATES = ["Backlog", "In progress", "Review", "Done"];
type Entry = { id: number; value: string; state: "sent" | "ok" | "failed" | "stale" };
export function OptimisticInlineCommit({
states = STATES,
initial = "Backlog",
latency = 900,
sequencing = true,
jitter = true,
failEvery = 4,
onCommit,
}: {
states?: string[];
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
Optimistic updates are three lines of code and three bugs. The first is that responses do not arrive in the order they were sent, so a slow early save can land after a fast later one and silently revert whatever the user did most recently — the nastiest defect in optimistic UI, because it only appears under load, which is exactly where nobody is watching. Every save here carries a monotonically increasing token, and any response whose token is no longer current is discarded rather than applied. The second is the rollback target: restoring “the last value the server confirmed” is wrong the moment two edits overlap, because that value is one the user already moved past, and restoring it reads as the interface inventing state. The pre-edit value is captured per request instead. The third is rolling back over a newer success — a failed request must only restore the old value if its own token is still the latest, or the failure clobbers an edit that already went through. The simulated backend deliberately alternates slow and fast round trips, because a uniform delay hides the very reordering the sequencing exists to survive, which is how this class of bug gets through review. Progress shows as a hairline rather than a spinner over the value, since the whole promise of the pattern is that the new value is usable immediately.
Curator’s note
Turn sequencing off, then click two statuses quickly. The first one you picked wins. That is the bug, and it only appears under load.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Async Action Button
componentsA button that survives a real round trip — a minimum pending duration, a width that never twitches, aria-disabled instead of disabled.
Floating Label Input
componentsA text input whose label floats from placeholder position into a caption on focus.
File Upload Dropzone
componentsA real drag-and-drop file zone with a live dragover state and file chips.