What is a UUID?

UUID is an abbreviation standing for Universally Unique Identifier. A UUID is a 128-bit value used to identify a computer resource to ensure its uniqueness.

The following is an example of a version 4 UUID.

1e1cf92c-5f52-4307-ae7d-178f65bebfb8

UUID versions explained

• Version 1 - Version 1 UUIDs are generated from the combination of the MAC address of a machine and the current timestamp in nanoseconds. The main con of version 1 UUIDs is that the MAC address of the machine used to generate them is exposed which could lead to security issues. However, the pro is version 1 UUIDs generated on the same machine will always be unique according to the different timestamps. Version 1 UUIDs are mostly used in transactions to ensure uniqueness.

• Version 2 - Version 2 UUIDs are similar to version 1 with DCE security. This version is reserved by RFC 4122, and no further details are announced. Therefore, most UUID libraries skip implementing version 2 which result in version 2 UUIDs not being used practically.

• Version 3 - Version 3 makes use of the MD5 hashing algorithm to generate a UUID.

• Version 4 - Version 4 UUIDs are completely randomized. There is no guarantee that version 4 UUIDs will be unique when generated. However, the possibility of duplication for version 4 UUIDs is extremely low practically.

• Version 5 - Version 5 UUIDs are similar to version 3 with stronger encryption. Nowadays the MD5 hashing algorithm is considered vulnerable and easier to crack. Therefore, version 5 UUIDs replaced MD5 with SHA-1 which is a better hashing algorithm. However, according to the fast-paced technology these days, SHA-1 is facing the same security issue as MD5. So it's not recommended to use version 5 UUIDs anymore.

How to generate UUIDs in JavaScript

You can easily generate UUIDs in JavaScript using the library called uuid. It works across all the platforms both browser and server environments.

npm install uuid

Here is an example of how to generate a version 1 UUID from the uuid library. The UUID generator is a named export so you have to import v1 and then rename it to something else, such as uuidv1 for better understanding. Once the function is run, it will generate a string of a version 1 UUID as the return value.

import { v1 as uuidv1 } from 'uuid';

uuidv1(); // 8302dec8-5f69-11ea-bc55-0242ac130003

The following is an example of how to generate a version 4 UUID using the uuid library. Just like the version 1 above. Import the v4 function to the script and then rename it to uuidv4 to avoid confusion. You'll get a string value of a version 4 UUID every time you run the function like so.

import { v4 as uuidv4 } from 'uuid';

uuidv4(); // e9c1cd0d-5cdb-49eb-9722-2f340df703f4

How to use UUIDs to create unique React elements

If you're a web developer who uses React to create the front end of your web app, you likely have created a loop mapping data in an array into React elements, such as looping through an array of users fetched from a database to create a users list page. Usually, you can simply use the indexes of elements in an array as keys to create unique React elements.

const itemsList = items.map((item, index) => {
  return (
    // Assigning the index value to each key is the simplest way
    // to identify the uniqueness of the items in a loop,
    // but not an ideal in React.
    <li key={index}>
      {item.name}
    </li>
  );
});

However, this is not recommended especially if such React elements are removable which will result in the remaining elements getting the wrong keys when any of them get removed. So an ideal of creating unique React elements is to use UUIDs as in the following example.

import { v1 as uuidv1 } from 'uuid';

const itemsList = items.map((item, index) => {
  return (
    // Generates a version 1 UUID as the key of a React element inside a loop
    // to ensure the keys of the remaining elements are still correct if removed.
    <li key={uuidv1()}>
      {item.name}
    </li>
  );
});

As you can see, implementing generated UUIDs in your code is very simple, and it's one of the most practical solutions to ensure uniqueness in computer programming. With a UUID library that's available in major programming languages, you don't have to create your own solution when coding like combining date and time or generating random characters to form unique values with no guarantee that they will always be unique.