46:I[660678,["/_next/static/chunks/2t1119em3uggf.js","/_next/static/chunks/0z8znd68d3gbv.js","/_next/static/chunks/19fyfn-j_bqw4.js","/_next/static/chunks/0w40435yyf_aw.js","/_next/static/chunks/3p_8v12wc_rd3.js","/_next/static/chunks/0ipw6pdbca2nn.js","/_next/static/chunks/22ulpibmvf72b.js","/_next/static/chunks/2a4jc680f5x-9.js","/_next/static/chunks/0nsogqyo9f92a.js","/_next/static/chunks/3e6aahj543it1.js","/_next/static/chunks/2_7n0byq7kdc7.js","/_next/static/chunks/1umhym11g537p.js","/_next/static/chunks/1gth09_ur0iam.js","/_next/static/chunks/0pp6seif9t0rh.js","/_next/static/chunks/3ndfog0156ssk.js","/_next/static/chunks/3bhq66ea_v7by.js","/_next/static/chunks/44c_5nh0vyeb5.js","/_next/static/chunks/1jiredr0b6jr_.js","/_next/static/chunks/385-w0fbog4mf.js","/_next/static/chunks/0oh_nmnt8b0xn.js","/_next/static/chunks/1gwg3oqv8zf-1.js","/_next/static/chunks/2nw5jdup18fxv.js","/_next/static/chunks/1zqqmzxxxprx1.js","/_next/static/chunks/32dzmzjp2_166.js","/_next/static/chunks/3tapih4gs2df1.js","/_next/static/chunks/2t_5zfez2-77k.js","/_next/static/chunks/3-906s1ue5fj3.js","/_next/static/chunks/03hsqimmwh7ta.js","/_next/static/chunks/35bufgnke20pg.js","/_next/static/chunks/1jmwt2w2uusdo.js","/_next/static/chunks/2641m2aqdum9a.js","/_next/static/chunks/0a0b6s3o7q6fp.js","/_next/static/chunks/0ojgzwcpt7vsk.js","/_next/static/chunks/1j29bqcxcpyur.js"],"HydrationBoundary"] 45:T9d5,{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://app.codemod.com/registry#website","url":"https://app.codemod.com/registry","name":"Codemod Registry"},{"@type":"Organization","@id":"https://app.codemod.com#org","name":"Alex Bit","url":"https://app.codemod.com","logo":"https://avatars.githubusercontent.com/u/78109534?v=4"},{"@type":"BreadcrumbList","@id":"https://app.codemod.com/registry/react-stable-map-keys#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Registry","item":"https://app.codemod.com/registry"},{"@type":"ListItem","position":2,"name":"react-stable-map-keys","item":"https://app.codemod.com/registry/react-stable-map-keys"}]},{"@type":"WebPage","@id":"https://app.codemod.com/registry/react-stable-map-keys#webpage","url":"https://app.codemod.com/registry/react-stable-map-keys","name":"react-stable-map-keys - Codemod Registry","description":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO","isPartOf":{"@id":"https://app.codemod.com/registry#website"},"author":{"@id":"https://app.codemod.com#org"},"breadcrumb":{"@id":"https://app.codemod.com/registry/react-stable-map-keys#breadcrumb"},"mainEntity":{"@id":"https://app.codemod.com/registry/react-stable-map-keys#sourcecode"}},{"@type":"SoftwareSourceCode","@id":"https://app.codemod.com/registry/react-stable-map-keys#sourcecode","name":"react-stable-map-keys","description":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO","url":"https://app.codemod.com/registry/react-stable-map-keys","publisher":{"@id":"https://app.codemod.com#org"},"image":"https://avatars.githubusercontent.com/u/78109534?v=4","isAccessibleForFree":true,"license":"MIT","version":"0.1.0","keywords":["react","standardization","a11y","performance"],"datePublished":"2026-02-26 05:57:13.774817+00","dateModified":"2026-02-26 05:57:13.774817+00"},{"@type":"SoftwareApplication","@id":"https://app.codemod.com/registry/react-stable-map-keys#app","name":"react-stable-map-keys codemod","description":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO","url":"https://app.codemod.com/registry/react-stable-map-keys","publisher":{"@id":"https://app.codemod.com#org"},"softwareVersion":"0.1.0","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}}]}47:T8ca,# 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) => )` 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 npx codemod workflow run -w codemods/react-stable-map-keys/workflow.yaml -t /path/to/your/project ``` Or run the transform directly: ```bash npx codemod jssg run -l tsx ./scripts/codemod.ts /path/to/project ``` ## Params | 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 | ## 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) =>

{user.id} - {user.name}

)` → `key={user.id}` - `[{id: 1, n: "a"}].map((item, idx) =>

{item.n}

)` → `key={item.id}` ### Flagged (TODO) - `items.map((item, i) =>

{item.name}

)` when `id` cannot be verified ## License MIT 17:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$45"}}],["$","$L46",null,{"state":{"mutations":[],"queries":[{"state":{"data":{"json":{"id":"58738bcb-a38f-4088-87dc-e5d7ac4f7d81","name":"react-stable-map-keys","displayName":"react-stable-map-keys","description":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO","scope":null,"visibility":"public","downloadCount":4,"executionCount":1,"createdAt":"2026-02-26 05:57:13.774817+00","updatedAt":"2026-02-26 05:57:13.774817+00","latestVersion":"0.1.0","keywords":["react","standardization","a11y","performance"],"starCount":1,"author":"Codemod Authors","homepage":null,"repository":null,"license":"MIT","access":"public","documentation":null,"bugsUrl":null,"readme":"$47","organization":{"id":null,"name":null,"slug":null,"avatarUrl":null},"owner":{"id":"4519f7a8-2ebc-4eaf-8c0a-e01be4c05878","username":"alexbit-codemod","name":"Alex Bit","avatarUrl":"https://avatars.githubusercontent.com/u/78109534?v=4"},"isLegacy":false,"versions":[{"version":{"id":"f04fbcd5-231f-42e4-8b47-799b4076204f","packageId":"58738bcb-a38f-4088-87dc-e5d7ac4f7d81","version":"0.1.0","description":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO","manifest":{"name":"react-stable-map-keys","author":"Codemod Authors","license":"MIT","targets":{"versions":{},"languages":["typescript"],"frameworks":[]},"version":"0.1.0","category":"migration","keywords":["react","standardization","a11y","performance"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO","dependencies":[],"schema_version":"1.0"},"checksum":"75db03be93070484ee69a0c401e13fa0060bbcf5864ba78f395d1565e7a532e5","size":5630,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/react-stable-map-keys/0.1.0/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"languages":["typescript"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["run","js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Create branch","type":"run"},{"name":"Replace index-as-key with stable keys","type":"js-ast-grep","language":"tsx"},{"name":"Commit AST transformations","type":"run"}]},{"id":"ai-tricky-cases","name":"AI Tricky Cases","steps":[{"name":"AI step for TODO-flagged cases","type":"ai"},{"name":"Commit AI fixes","type":"run"}]},{"id":"publish","name":"Publish","steps":[{"name":"Push branch to remote","type":"run"},{"name":"Create PR to main branch","type":"run"}]}]},"validated":false,"validationErrors":null,"publishedBy":"4519f7a8-2ebc-4eaf-8c0a-e01be4c05878","deprecated":false,"deprecationMessage":null,"downloadCount":4,"cachedTestCases":{"input":"function UserList({ users }) {\n\treturn (\n\t\t

{user.id} - {user.name}

\n\t);\n}\n","output":"function UserList({ users }) {\n\treturn (\n\t\t

{user.id} - {user.name}

\n\t);\n}\n","isValid":true,"examples":[{"name":"replace-body-uses-id","path":"tests/replace-body-uses-id","input":"function UserList({ users }) {\n\treturn (\n\t\t

{user.id} - {user.name}

\n\t);\n}\n","output":"function UserList({ users }) {\n\treturn (\n\t\t

{user.id} - {user.name}

\n\t);\n}\n","filename":"input.tsx"},{"name":"todo-added","path":"tests/todo-added","input":"function Names({ items }) {\n\treturn (\n\t\t<>\n\t\t\t{items.map((item, index) => (\n\t\t\t\t{item.name}\n\t\t\t))}\n\t\t\n\t);\n}\n","output":"function Names({ items }) {\n\treturn (\n\t\t<>\n\t\t\t// TODO: use a stable key (e.g. item.id) instead of array index\n\t\t\t{items.map((item, index) => (\n\t\t\t\t{item.name}\n\t\t\t))}\n\t\t\n\t);\n}\n","filename":"input.tsx"}]},"defaultWorkflowName":"default","createdAt":"2026-02-26T05:57:13.774Z","updatedAt":"2026-05-26 08:41:00.910768+00"},"publishedBy":{"id":"4519f7a8-2ebc-4eaf-8c0a-e01be4c05878","username":"alexbit-codemod","name":"Alex Bit"},"insightsTemplate":{"packageVersionId":"f04fbcd5-231f-42e4-8b47-799b4076204f","status":"ready","generatedAt":"2026-07-21T16:07:15.753Z"},"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["run","js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Create branch","type":"run"},{"name":"Replace index-as-key with stable keys","type":"js-ast-grep","language":"tsx"},{"name":"Commit AST transformations","type":"run"}]},{"id":"ai-tricky-cases","name":"AI Tricky Cases","steps":[{"name":"AI step for TODO-flagged cases","type":"ai"},{"name":"Commit AI fixes","type":"run"}]},{"id":"publish","name":"Publish","steps":[{"name":"Push branch to remote","type":"run"},{"name":"Create PR to main branch","type":"run"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]}],"distTags":{"latest":"0.1.0"},"latestPackageBehavior":"workflow-only","cachedTestCases":"$17:1:props:state:queries:0:state:data:json:versions:0:version:cachedTestCases"},"meta":{"values":{"versions.0.version.createdAt":["Date"],"versions.0.insightsTemplate.generatedAt":["Date"]},"referentialEqualities":{"cachedTestCases":["versions.0.version.cachedTestCases"]}}},"dataUpdateCount":1,"dataUpdatedAt":1787181359874,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["registry","getPackage"],{"input":{"name":"react-stable-map-keys","scope":"$undefined"},"type":"query"}],"queryHash":"[[\"registry\",\"getPackage\"],{\"input\":{\"name\":\"react-stable-map-keys\"},\"type\":\"query\"}]"}]},"children":"$L48"}]] 1a:null 1e:[["$","title","0",{"children":"react-stable-map-keys - Codemod Registry"}],["$","meta","1",{"name":"description","content":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO"}],["$","meta","2",{"name":"author","content":"Alex Bit"}],["$","meta","3",{"name":"keywords","content":"react-stable-map-keys, codemod, code transformation, automated refactoring, package, registry, react, standardization, a11y, performance"}],["$","meta","4",{"name":"creator","content":"Alex Bit"}],["$","meta","5",{"name":"publisher","content":"Codemod"}],["$","meta","6",{"name":"robots","content":"index, follow"}],["$","meta","7",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","8",{"name":"application-name","content":"Codemod Registry"}],["$","meta","9",{"name":"apple-mobile-web-app-title","content":"Codemod"}],["$","meta","10",{"name":"apple-mobile-web-app-capable","content":"yes"}],["$","meta","11",{"name":"apple-mobile-web-app-status-bar-style","content":"default"}],["$","meta","12",{"name":"format-detection","content":"telephone=no"}],["$","meta","13",{"name":"mobile-web-app-capable","content":"yes"}],["$","meta","14",{"name":"msapplication-config","content":"/browserconfig.xml"}],["$","meta","15",{"name":"msapplication-TileColor","content":"#000000"}],["$","meta","16",{"name":"msapplication-tap-highlight","content":"no"}],["$","meta","17",{"name":"theme-color","content":"#000000"}],["$","meta","18",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}],["$","link","19",{"rel":"canonical","href":"https://app.codemod.com/registry/react-stable-map-keys"}],["$","meta","20",{"property":"og:title","content":"react-stable-map-keys - Codemod Registry"}],["$","meta","21",{"property":"og:description","content":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO"}],["$","meta","22",{"property":"og:url","content":"https://app.codemod.com/registry/react-stable-map-keys"}],["$","meta","23",{"property":"og:site_name","content":"Codemod Registry"}],["$","meta","24",{"property":"og:locale","content":"en_US"}],["$","meta","25",{"property":"og:image","content":"https://app.codemod.com/api/og/registry/react-stable-map-keys"}],["$","meta","26",{"property":"og:image:width","content":"1200"}],["$","meta","27",{"property":"og:image:height","content":"630"}],["$","meta","28",{"property":"og:image:alt","content":"react-stable-map-keys package"}],["$","meta","29",{"property":"og:type","content":"website"}],["$","meta","30",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","31",{"name":"twitter:site","content":"@codemod"}],["$","meta","32",{"name":"twitter:creator","content":"@codemod"}],["$","meta","33",{"name":"twitter:title","content":"react-stable-map-keys - Codemod Registry"}],["$","meta","34",{"name":"twitter:description","content":"Replace React .map() index-as-key with stable keys (item.id) when verifiable, otherwise add TODO"}],["$","meta","35",{"name":"twitter:image","content":"https://app.codemod.com/api/og/registry/react-stable-map-keys"}]]