{"action":"opened","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/18142","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/18142/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/18142/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/18142/events","html_url":"https://github.com/facebook/react-native/issues/18142","id":301238215,"number":18142,"title":"FlatList performance slow on large changes to list","user":{"login":"davidliu","id":242400,"avatar_url":"https://avatars0.githubusercontent.com/u/242400?v=4","gravatar_id":"","url":"https://api.github.com/users/davidliu","html_url":"https://github.com/davidliu","followers_url":"https://api.github.com/users/davidliu/followers","following_url":"https://api.github.com/users/davidliu/following{/other_user}","gists_url":"https://api.github.com/users/davidliu/gists{/gist_id}","starred_url":"https://api.github.com/users/davidliu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidliu/subscriptions","organizations_url":"https://api.github.com/users/davidliu/orgs","repos_url":"https://api.github.com/users/davidliu/repos","events_url":"https://api.github.com/users/davidliu/events{/privacy}","received_events_url":"https://api.github.com/users/davidliu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-01T00:42:54Z","updated_at":"2018-03-01T00:42:54Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n  PLEASE DON'T DELETE THIS TEMPLATE UNTIL YOU HAVE READ THE FIRST SECTION.\r\n-->\r\n\r\n### Is this a bug report?\r\n\r\nYes. A reopening of #16186, as it is reproducible on 0.53.3\r\n\r\n### Have you read the [Contributing Guidelines](https://facebook.github.io/react-native/docs/contributing.html)?\r\n\r\nYes.\r\n\r\n### Environment\r\n\r\nEnvironment:\r\n  OS: macOS Sierra 10.12.6\r\n  Node: 9.4.0\r\n  Yarn: 1.3.2\r\n  npm: 4.6.1\r\n  Watchman: 4.9.0\r\n  Xcode: Xcode 9.2 Build version 9C40b\r\n  Android Studio: 2.3 AI-162.4069837\r\n\r\nPackages: (wanted => installed)\r\n  react: 16.2.0 => 16.2.0\r\n  react-native: 0.53.3 => 0.53.3\r\n\r\nTarget Platform: iOS and Android (various OS versions, up to and including latest on each).\r\n\r\n### Steps to Reproduce\r\n\r\n(Copied from the previous issue, as it still applies).\r\n\r\nI have a FlatList that contains many items (1000+). It represents a lengthy checklist. I have a \"Select All\" button which causes every item in the list to be selected. The performance of rendering this is noticeably bad.\r\n\r\n1. Open the Snack https://snack.expo.io/S1z6PMZnZ (preferably on a physical device since iOS simulator will likely have better performance than a physical device)\r\n2. Tap on an individual row to see a slight lag in performance\r\n3. Tap on \"Select All\" or \"Deselect All\" to change every item in the list and see a big delay in rendering the new state\r\n\r\nNote that in the Snack, I am only recreating a single object of id->boolean key/value pairs when a change is made. This is my effort to isolate FlatList performance.\r\n\r\n\r\n### Expected Behavior\r\n\r\nSince a FlatList doesn't render offscreen components, it should not synchronously update any offscreen elements, but instead asynchronously update those elements as it does for its initial load. This will result in a quick and responsive update of onscreen elements without blocking the ui for too long.\r\n\r\n### Actual Behavior\r\n\r\nIf you tap \"Select All\" or \"Deselect All\" (whichever changes all the items in a list), there is a large amount of rendering lag. \r\n\r\n![31130396-840df172-a814-11e7-856a-ab6e8d076f26](https://user-images.githubusercontent.com/242400/36821051-e83262e0-1ca5-11e8-9cb3-b94eb54166b7.gif)\r\n\r\nIf you profile it on a device with Chrome Debugging tools, you'll notice that it spends a lot of time updating every single row, even though most of the rows are offscreen.\r\n\r\n<img width=\"1384\" alt=\"screen shot 2018-02-28 at 4 39 50 pm\" src=\"https://user-images.githubusercontent.com/242400/36821080-0b78e12a-1ca6-11e8-9e9f-e1e0f32b8087.png\">\r\n\r\n<img width=\"1347\" alt=\"screen shot 2018-02-28 at 4 40 49 pm\" src=\"https://user-images.githubusercontent.com/242400/36821112-32884fee-1ca6-11e8-8bcf-a06cd77bb2dd.png\">\r\n\r\n### Reproducible Demo\r\n\r\nhttps://snack.expo.io/S1z6PMZnZ\r\n"}}
{"actor":{"display_login":"davidliu"}}