{
  "id": 5035401,
  "title": "Using an Array Index as a React key Can Leak Form State Between Completely Different Items",
  "url": "https://urgent.news/2026/09/02/using-an-array-index-as-a-react-key-can-leak-form-state-between",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-02T07:00:48.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/anas_sheikh_2/using-an-array-index-as-a-react-key-can-leak-form-state-between-completely-different-items-4n4n"
  },
  "original_language": "en",
  "account": "Using an array index as a React key can leak form state between completely different items. This issue occurs when a user edits a note in one row of a live queue or to-do list, but then that row is removed or the list reorders. React mistakenly uses the same key for the now-empty slot, retaining the previous row's edit state. The currently rendered row still retains the input field with the old note, which could contain unintended data. Testing this bug is difficult because it depends on the list reordering or shrinking while an edit is in progress. The fix is to use a stable, unique identifier tied to the item itself, like an ID, as the key instead of the array index. This ensures React correctly tracks each row's identity across changes, preventing the state leak.",
  "summary": "This is one of those React gotchas that's been written about for years and still shows up constantly in real code, specifically because it looks completely correct and works fine in the exact scenario most people test. The Setup That Looks Fine // components/QueueList.tsx ' use client ' ; export function QueueList ({ entries }: { entries : QueueEntry [] }) { return ( < div > { entries . map ((…",
  "key_points": [
    "Using array index as React key can leak form state between different items",
    "Issue arises when row is removed or list reorders after user edits",
    "Fix is to use stable, unique item ID as key instead of index"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}