{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/14374","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/14374/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/14374/comments","events_url":"https://api.github.com/repos/facebook/react/issues/14374/events","html_url":"https://github.com/facebook/react/issues/14374","id":386560024,"node_id":"MDU6SXNzdWUzODY1NjAwMjQ=","number":14374,"title":"Allow suppressing the warning for missing keys.","user":{"login":"flying-sheep","id":291575,"node_id":"MDQ6VXNlcjI5MTU3NQ==","avatar_url":"https://avatars0.githubusercontent.com/u/291575?v=4","gravatar_id":"","url":"https://api.github.com/users/flying-sheep","html_url":"https://github.com/flying-sheep","followers_url":"https://api.github.com/users/flying-sheep/followers","following_url":"https://api.github.com/users/flying-sheep/following{/other_user}","gists_url":"https://api.github.com/users/flying-sheep/gists{/gist_id}","starred_url":"https://api.github.com/users/flying-sheep/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/flying-sheep/subscriptions","organizations_url":"https://api.github.com/users/flying-sheep/orgs","repos_url":"https://api.github.com/users/flying-sheep/repos","events_url":"https://api.github.com/users/flying-sheep/events{/privacy}","received_events_url":"https://api.github.com/users/flying-sheep/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-12-02T13:32:32Z","updated_at":"2018-12-10T16:56:29Z","closed_at":null,"author_association":"NONE","body":"There are valid use cases for not wanting to use keys, if you e.g. render strongly differing trees (like e.g. blog posts) or have a function that returns always the same array of items.\r\n\r\nWhen you don’t provide an explicit key, React will internally use the index as key and emit a warning – however you would want to silence the warning, as using the index here is perfectly valid.\r\n\r\nThis doesn’t currently seem to be possible however, which has the sad consequence that you either have to make your code more complex for no reason (manually adding useless keys) or you have to live with the warnings (which means that valid warnings might be lost among the noise).\r\n\r\nThe [article](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) quoted in the [docs](https://reactjs.org/docs/lists-and-keys.html#keys) states the conditions in which using the default behavior is valid:\r\n\r\n> 1. the list and items are static–they are not computed and do not change;\r\n> 2. the items in the list have no ids;\r\n> 3. the list is never reordered or filtered."},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/445888907","html_url":"https://github.com/facebook/react/issues/14374#issuecomment-445888907","issue_url":"https://api.github.com/repos/facebook/react/issues/14374","id":445888907,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NTg4ODkwNw==","user":{"login":"aweary","id":6886061,"node_id":"MDQ6VXNlcjY4ODYwNjE=","avatar_url":"https://avatars2.githubusercontent.com/u/6886061?v=4","gravatar_id":"","url":"https://api.github.com/users/aweary","html_url":"https://github.com/aweary","followers_url":"https://api.github.com/users/aweary/followers","following_url":"https://api.github.com/users/aweary/following{/other_user}","gists_url":"https://api.github.com/users/aweary/gists{/gist_id}","starred_url":"https://api.github.com/users/aweary/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aweary/subscriptions","organizations_url":"https://api.github.com/users/aweary/orgs","repos_url":"https://api.github.com/users/aweary/repos","events_url":"https://api.github.com/users/aweary/events{/privacy}","received_events_url":"https://api.github.com/users/aweary/received_events","type":"User","site_admin":false},"created_at":"2018-12-10T16:56:29Z","updated_at":"2018-12-10T16:56:29Z","author_association":"MEMBER","body":"> Also the docs explicitly say “If you choose not to assign an explicit key to list items then React will default to using indexes as keys” which can therefore be considered stable behavior.\r\n\r\nSorry, I missed that part. That would be considered stable behavior, though it's still implicit and the docs also state:\r\n\r\n> When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:\r\n\r\nWhich implies that you should be *explicitly* using the index in those cases. We probably need to fix the documentation, because the messaging is somewhat confusing here.\r\n\r\n> I think `<parent suppressKeyWarning>{[<item/>, <item/>, …]}</parent>` would be great\r\n\r\nSilencing the warning on the parent is problematic as you can have multiple lists with different key requirements.\r\n\r\n```jsx\r\n<div suppressKeyWarning>\r\n   {/* No keys required here... */}\r\n   {[<div>first</div>]}\r\n    {/* But keys are required here, and the warning was suppressed! */}\r\n    {this.state.items.map(item => <div>{item}</div>}\r\n</div>\r\n```\r\n\r\n> we pass around less data than by doing `<parent>{[<item key={0}/>, <item key={1}/>, …]}</parent>`\r\n\r\nIt's less data than adding a key to every item in the array separately, like this example. In most cases you'd be mapping through a set of items\r\n\r\n```jsx\r\n<parent>{items.map(data => <item {...data} />}</parent>\r\n```\r\n\r\nIn which case you'd be declaring the key once in the source\r\n\r\n```jsx\r\n<parent>{items.map((data, i) => <item key={i} {...data} />}</parent>\r\n```\r\n\r\nIf you have a static list of items where you are explicitly adding `key` to every item you should use [Fragments](https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html) or remove the wrapping array all together when possible."}}
{"actor":{"display_login":"aweary"}}