Make React Lists Stable with Meaningful Keys

A practical approach

Step 1

Use a stable identifier from the data, such as an ID from the database, as the key.

Step 2

If items have no ID, create one when the item is created, not during rendering.

Step 3

Keep keys unique among siblings; they do not need to be globally unique.

Step 4

Use index keys only for static lists that are never reordered, filtered or edited.

Step 5

Use a changing key deliberately when you want to reset a component's state, such as key={courseId} on a form that should reset for each course.

Worked example

A lesson-notes editor renders a list of notes with key={index}, each with a text field. When a learner deletes the first note, the text that was in the second note appears in the first field and the last field is removed. Switching to key={note.id} keeps each note's text with its own field, regardless of deletions or reordering.

A mistake to avoid

Do not generate keys with Math.random() or a new UUID during rendering. A new key on every render makes React recreate every item, losing state and focus and hurting performance.

Try it yourself

Build a small list where each item has a text input and a delete button. Use index keys, type in several inputs and delete the first item. Observe the bug, then switch to stable IDs and repeat.

Your implementation checklist

• List items use stable identifiers as keys
• IDs are created with the data, not during render
• Keys are unique among siblings
• Index keys appear only in static lists
• Keys are changed deliberately to reset state