using-keys

Stable keys identify components by their data identity, not position. Using indices causes React to re-render and lose component state when list order changes, degrading performance and causing unnecessary churn during animations or drag operations.

Use stable identifiers like item.id as keys rather than coordinates or array positions. This ensures React reconciliation preserves component identity across updates, preventing re-renders when positions change while data remains the same.

Coordinate or index-based keys change when component position updates, forcing React to treat them as new components and lose internal state. Identity-based keys like item.id remain constant, allowing React to preserve component state and optimize re-renders efficiently.

No. Changing keys during position updates breaks component identity tracking, causing performance degradation and state loss. Keep keys stable based on data identity; update Slot props to reflect new positions without changing the key itself.

Assign keys from stable data properties (item.id), then pass position or coordinate information through Slot props instead. This preserves component identity across position changes and enables efficient reconciliation aligned with React's update semantics.