> ## Content Index
> Fetch the complete content index at: https://stalin-pereira.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Optimistic UI Requires Client-Side IDs (CUID)
- URL: https://stalin-pereira.com/optimistic-ui-requires-client-side-ids-cuid/
- Published: 2025-12-01T04:31:00.000Z
- Updated: 2026-10-16T19:08:11.000Z
- Description: Why you cannot implement instant UI updates if you have to wait for the Database to assign an ID
- Author: Stalin Pereira
- Tags: Frontend

**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?