Should React useId() Hook be Used to Generate Keys for List Items?

You should not use the React useId() hook to generate unique ids for keys in a list because it is not intended for that purpose. It is specifically designed to generate unique identifiers for the id attribute of HTML elements.

When rendering a list in React, it is recommended to use unique identifiers from your data as keys for the list items. This can be achieved by using identifiers like database ids, UUIDs, or any other unique values associated with the items in your data.

This approach ensures that each item in the list has a stable and unique key, enabling React to efficiently update and track individual items when the list changes.

By using appropriate keys for list items, React can accurately identify and update components as they are added, removed, or rearranged within the list, providing better performance and preventing potential rendering issues.

Consider, for example, the following data with unique ids:

// data.js
export default [
  { id: 'foo', name: 'foo bar' },
  { id: 'baz', name: 'baz qux' },

You can use these unique ids as keys in your component, for example, like so:

// App.jsx
import React from 'react';
import data from './data.js';

export default function App() {
  return (
      { => (
        <li key={}>{}</li>

This helps React uniquely identify a list item between its siblings throughout its lifetime, even if its position in the list changes due to reordering for example.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.