React & Modern Frontend (445 Qs)•Part 8: Advanced React Patterns, Portals & Performance (152 - 261)
What are the conditions to safely use the index as a key?
There are three conditions to make sure, it is safe use the index as a key.
- The list and items are static– they are not computed and do not change
- The items in the list have no ids
- The list is never reordered or filtered.
Practical Code Example
jsx
// Index as key is safe ONLY when:
// 1. The list is static (items never added, removed, or reordered)
// 2. Items in the list have no unique ID
// 3. List is never filtered
const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
return daysOfWeek.map((day, index) => <span key={index}>{day}</span>);