Summary
Lists in many components use key={index} for items that already have stable identifiers.
Affected area
src/components/mobile/OfflinePropertyCache.tsx (cached properties — has id)
src/components/mobile/MobilePropertyViewer.tsx (thumbnails)
src/components/mobile/MobilePropertyCard.tsx (badges)
src/components/property/ImageLightbox.tsx
src/components/audit/TransactionAuditTrail.tsx
src/components/search/SearchHistoryDropdown.tsx
src/components/LoadingSpinner.tsx
src/components/security/WalletAddressInput.tsx (errors/warnings)
src/components/responsive/ImagePlaceholder.tsx
src/components/responsive/LazyLoadingExample.tsx
src/components/TransactionConfirmation.tsx / src/components/SecureTransactionConfirmation.tsx
src/components/dashboard/\*
Steps to reproduce / impact
When the underlying list changes (filter change, delete item, reorder), React destroys and rebuilds DOM nodes, losing focus and animation state. Image lightboxes flicker. Loading states lose progress.
Expected behaviour
Use a stable identifier (id, hash, src, …) as the key wherever one exists. Resort to key={index} only as a last resort for lists with no inherent identity.
Acceptance criteria
Summary
Lists in many components use
key={index}for items that already have stable identifiers.Affected area
src/components/mobile/OfflinePropertyCache.tsx(cached properties — has id)src/components/mobile/MobilePropertyViewer.tsx(thumbnails)src/components/mobile/MobilePropertyCard.tsx(badges)src/components/property/ImageLightbox.tsxsrc/components/audit/TransactionAuditTrail.tsxsrc/components/search/SearchHistoryDropdown.tsxsrc/components/LoadingSpinner.tsxsrc/components/security/WalletAddressInput.tsx(errors/warnings)src/components/responsive/ImagePlaceholder.tsxsrc/components/responsive/LazyLoadingExample.tsxsrc/components/TransactionConfirmation.tsx/src/components/SecureTransactionConfirmation.tsxsrc/components/dashboard/\*Steps to reproduce / impact
When the underlying list changes (filter change, delete item, reorder), React destroys and rebuilds DOM nodes, losing focus and animation state. Image lightboxes flicker. Loading states lose progress.
Expected behaviour
Use a stable identifier (id, hash, src, …) as the key wherever one exists. Resort to
key={index}only as a last resort for lists with no inherent identity.Acceptance criteria
key={index}in all the files above with stable identifiers.key={index}for elements that have a meaningful id.