{"id":21521571,"url":"https://github.com/zzarcon/react-smart-key","last_synced_at":"2025-04-09T22:22:18.126Z","repository":{"id":57344963,"uuid":"151998654","full_name":"zzarcon/react-smart-key","owner":"zzarcon","description":"Pass anything as key without re-renders","archived":false,"fork":false,"pushed_at":"2018-10-29T08:42:52.000Z","size":88,"stargazers_count":17,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:22:15.109Z","etag":null,"topics":["array","collection","items","key","list","react","react-key","react-keys","render","rerender"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zzarcon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-08T00:45:10.000Z","updated_at":"2021-07-04T20:50:18.000Z","dependencies_parsed_at":"2022-09-16T07:50:33.054Z","dependency_job_id":null,"html_url":"https://github.com/zzarcon/react-smart-key","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Freact-smart-key","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Freact-smart-key/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Freact-smart-key/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Freact-smart-key/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zzarcon","download_url":"https://codeload.github.com/zzarcon/react-smart-key/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248120468,"owners_count":21050949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["array","collection","items","key","list","react","react-key","react-keys","render","rerender"],"created_at":"2024-11-24T01:07:36.451Z","updated_at":"2025-04-09T22:22:18.107Z","avatar_url":"https://github.com/zzarcon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-smart-key [![Build Status](https://travis-ci.org/zzarcon/react-smart-key.svg?branch=master)](https://travis-ci.org/zzarcon/react-smart-key)\n\u003e Pass whatever as key without re renders\n\nKeys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.\n\nThe best way to pick a key is to use a **string that uniquely identifies** a list item among its siblings. When iterating over non simple values like promises or class instances, it can be tricky to find the right key for the items while keeping a consistent and predictable renders.\n\nThat's what **react-smart-key** solves.\n\n## Install\n\n```\n$ yarn add react-smart-key\n```\n\n## Usage \n\n**simple**\n\nIt will keep a global key cache which will last as long as your app runs\n\n```typescript\nimport generateKey from 'react-smart-key';\n\nconst promise = Promise.resolve(1);\nconst foo = () =\u003e {};\n\ngenerateKey(promise) === generateKey(promise) // true\ngenerateKey(promise) === generateKey(Promise.resolve(1)) // false\ngenerateKey(foo) === generateKey(foo) // true\ngenerateKey(foo) === generateKey(() =\u003e {}) // false\n```\n\n**Full**\n\nThis example illustrates different kind of items and how it will always return the same key for each of them.\n\n```jsx\nimport generateKey from 'react-smart-key';\n\nconst items = [\n  () =\u003e {}, \n  Promise.resolve('a'),\n  Promise.resolve(1),\n  new Date(),\n  function a() {},\n  1,\n  \"2\"\n];\n    \nclass App extends Component {\n  render() {\n    const list = items.map((item) =\u003e \u003cli key={generateKey(item)} /\u003e);\n\n    return \u003cul\u003e{list}\u003c/ul\u003e\n  }\n}\n```\n\n**locally**\n\nSometimes, you want to have a per component unique cache. In this case, you can use **generateLocalKey** which encapsulates a local cache (this also helps garbage collection).\n\n```jsx\nimport {generateLocalKey} from 'react-smart-key';\n    \nclass Component1 extends Component {\n  constructor() {\n    this.generateKey = generateLocalKey();\n  }\n\n  render() {\n    const list = [1,2,3].map((item) =\u003e \n      \u003cli key={this.generateKey(item)} /\u003e\n    );\n\n    return \u003cul\u003e{list}\u003c/ul\u003e\n  }\n}\n\nclass Component2 extends Component {\n  constructor() {\n    this.generateKey = generateLocalKey();\n  }\n\n  render() {\n    const list = ['a', 'b'].map((item) =\u003e \n      \u003cli key={this.generateKey(item)} /\u003e\n    );\n\n    return \u003cul\u003e{list}\u003c/ul\u003e\n  }\n}\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cComponent1 /\u003e\n        \u003cComponent2 /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\n```\n\n## Author\n\n[@zzarcon](https://twitter.com/zzarcon) 😜","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzzarcon%2Freact-smart-key","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzzarcon%2Freact-smart-key","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzzarcon%2Freact-smart-key/lists"}