By the end of this tutorial, you’ll know when and how to use Lodash’s _.uniqueId() to create quick, incrementing string identifiers in JavaScript.
Call _.uniqueId([prefix]) with an optional string prefix.
Understand that one shared counter drives every call.
Assign id attributes and temporary client-side keys.
Use descriptive prefixes like user_ or row_ for clarity.
Not for databases, security tokens, or cross-session uniqueness.
Compare with crypto.randomUUID() and when to switch.
_.uniqueId()?_.uniqueId() is a Lodash utility that returns a string identifier built from an optional prefix plus an auto-incrementing number. Lodash keeps a single module-level counter; every call advances it by one, so you never get the same ID twice in the same runtime.
Think of _.uniqueId('task_') as a quick label printer: first call gives task_1, next gives task_2, and so on. It is handy for temporary names—not for permanent database IDs.
You will see this in tutorials, prototypes, and DOM scripts where you need a unique id or key without pulling in a UUID library. For production persistence or security-sensitive identifiers, prefer purpose-built solutions instead.
The signature is minimal—an optional prefix string:
_.uniqueId([prefix])prefix — optional string prepended to the number (defaults to empty)."user_42" or "7".import uniqueId from "lodash/uniqueId";
const id = uniqueId("user_");
// -> "user_1" (first call in this runtime)| Task | Code pattern | Result |
|---|---|---|
| With prefix | _.uniqueId("item_") | item_1, then item_2, … |
| No prefix | _.uniqueId() | "1", "2", "3", … |
| DOM element id | el.id = _.uniqueId("div_") | Unique id on the page |
| In-memory row key | { id: _.uniqueId("row_"), … } | Temp key before save |
| Secure random ID | crypto.randomUUID() | Use instead for tokens/UUIDs |
| Sequential numbers | _.times() + index | When you control the loop |
StringPrefix + number
GlobalShared across prefixes
RuntimeResets on reload
UUIDFor persisted IDs
The single optional argument and what Lodash returns:
prefix OptionalA string placed before the incrementing number. Omit it to get bare numbers as strings ("1", "2"). Use short, meaningful prefixes for debugging and DOM ids.
_.uniqueId("btn_")
_.uniqueId()return value StringConcatenation of prefix + counter. The counter increases by 1 on every _.uniqueId() call anywhere in your app that shares the same Lodash instance.
_.uniqueId("x_") // "x_1"
_.uniqueId("y_") // "y_2"counter state InternalLodash stores the counter on its internal namespace. You cannot reset it through the public API—reload the page or create a fresh Lodash context with _.runInContext() if you need a clean slate.
// one shared sequencenot suitable for ImportantDatabase primary keys, API auth tokens, file names that must never collide across users, or React list keys that must stay stable between renders.
// use UUID / server id insteadLodash converts the numeric part to a string and concatenates it with your prefix. There is no separator added automatically—you include underscores or dashes in the prefix yourself.
Practical _.uniqueId() patterns with copy-ready code, sample output, and interactive Try It Yourself labs.
Generate your first prefixed IDs and see how the counter advances.
Create a readable identifier by passing a prefix string. Each call returns the next number in the sequence.
const first = _.uniqueId("user_");
const second = _.uniqueId("user_");
console.log(first);
// -> "user_1"
console.log(second);
// -> "user_2"Lodash appends the current counter value to your prefix and then increments the counter. The prefix is only for readability—the number always comes from the shared sequence.
Skip the prefix when you only need simple numeric strings.
console.log(_.uniqueId());
// -> "3" (continues from prior examples)
console.log(_.uniqueId());
// -> "4"With no prefix, Lodash returns just the counter as a string. The counter never resets between prefixed and non-prefixed calls.
A common surprise: different prefixes still share the same number sequence.
console.log(_.uniqueId("alpha_"));
// -> "alpha_5"
console.log(_.uniqueId("beta_"));
// -> "beta_6" — not "beta_1"If you need independent counters per prefix, maintain your own map of counts or use a different ID strategy. Lodash intentionally keeps one global sequence for simplicity.
Real-world places where lightweight incrementing IDs help in the browser.
When creating elements dynamically, give each one a unique id for styling, testing, or document.getElementById.
const panel = document.createElement("div");
panel.id = _.uniqueId("panel_");
panel.textContent = "Dynamic panel";
document.body.appendChild(panel);
// panel.id might be "panel_7"HTML requires unique id values on a page. _.uniqueId() is a quick way to avoid collisions when you append elements in a loop or event handler.
Before data is saved to a server, assign client-side keys so list UIs can track rows.
function addRow(label, rows) {
rows.push({
clientId: _.uniqueId("row_"),
label
});
return rows;
}
const cart = [];
addRow("Notebook", cart);
addRow("Pen", cart);
console.log(cart);
// [
// { clientId: "row_8", label: "Notebook" },
// { clientId: "row_9", label: "Pen" }
// ]Replace clientId with the real server id after save. Do not use _.uniqueId() inside React render as a key—keys must stay stable across re-renders.
When Lodash is not the right tool and what to use instead.
For unpredictable, globally unique strings, native and third-party UUID helpers are a better fit.
// Lodash — predictable, incrementing (good for temp labels)
const temp = _.uniqueId("draft_");
// Browser — random UUID v4 (good for tokens, file names)
const secure = crypto.randomUUID();
// e.g. "f47ac10b-58cc-4372-a567-0e02b2c3d479"
// When you control the loop, _.times also works:
const numbered = _.times(3, (i) => `item_${i + 1}`);
// ["item_1", "item_2", "item_3"]Reach for _.uniqueId() in quick scripts, demos, and DOM utilities where readability and zero setup matter more than cryptographic strength.
_.uniqueId() WorksLodash uses the string you pass, or "" if omitted.
An internal idCounter (or equivalent) bumps by 1 on every call.
Prefix and counter are joined into one string—no extra separator is inserted.
Assign to DOM ids, in-memory objects, or log labels—unique until the runtime ends or counter wraps (practically never in normal apps).
_.uniqueId("a_") then _.uniqueId("b_") yields b_2, not b_1._.uniqueId() on every React render for key props—use stable ids from your data.crypto.randomUUID()._.uniqueId() is a small but handy Lodash helper: pass an optional prefix, get back the next incrementing string, and move on. It shines for DOM ids, prototypes, and temporary client-side labels where you need uniqueness without ceremony.
Keep its limits in mind—predictable numbers, process-scoped uniqueness, and a shared counter. When you need real UUIDs or persisted record ids, step up to crypto.randomUUID() or server-generated values.
panel_, row_) so IDs are self-documenting_.uniqueId() for temporary, in-browser identifierscrypto.randomUUID() when unpredictability matters_.uniqueId() values as permanent database primary keyskey values on every render with _.uniqueId()_.uniqueId()Use these points whenever you need a quick string identifier in JavaScript.
Returns a readable string.
BasicsAll prefixes share it.
GotchaResets on reload.
LimitsGreat for dynamic elements.
Use caseFor real persistence.
Production_.uniqueId uses a single shared counter for every prefix in your app. That is why _.uniqueId("a_") followed by _.uniqueId("b_") returns b_2, not b_1. For unpredictable IDs see crypto.randomUUID() in the MDN docs.
Open the Try It editor, run the examples, and experiment with your own prefixes.
6 people found this page helpful