ProblemsReact List Keys (noArrayIndexKey)
01Medium

React List Keys (noArrayIndexKey)

React

ReactKeysReconciliationESLintBiome

Context

Biome's `noArrayIndexKey` rule flagged `lines.map((line, i) => <Line key={i} />)` during a search bar refactor. Replacing index keys with stable element IDs was required to pass lint and ensure correct animation re-renders.

The Concept

Using array index as a React list key breaks reconciliation when items are reordered or removed. Keys must be stable and unique.

Task

Fix the `SearchHistory` component: replace the array index key with `item.id` so React can correctly reconcile the list when items are added, removed, or reordered.

component.jsx
Hints0/3 revealed