Optimistic UI Requires Client-Side IDs (CUID)

Stop Waiting For The Server

Why your UI should feel instant, even on a slow network.

• Ordering Coffee — You get a ticket number before your coffee is ready. This lets you step away and wait, trusting the system.
• Sending a Text — Your message appears in the chat instantly, before the checkmark confirms it was delivered to the server.
• The Psychology — Users need immediate feedback. Acknowledging their action instantly makes an app feel fast and reliable.

The Classic Spinner Problem

Waiting for a database ID makes your amazing app feel slow.

• User Clicks 'Save' — The app shows a loading spinner. The user is now blocked, waiting.
• Server is Slow — The database has to create a new row and generate a unique primary key (e.g., an integer ID).
• UI Finally Updates — Once the server sends back the new object with its ID, the spinner disappears and the UI updates. This latency feels clunky.

Create IDs On The Client

How to give users instant feedback, decoupled from your backend.

• Generate Locally — When the user clicks 'Save', generate a unique ID string right in the browser using a library like cuid or uuid.
• Update UI Instantly — Add the new item to your state with the client-generated ID. The UI updates in milliseconds. No spinners!
• Sync in Background — Send the new object, including its client-side ID, to the server. The DB uses that ID as the primary key.

The Optimistic Mindset

Assume success, but always prepare for failure.

Your UI is a promise. Client-side IDs help you keep it.

What's your favorite library for generating client-side IDs? uuid, nanoid, or cuid2?