Skip to content

Instantly share code, notes, and snippets.

@sorenlouv
Last active June 16, 2023 15:26
Show Gist options
  • Save sorenlouv/fc897c1629979e669714893df966b1b7 to your computer and use it in GitHub Desktop.
Save sorenlouv/fc897c1629979e669714893df966b1b7 to your computer and use it in GitHub Desktop.
React hook for getting a unique identifier for a component
import { useRef } from 'react';
let uniqueId = 0;
const getUniqueId = () => uniqueId++;
export function useComponentId() {
const idRef = useRef(getUniqueId());
return idRef.current;
}
@akomm
Copy link

akomm commented Feb 27, 2021

@notthatnathan it has actually been explained here.

@notthatnathan
Copy link

Oops, missed it. Thanks.

@notthatnathan
Copy link

FWIW, after generating the id (I used shortid()) as the initial value (as mentioned above), it doesn't change in my testing. I don't believe the undefined check and reassignment is necessary with refs.

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

const id = useRef(process.env.NODE_ENV === 'test' ? `test-${title}` : shortid());

@akomm
Copy link

akomm commented Mar 2, 2021

FWIW, after generating the id (I used shortid()) as the initial value (as mentioned above), it doesn't change in my testing. I don't believe the undefined check and reassignment is necessary with refs.

Why is it not needed and how do the two things relate (I don't know your shortid implementation).

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

const id = useRef(process.env.NODE_ENV === 'test' ? `test-${title}` : shortid());

You add test-related code in a component? And also you change behavior depending on how id is used the outcome might be different in test than prod.

@notthatnathan
Copy link

notthatnathan commented Mar 2, 2021

You add test-related code in a component? And also you change behavior depending on how id is used the outcome might be different in test than prod.

Doesn't change behavior, just changes the id. Otherwise every run of your test, you get snapshot updates (new id on mount), which defeats the purpose of snapshots.

Why is it not needed and how do the two things relate (I don't know your shortid implementation).

I'm not sure I understand the question. I'm just saying that this:

  const idRef = useRef(null);
  if (idRef.current === null) {
    idRef.current = getUniqueId()
  }
  return idRef.current;

and this

  const idRef = useRef(getUniqueId());
  return idRef.current;

both return a unique ID that doesn't change on re-render. Which makes sense, refs wouldn't be useful if the initial value changed. Log from the calling component to see what I mean.

(shortid is just an id-generating package my org uses)

updated, typo in the second code example

@akomm
Copy link

akomm commented Mar 4, 2021

You add test-related code in a component? And also you change behavior depending on how id is used the outcome might be different in test than prod.

Doesn't change behavior, just changes the id. Otherwise every run of your test, you get snapshot updates (new id on mount), which defeats the purpose of snapshots.

It does. You use different ID generation methods. If one of the different methods generate non-unique ID, it will work in one, but fail in the other or lead to different results, depending on how you use the generated ID.

Sorry. I don't get what you are talking about. You've just changed things replying to my initial question. Why is it null instead of undefined? Also you did not answer why the undefined check is not needed. I don't understand the problem.

@bluenote10
Copy link

bluenote10 commented Mar 6, 2021

In cases where I don't need globally unique IDs, but rather IDs unique per component I'm using this hook:

export function useIdGenerator(): () => number {
  const ref = useRef(0);

  function getId() {
    ref.current += 1;
    return ref.current;
  }

  return getId;
}

@meglio
Copy link

meglio commented Jul 9, 2021

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

@Izhaki
Copy link

Izhaki commented Mar 16, 2022

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

Here is a more robust implementation that also supports SSR.

@airtonix
Copy link

airtonix commented Apr 1, 2022

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.

@mbonaci
Copy link

mbonaci commented Jun 16, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment