Search code examples
javascriptreactjsuuid

How to generate UUIDs in JS or React?


In my React app, I want to do optimistic updates to create a responsive experience for my users.

Having said that I want to send a user entry to my backend with an ID that will be used so that there won't be a different Id for the user's entry next time he/she uses the app. For example, if the user enters a comment, I want to assign its ID with a real UUID and then send it to my API.

I understand JavaScript or React don't really have a built-in way to generate UUID/GUID values. I've seen many articles that produce randomized values that look like UUID/GUID's but they really are not and I don't want to use them as ID's for user entries.

How do I get real UUID/GUID values in my frontend? Do I call my backend API to get them? I can create an endpoint in my API that spits out 10 or 20 GUID's at a time and I can store them for future use in my frontend but this sounds a bit absurd.

I don't want to reinvent the wheel here as I'm not the first person to face this scenario. How do I get real UUID values on my frontend?


Solution

  • You can use the uuid npm package. You probably want to use a v4 UUID. (Previous UUID versions use things like a timestamp or network card MAC address as seeds to the random generator).