Create a Unique ID in ReactJS

Unique IDs are used to differentiate multiple elements from each other, maintain the internal state of components, or create a key for user data. In this article, we will explain all the approaches to creating unique IDs for a set of elements in React JS.

Approaches to Create Unique ID in React JS

Here is the list of approaches for creating unique IDs in React JS, which we will be discussing in this article with stepwise explanations and complete example codes.

• Using uuid Library
• Using Timestamps
• Using Random Characters

Using uuid Library

React provides an external library called 'uuid' for creating unique IDs in our app. It creates UUIDs (Universally Unique Identifiers), which are guaranteed to be unique. First, we need to install the library in our project folder using the VS Code terminal.

npm install uuid

Once installation is successful, we can import it in any of our react components in our project. In the below example, we are using uniquely built identifiers in App.js component

Example Code - App.js

Following is an example code for generating unique IDs using uuid library. Paste this code in your App.js file and run the react app.

import React from "react";
import { v4 as uuidv4 } from 'uuid';

function App() {
    // Define an array of length 5, each filled with Unique ID
    const ids = Array.from({ length: 5 }, () => uuid());

    return (
        <div>
        <h1>Generated Unique IDs by uuid</h1>
        <ul>
            {ids.map((id, index) => (
            <li key={index} style={{ fontFamily: "monospace"}}>
                {id}
            </li>
            ))}
        </ul>
        </div>
    );
}

export default App;

Output

Using Timestamps

Using timestamps is a popular approach to creating a unique ID in React JS, this involves using the current date and time in milliseconds as ID. This approach can be set up using Date.now() method, which returns numbers of milliseconds since January 1, 1970.

For this approach, no external libraries are required. But when you are dealing with millions of data and users are entering data in every millisecond, the IDs can get duplicated, although the probability is very low.

Example Code

Following is an example code for generating unique IDs using timestamps. Paste this code in your App.js file and run the react app.

import React from "react";

function App() {
    // Define array of timestamps of length 5
    const timeStamps = Array.from({ length: 5 }, () => Date.now());

    return (
        <div>
        <h1>Generated Timestamps IDs</h1>
        <ul>
            {timeStamps.map((timeStamp, index) => (
            <li key={index} style={{ fontFamily: "monospace"}}>
                {timeStamp}
            </li>
            ))}
        </ul>
        </div>
    );
}

export default App;

Output

Using Random Characters

Using random numbers is a traditional approach to generating unique IDs for elements. This involves using Math.random() function to generate a random string consisting of numbers, alphabets, and characters, which is used as ID.

This method is also not ideal for dealing with large user data, as it can potentially generate duplicates in a large app due to randomness.

Example Code

Following is an example code for generating unique IDs using random numbers. Paste this code in your App.js file and run the React app.

import React from "react";

function App() {
    //Define Array of length 5 each filled with random characters
    const uniqueId = Array.from(
              { length: 5 }, 
              () => "id-" + Math.random().toString(36).substr(2, 9)
          );

    return (
        <div>
        <h1>Generated Random Number IDs</h1>
        <ul>
            {uniqueId.map((uniqueId, index) => (
            <li key={index} style={{ fontFamily: "monospace"}}>
                {uniqueId}
            </li>
            ))}
        </ul>
        </div>
  );
}

export default App;

Output