react-stable-map-keys

Replace React .map() index-as-key with stable keys (e.g. item.id) when verifiable; add TODO when not.

Problem

Using the array index as the key prop in React lists causes:

• Reconciliation bugs: Reordering, inserting, or removing items can cause wrong component state to persist
• Performance: React may re-render more than necessary
• Accessibility: Screen readers can get confused by inconsistent identity

Solution

The codemod finds items.map((item, index) => <Component key={index} ... />) patterns and:

1. Replaces with key={item.id} when we can confidently tell id exists:

   • The callback body already uses item.id (or the first param name)
   • The array is a literal like [{id: 1, name: "a"}, ...] where each element has id

2. Adds TODO when we cannot verify: a comment above the .map() call for manual fix.

Usage

bash
Copy
npx codemod workflow run -w codemods/react-stable-map-keys/workflow.yaml -t /path/to/your/project

Or run the transform directly:

bash
Copy
npx codemod jssg run -l tsx ./scripts/codemod.ts /path/to/project

Params

Metrics

• react-stable-map-keys:
  • outcome: replaced — key was replaced with stable item.id
  • outcome: todo-added — TODO comment added, manual fix needed
  • confidence: body-uses-id | array-literal-has-id | unknown

What Gets Fixed

Automated (replaced)

• users.map((user, i) => <div key={i}>{user.id} - {user.name}</div>) → key={user.id}
• [{id: 1, n: "a"}].map((item, idx) => <li key={idx}>{item.n}</li>) → key={item.id}

Flagged (TODO)

• items.map((item, i) => <div key={i}>{item.name}</div>) when id cannot be verified

License

MIT