UUID in React

React UUID Generator

A UUID in a component is not hard — the trap is calling the generator during render, where React is free to run it again.

Hydration-safeOne ID per mountStable keys

Version

How many

Uppercase Hyphens Braces { }

Result

Generated locally with the Web Crypto API — nothing leaves your browser.

Generating UUIDs in React

Calling crypto.randomUUID() directly in a component body produces a new value on every render, so any element keyed by it remounts and its state is lost. The fix is to anchor the value: useState(() => crypto.randomUUID()) generates once for the mount and never again, while useMemo is right when the ID should also change when an input changes.
In server-rendered apps there is a second failure mode. The HTML is produced on the server and hydrated on the client; a random value that differs between the two is a hydration mismatch. Generating inside an effect, or creating the value on the server and passing it down as a prop, keeps both trees identical.

How to generate

Press Generate UUID above to mint a value in this browser — nothing is sent anywhere.
Copy one value with Copy, or set How many and use Copy all for a fixture list.
Switch Version if your code needs v7 instead of the v4 default, and turn on Formatting to match your stack's conventions.

Use Cases

List keys for rows that have no natural ID yet, so reordering does not recycle component state.
Optimistic updates — mint the ID client-side, then send it and let the server keep it.
Form draft correlation when several unsaved forms must share one identifier before insert.

How React UUID Generator Compares

useState(() => uuid)	One value per mount — the usual answer
uuid in render body	New value every render; keys churn, state resets
index as key	Only safe for static lists; breaks on reorder or insert

Code Examples

React

import { useState } from 'react';

function Draft() {
  // Generated once per mount — not on every render
  const [id] = useState(() => crypto.randomUUID());

  return <input name="draftId" type="hidden" defaultValue={id} />;
}

Hydration-safe

import { useEffect, useState } from 'react';

function TraceId() {
  const [id, setId] = useState<string | null>(null);
  // Runs on the client only, so server HTML and client HTML agree
  useEffect(() => setId(crypto.randomUUID()), []);

  return <span>{id ?? '\u2026'}</span>;
}

Frequently Asked Questions

Why does my React key change on every render?

Because the UUID is generated in the component body. Move it into useState(() => ...) or useMemo so it is created once and then reused.

Can I use a UUID as a React key?

Yes — a stable one is ideal for lists that reorder. The rule is only that the key must stay the same between renders for the same item.

What causes a hydration mismatch with UUIDs?

The server and the client each generated their own value, so the markup differs. Generate in an effect, or create the ID on the server and pass it as a prop.