This package has been deprecated

Author message:

Package no longer supported. Contact Support at for more info.

TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

React uuid

Easily generate Universal Unique Identifiers, for your React projects

NPM contributions welcome JavaScript Style Guide NPM downloads Known Vulnerabilities Code Coverage

Buy Me A Coffee donate button

A UUID (Universal Unique Identifier) is a 128-bit number used to uniquely identify some object or entity on the Internet. Depending on the specific mechanisms used, a UUID is either guaranteed to be different or is, at least, extremely likely to be different from any other UUID generated until 3400 A.D. In its authoritative textual representation, the 16 octets of a UUID are represented as 32 hexadecimal (base-16) digits, displayed in 5 groups separated by hyphens, in the form 8-4-4-4-12 for a total of 36 characters (32 alphanumeric characters and 4 hyphens).

React's power lies in its robust reconciliation process. When we use JSX to create or update components, React creates its own virtual DOM. It compares this virtual DOM to the actual DOM in the browser, calculating the least number of changes necessary to update the actual DOM to match the virtual DOM. Sometimes we use multiple instances of the same component in the same spot. Such as the multiple instances of a 'TodoItem' component inside a 'TodoList' component. When this occurs, unique keys are very important, because they allow React to differentiate between these similar components, and hone in on any that may need to be updated individually, instead of re-rendering them all.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.


A React (or any Javascript framework) project that requires components to be marked with a uuid, to enable the framework to mutate the correct component.


From the command line (in the root of your project), simply type:

npm i react-uuid

And then can be used inside the project like:

import React from 'react';
import uuid from 'react-uuid';

const array = ['one', 'two', 'three'];

export const LineItem = (item) => <li key={uuid()}>{item}</li>;

export const List = () => => <LineItem item={item} />);

In the above example, the output would be 3 LineItem components being rendered, with each LineItem supplied a universal unique identifier, which when required, will allow React to identify which LineItem component should be mutated.

Built With

  • Javacript - JavaScript (JS) is a lightweight interpreted or just-in-time compiled programming language with first-class functions.


Please read for details on our code of conduct, and the process for submitting pull requests to us.



  • riverliway - feat: add typescript declaration file - riverliway
  • Alwyn-RM - fix: modified generator code to match 8-4-4-4-12 scheme - Alwyn-RM


MIT © RickBr0wn





Package Sidebar


npm i react-uuid

Weekly Downloads






Unpacked Size

5.75 kB

Total Files


Last publish


  • rickbrown