react-key-prop

What problem does it solve?

This Skill addresses unstable UI rendering by ensuring React list items always receive stable, unique keys, preventing item identity loss during re-renders.

Core Features & Use Cases

• Enforce using data-derived IDs as keys
• Avoid using array indices for dynamic lists
• Provide guidance on when to generate IDs once data is loaded

Quick Start

• Identify list rendering code using map and ensure key uses a stable ID from data
• If IDs are missing, generate them once when data loads and attach to items
• Avoid using the array index as the key for dynamic lists