react-stable-map-keys

Name: react-stable-map-keys codemod
Availability: InStock

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

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

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
Adds TODO when we cannot verify: a comment above the .map() call for manual fix.

bash

Or run the transform directly:

bash

Param	Type	Default	Description
create_branch	boolean	true	Create git branch and commit after each step
run_ai_step	boolean	false	Run AI step for TODO-flagged cases
publish_pr	boolean	false	Create PR after push
main_branch	string	main	Target branch for PR

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

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}

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

MIT