use-stable-ids

React hook to generate stable IDs for list items without unique IDs.

Installation

1npm install use-stable-ids

Usage

1import { useStableIds } from 'use-stable-ids'
2
3const items = [{ name: 'Product 1' }, { name: 'Product 2' }]
4
5const stable = useStableIds(items, {
6  getKey: item => item.name
7})
8
9return (
10  <>
11    {stable.map(item => (
12      <div key={item.__stableId}>{item.name}</div>
13    ))}
14  </>
15)

Options

Option	Type	Default	Description
getKey	(item) => string	(required)	Unique identifier for each item
idGenerator	() => string	crypto.randomUUID() or fallback	Custom ID generator
idFieldName	string	__stableId	Field name to store the stable ID

License

MIT

---

🧪 Example

Here is a simple product list using useStableIds:

1const rawProducts = [
2  { name: 'Sneakers', price: 120 },
3  { name: 'Jacket', price: 250 },
4  { name: 'Backpack', price: 80 },
5]
6
7const products = useStableIds(rawProducts, {
8  getKey: (item) => item.name + item.price,
9})
10
11return (
12  <>
13    {products.map(p => (
14      <div key={p.__stableId}>
15        {p.name} - ${p.price}
16      </div>
17    ))}
18  </>
19)