React Key Prop

Goal

Give React stable item identity. Use keys tied to data, not render position.

Rules

• Always add key to rendered list items.
• Prefer unique, stable IDs from data.
• Generate missing IDs once when data is created or loaded.
• Use the same key while the same item exists.
• Do not generate keys during render.
• Do not use Math.random() or Date.now().
• Do not use useId() for list keys.
• Avoid array index keys for dynamic lists.

Good Pattern