DEV Community

Cover image for Create a unique ID in React JS
Saleh Mubashar
Saleh Mubashar

Posted on • Updated on

Create a unique ID in React JS

Hi Guys
Ok so in this post I will be giving you guys
the simple steps to create a unique reference
ID in react JS.
This has many uses such as giving a user uploaded
image a unique name for saving in a database.

Step 1:

Install UUID v4 using the following command



npm install uuidv4


Enter fullscreen mode Exit fullscreen mode

Step 2:

Import the package into your component, page or code etc.



import { v4 as uuid } from 'uuid';


Enter fullscreen mode Exit fullscreen mode

Step 3:

You can now assign the Uinique ID to any variable using the below code
unique_id is an example here, it can be any variable name.



const unique_id = uuid();


Enter fullscreen mode Exit fullscreen mode

And voila!, you're done.

Thank you all for reading this post.
If it was helpful, please consider following :)
Until next time
Bye!

Top comments (4)

Collapse
 
felipebhz profile image
@FelipeBHZ • Edited

If you are reading this in 2023, you should use the react-uuid package, otherwise you are going to get errors like:

Uncaught RangeError: Maximum call stack size exceeded
at Object.exports.deprecate (util.js:75:1)

Collapse
 
salehmubashar profile image
Saleh Mubashar

Thanks a lot for this!

Collapse
 
catherineisonline profile image
Ekaterine Mitagvaria

I am using it in React 18 and not having such errors. Besides, seems like react-uuid is deprecated right now.

Collapse
 
luismartinezs profile image
Luis Martinez Suarez

This has nothing to do with React