react-key-prop

Use a unique, stable ID from your data, such as todo.id, as the key prop. Keys must be unique among siblings, stable across renders, and directly tied to the data item so React can track element identity during reconciliation.

Index as key is acceptable only when the list is completely static: items are never added or removed except at the end, order never changes, and items have no internal state. For any dynamic list, index keys cause state mismatch bugs.

Math.random() generates a new key on every render, so React treats every element as new and destroys and recreates all components each time. This loses component state and wastes rendering work. Generate IDs once when data loads instead.

No, useId() is designed for accessibility attributes like linking labels to inputs, not for list keys. It does not produce keys tied to data identity. Use IDs from your data or generate them once with nanoid when loading data.

This happens when index is used as the key on a dynamic list. Index represents position, not data identity, so when order changes React reuses the wrong component instances. Switch to stable data IDs as keys to fix the mismatch.