Back to all snippets
Library/Utilities/Generate Unique ID
javascriptbeginnerutilitiesidrandom

How to implement Generate Unique ID in Javascript

Generate unique identifiers for items

Quick Answer

Use `crypto.randomUUID()` in modern environments for a collision-proof UUID. The Date + `Math.random` fallback is lightweight and sufficient for temporary client-side keys.

Code Snippet

1const generateId = () => {
2  return Date.now().toString(36) + Math.random().toString(36).substring(2);
3};
4
5// Or using crypto for better randomness
6const generateSecureId = () => {
7  return crypto.randomUUID();
8};

What is Generate Unique ID?

Unique IDs are needed whenever you create items without an immediate database-assigned ID. crypto.randomUUID() is the modern standard, available in all current browsers and Node.js 15+. The Date-based fallback is lightweight and collision-resistant enough for client-side temporary keys.

How It Works

  1. 1`crypto.randomUUID()` uses the browser's or Node's cryptographic RNG to produce a standard UUID v4.
  2. 2The Date + random fallback concatenates a base-36 timestamp with a base-36 random fragment for a compact, URL-safe ID.
  3. 3Neither approach requires any library or build step.

Common Use Cases

  • React list keys - Generate stable keys for dynamically added list items
  • Temporary records - Assign local IDs before syncing with a backend
  • Form field IDs - Generate unique htmlFor/id pairs for accessibility
  • Session tokens - Create lightweight session identifiers

Key Benefits

  • crypto.randomUUID is cryptographically random and collision-proof
  • Date-based fallback works in older environments without dependencies
  • No external library required
  • Tiny implementation suitable for tree-shaking

Common Mistakes to Avoid

  • Using `Math.random()` alone for IDs — its range is limited and collisions are possible under load.
  • Using `Date.now()` alone — timestamps are identical within the same millisecond for concurrent operations.
  • Calling `crypto.randomUUID()` in environments that don't support it (Node < 15, IE) — always check or use the fallback.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more javascript examples

Frequently Asked Questions

When should I use crypto.randomUUID vs a database-generated ID?

Use `crypto.randomUUID()` for client-generated IDs, optimistic UI updates, or offline-first apps. Use database-generated IDs (serial, UUID with default) when the server controls ID assignment and uniqueness across all clients.

Related Snippets

javascript
beginner
Email Validation
Validate email addresses with regex
validationemailregex
javascript
beginner
Date Formatting
Format dates in various common formats
dateformattingtime
javascript
intermediate
Query String Parser
Parse and stringify URL query strings
urlparsingutilities

About This Javascript Code Snippet

This free javascript code snippet for generate unique id is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement generate unique id quickly and correctly.

All snippets in the Snippetly library follow javascript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses javascript.

Tags: utilities, id, random  | Language: javascript  | Difficulty: beginner  | Category: Utilities

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets