React.js useIdentify hook that generates an unique id with really random generated numbers for each name provided.

0. useIdentify.ts

import { useCallback, useMemo } from 'react';
import generateHash from './generateHash.js';

export type Identify = (name: string) => string;

function useIdentify(): Identify {
  const ids = useMemo(() => new Map<string, string>(), []);

  return useCallback((name) => {
    if (!ids.has(name)) {
      ids.set(name, `id-${generateHash()}`);
    }

    // `!` was used because it was checked in the `if` above.
    return ids.get(name)!;
  }, [ids]);
}

export default useIdentify;

1. generateHash.ts

import fromByteToHex from './fromByteToHex';

function generateHash(size = 8): string {
  const values = new Uint8Array(size / 2);

  // Fill in values array with really random numbers.
  window.crypto.getRandomValues(values);

  return Array.from(values, fromByteToHex).join('');
}

export default generateHash;

2. fromByteToHex.ts

function fromByteToHex(byte: number): string {
  return byte.toString(16).padStart(2, '0');
}

export default fromByteToHex;