A lightweight React hook to generate unique keys for items without predefined IDs, avoiding the pitfalls of using array indexes as keys. Perfect for rendering lists where item identities are not explicitly defined.

use-id-generated-items.ts

import {useState} from 'react';

import {nanoid} from 'nanoid';

export type ItemWithId<T> = T & { id: string };

export const useIdGeneratedItems = <T>(items: T[]): [ItemWithId<T>[], (items: ItemWithId<T>[]) => void] => {
    const [itemsWithId, setItemsWithId] = useState(() => items.map(item => ({...item, id: nanoid()})));

    return [itemsWithId, setItemsWithId];
};