React hook for getting a unique identifier for a component

useComponentId.js

import { useRef } from 'react';

let uniqueId = 0;
const getUniqueId = () => uniqueId++;

export function useComponentId() {
  const idRef = useRef(getUniqueId());
  return idRef.current;
}

On a side note, nanoId is considerably faster than shortId or uniqueId according to their benchmarks.

There is an open issue for this on the react repo.

Here is a more robust implementation that also supports SSR.

Also, for test snapshot support, you'll want a predictable id, maybe using a different prop from the instance.

You shouldn't be using snapshots at all. write proper tests.

For anyone stumbling upon this in 2023 there's React.useId for this very purpose since React v18.