It is important to remember that React expects STABLE keys, meaning you should assign the keys once and every item on your list should receive the same key every time, that way React can optimize around your data changes when it is reconciling the virtual DOM and decides which components need to re-render. So, if you are using UUID you need to do it at the data level, not at the UI level.

Also keep in mind you can use any string you want for the key, so you can often combine several fields into one unique ID, something like ${username}_${timestamp} can be a fine unique key for a line in a chat, for example.

2024 Updated

Keys help React identify which items have changed/added/removed and should be given to the elements inside the array to give the elements a stable identity.

TL/DR: if your collection has a strong ID, use it; if not, you must choose between nanoid or product_type_${item.id} and with that in mind, there are three different strategies as described below:

1. Static Elements (when you don't need to keep HTML state (focus, cursor position, etc)
2. Editable and sortable elements
3. Editable but not sortable elements

Important to Know: The React Team does not recommend using the useId Hook. Check the documentation here. Instead, they say: "Keys should be generated from your data".

  <div id={item.id} />

For static elements, nanoid() will do just fine.

As React Documentation explains, we need to give stable identity to the elements and because of that, carefully choose the strategy that best suits your needs:

STATIC ELEMENTS

As we can also see in React Documentation, using the index for keys "if the order of items may change. This can negatively impact performance and cause issues with component state" is not recommended.

I recommend using a package called **nanoid**for static elements like tables, lists, etc.

  yarn add nanoid
  // or 
  npm install nanoid

The command to generate a new ID is nanoid().

Example:

  import { nanoid } from 'nanoid';

  interface ICustomDropDownProps {
    collection?: [];
    value?: string;
    onSelectedValueChanged?: (event: string) => void;
  }

  export CustomDropDown = (props: ICustomDropDownProps): React.ReactNode => {    
    return (
      <select value={props.value} onChange={props.onSelectedValueChanged}>
        {(props.collection ?? []).map((items) => {
          return (
           <option value={item.value} key={nanoid()}>
             {item.text}
           </option>
          );
        })}
      </select>
    );
  };

IMPORTANT: As React Virtual DOM relies on the key, with nanoid(), every time the element is re-rendered, a new key will be created, and the element will lose its HTML state, like focus or cursor position. Consider this when deciding how the key will be generated, as the strategy above can be useful only when you are building elements that won't change their values, like lists or read-only fields.

EDITABLE (sortable) FIELDS

If the element is sortable and you have a unique ID of the item, combine it with some extra string (in case you need to have the same information twice on a page). This is the most recommended scenario.

Example:

  interface ICustomDropDownProps {
    collection?: [];
    collectionName: string;
    value?: string;
    onSelectedValueChanged?: (event: string) => void;
  }

  export CustomDropDown = (props: ICustomDropDownProps): React.ReactNode => {    
    return (
      <select value={props.value} onChange={props.onSelectedValueChanged}>
        {(props.collection ?? []).map((items) => {
          return (
           <option value={item.value} key={`${props.collectionName}_${item.id.toString()}`}>
             {item.text}
           </option>
          );
        })}
      </select>
    );
  };

EDITABLE (non-sortable) FIELDS (e.g. INPUT ELEMENTS)

As a last resort, for editable (but non-sortable) fields like input, you can use some of the indexes with some starting text, as the element key cannot be duplicated.

Example:

  interface ICustomDropDownProps {
    collection?: [];
    collectionName: string;
    value?: string;
    onSelectedValueChanged?: (event: string) => void;
  }

  export CustomDropDown = (props: ICustomDropDownProps): React.ReactNode => {    
    return (
      <select value={props.value} onChange={props.onSelectedValueChanged}>
        {(props.collection ?? []).map((items, index) => {
          return (
           <option value={item.value} key={`${props.collectionName}_${index.toString()}`}>
             {item.text}
           </option>
          );
        })}
      </select>
    );
  };

Happy coding!

Do not use this return `${ pre }_${ new Date().getTime()}`;. It's better to have the array index instead of that because, even though it's not ideal, that way you will at least get some consistency among the list components, with the new Date function you will get constant inconsistency. That means every new iteration of the function will lead to a new truly unique key.

The unique key doesn't mean that it needs to be globally unique, it means that it needs to be unique in the context of the component, so it doesn't run useless re-renders all the time. You won't feel the problem associated with new Date initially, but you will feel it, for example, if you need to get back to the already rendered list and React starts getting all confused because it doesn't know which component changed and which didn't, resulting in memory leaks, because, you guessed it, according to your Date key, every component changed.

Now to my answer. Let's say you are rendering a list of YouTube videos. Use the video id (arqTu9Ay4Ig) as a unique ID. That way, if that ID doesn't change, the component will stay the same, but if it does, React will recognize that it's a new Video and change it accordingly.

It doesn't have to be that strict, the little more relaxed variant is to use the title, like Erez Hochman already pointed out, or a combination of the attributes of the component (title plus category), so you can tell React to check if they have changed or not.

edited some unimportant stuff

Let React Assign Keys To Children

You may leverage React.Children API:

const { Children } = React;

const DATA = [
  'foo',
  'bar',
  'baz',
];

const MyComponent = () => (
  <div>
    {Children.toArray(DATA.map(data => <p>{data}</p>))}
  </div>
);


ReactDOM.render(<MyComponent />,document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

To add the latest solution for 2021...

I found that the project nanoid provides unique string ids that can be used as key while also being fast and very small.

After installing using npm install nanoid, use as follows:

import { nanoid } from 'nanoid';

// Have the id associated with the data.
const todos = [{id: nanoid(), text: 'first todo'}];

// Then later, it can be rendered using a stable id as the key.
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
)

Another option is weak-key: https://www.npmjs.com/package/weak-key

import weakKey from "weak-key";

const obj1 = {a : 42};
const obj2 = {b : 123};
const obj3 = {a : 42};

console.log(weakKey(obj1)); // 'weak-key-1'
console.log(weakKey(obj2)); // 'weak-key-2'
console.log(weakKey(obj3)); // 'weak-key-3'

console.log(weakKey(obj1)); // 'weak-key-1'

In the event that your data does not contain a unique ID (i.e. a database ID), you need to create a unique ID at the data level before the UI logic, so that the ID is stable. Generating ID's inside the key attribute are unstable, they cause React to destroy/create that element on every render because you are telling the ID itself to be changed on every render - React sees the key is different by comparison.

This is how you might amend the data within a component to have a simple stable numerical ID - it would be more efficient to amend the data further/as far up the component tree as possible. Using useRef to hold a persistent value, which is incremented each time a new ID is required, and useMemo to store the resulting amended data which will persist so long as the data it is based off does not change.

If you require the ID to be globally unique across the application i.e. if there is logic elsewhere utilizing the ID, then an external UUID generating package should be used. For simple lists where you just require a stable, unique ID, then an incrementing numeral value will suffice.

function Component(props) {
  const { data } = props;
  const idRef = useRef(-1);

  function getId() {
    idRef.current += 1;
    return idRef.current;
  }

  const dataAmended = useMemo(() => {
    return data.map((item) => {
      return { ...item, id: getId() };
    });
  }, [data]);

  const listItems = dataAmended.map((item) => {
    return <li key={item.id}>{item.title}</li>;
  });

  return <ul>{listItems}</ul>;
}

For a simple array of text-strings; I'm trying one of the two ways:

1. encodeURI which is available on both; NodeJS and browser

const WithEncoder = () => {
  const getKey = useCallback((str, idx) => encodeURI(`${str},${idx}`), [])

  return (
    <div>
      {["foo", "bar"].map((str, idx) => (
        <div key={getKey(str, idx)}>{str}</div>
      ))}
    </div>
  )
}

2. window.btoa which is available only in browser.

const WithB2A = () => {
  const getKey = useCallback((str, idx) => window.btoa(`${str}-${idx}`), [])

  return (
    <div>
      {["foo", "bar"].map((str, idx) => (
        <div key={getKey(str, idx)}>{str}</div>
      ))}
    </div>
  )
}

Depends on the situation, choose a uniqueId creator is ok when you just want render silly items, but if you render items like drag&drop etc and you haven't any uniqueId for each item, I recommend remap that data in your redux, mapper, wherever and add for each item an uniqueId (and not in the render like <Item key={...}) because React couldn't perform any check between renders (and with that all the benefits).

With that remapped that you can use that new Id in your Component.

Here is what I have done, it works for reordering, adding, editing and deleting. Once set the key is not changed, so no unnecessary re-render. One PROBLEM which may be a show stopper for some: it requires adding a property to your object at first render say "_reactKey".

Example for functional component in psuedo TS (ie it won't run in snippets):

interface IRow{

  myData: string,
  _reactKey?:number
  }


export default function List(props: {
    rows: Array<IRow>
}) {
    const {myRows} = props;
    const [nextKey, setNextKey] = useState(100);
    const [rows, setRows] = useState<Array<IRow>|undefined>();


    useEffect(function () {
        if (myRows) {
            for (let row of myRows){
                if (!row._reactKey){
                    row._reactKey = nextKey;
                    setNextKey(nextKey+1);
                }
            }
            setRows(myRows);
        } else if (!rows) {
            setRows([]);
        }
    }, [myRows, columns]);
    
    addRow(){
    
        let newRow = { blah, blah, _reactKey : nextKey};
        setNextKey(nextKey+1);
        rows.push(newRow);
        setRows({...rows});
    
    }
    
    function MyRow(props:{row:IRow}){
        const {row} = props;
        
        return <tr><td>{row._reactKey}</td><td>row.myData</td></tr>
    
    }
    
    return <table>
        <tr><th>Index</th><th>React Key</th><th>My Data</th></tr>
        rows.map((row, key)=>{
            return <MyRow key={row._reactKey} row={row} />
        }
        </table>
        
}
            
    
    
    

I don't use react too much, but the last time I saw this issue I just created a new state array, and tracked the keys there.

const [keys, setKeys] = useState([0]);
const [items, setItems] = useState([value: "", key: 0,])

Then when I add a new item to list, I get the last key from the keys array, add 1, then use setKeys to update the keys array. Something like this:

const addItemWithKey = () => {
  // create a new array from the state variable
  let newKeyArr = [...keys];
  // create a new array from the state variable that needs to be tracked with keys
  let newItemArr = [...items];
  // get the last key value and add 1
  let key = newKeyArr[newKeyArr.length-1] + 1;
  newKeyArr.push(key);
  newItemArr.push({value: "", key: key,});
  // set the state variable 
  setKeys(newKeyArr);
  setItems(newItemArr);
};

I don't worry about removing values from the keys array because it's only being used for iterating in the component, and we're trying to solve for the case where we remove an item from the list and/or add a new item. By getting the last number from the keys array and adding one, we should always have unique keys.

Nowadays (2023) you can use crypto.randomUUID() to generate a UID. This can be used as a proper key. It's supported on all mainstream modern browsers and server-side JS platforms such as node. You should only have issues with this if you need to support IE11 or less.

See this for support details

You can use useID() hook like this :

import {useId, useState } from "react";

function Buttons() {
    const [buttons, setButtons] = useState([
        {
            id: useId(),
            text: "btn1",
        },
        {
            id: useId(),
            text: "btn2",
        },
        {
            id: useId(),
            text: "btn3",
        },
        {
            id: useId(),
            text: "btn4",
        },
    ]);
    return (
         {buttons.map((button) => (
        <button key={button.id}  id={button.id}>
          {button.text}
        </button>
      ))}

    );

One thing to note when using this approach is that you might run into issues if you have to use the document.querySelector method.

The hook creates unique IDs formatted as :r0: and selectors starting with a colon are not valid.

If you need to prefix the unique ID with a value, use a template literal. like this : message${useId()}

Note that you shouldn't use the useId hook to generate values for the key prop of list elements.

see : https://bobbyhadz.com/blog/react-generate-unique-id#generating-unique-ids-for-input-fields-in-reactjs

Basically, Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

It should uniquely identifies a list item among its siblings. And important is that you should not use index of array mentioned in React docs: https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/

From that ideas, there are solutions:

First, using generated unique id from backend resources like id, _id, ...

funtion Component({ items }) {
  return items.map(({id, name}) => {
    return <div key={id}>{name}</>;
  })
}

Second, generated by yourself, using some libs like nanoid or uuid

import {nanoid} from 'nanoid';
import {uuid} from 'uuid';
function generatedIdByTime() {
  return Date.now().toString(); 
}

funtion Component({ items }) {
  return items.map(({id, name}) => {
    return <div key={generatedIdByTime()}>{name}</>; // from generatedIdByTime using browser timer
    return <div key={nanoid()}>{name}</>; // from nanoid
    return <div key={uuid()}>{name}</>; // from uuid
  })
}

I made a lib to manage the cas you don't have a unique id inside your objects react-key-from-object

import { useKeyGen } from 'react-key-from-object'

const DogList = () => {
  const keyGen = useKeyGen();

  return (
    <ul>
      {dogs.map((dog) => (
        <li key={keyGen.getKey(dog)}>
          {dog.name}
          -
          {dog.age}
        </li>
      ))
    </ul>
  );
}

It rely on a weakmap under the hood. The weekmap is destroyed when the component unmount.