{"action":"created","issue":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/210","repository_url":"https://api.github.com/repos/tomchentw/react-google-maps","labels_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/210/labels{/name}","comments_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/210/comments","events_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/210/events","html_url":"https://github.com/tomchentw/react-google-maps/issues/210","id":134024044,"number":210,"title":"Unmounting Markers performance","user":{"login":"dwickstrom","id":1133233,"avatar_url":"https://avatars.githubusercontent.com/u/1133233?v=3","gravatar_id":"","url":"https://api.github.com/users/dwickstrom","html_url":"https://github.com/dwickstrom","followers_url":"https://api.github.com/users/dwickstrom/followers","following_url":"https://api.github.com/users/dwickstrom/following{/other_user}","gists_url":"https://api.github.com/users/dwickstrom/gists{/gist_id}","starred_url":"https://api.github.com/users/dwickstrom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dwickstrom/subscriptions","organizations_url":"https://api.github.com/users/dwickstrom/orgs","repos_url":"https://api.github.com/users/dwickstrom/repos","events_url":"https://api.github.com/users/dwickstrom/events{/privacy}","received_events_url":"https://api.github.com/users/dwickstrom/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/tomchentw/react-google-maps/labels/help%20wanted","name":"help wanted","color":"159818"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-02-16T16:15:53Z","updated_at":"2016-05-29T08:12:07Z","closed_at":"2016-05-29T08:12:07Z","body":"Hello people,\r\n\r\nI might have ran into some kind of limiting factor regarding this library in connection with rendering, or rather the un-rendering a larger amount of markers.\r\n\r\nThe problem is that it takes a very long tim (about 10 seconds) for React to re-render when transitioning between state 1 to 2.\r\n\r\nState #1\r\n~1000 pretty simple and straight forward javascript objects are held in a state key in my React component. Each of them are also rendered into the DOM by React like so:\r\n```\r\nconst infoWindow = (this.props.infoWindows.includes(marker.id)) ? this.renderInfoWindow(ref, marker, i) : null;\r\nreturn (\r\n  <Marker\r\n    {...marker}\r\n    position={marker.position}\r\n    icon={buildIconObject(marker.type, marker.state)}\r\n    key={i}\r\n    ref={ref}\r\n    onClick={this.props.handleMarkerClick.bind(marker, marker.id)}\r\n    infoWindow={infoWindow}>\r\n  </Marker>\r\n)\r\n```\r\nState #2 \r\n\r\nAbout 20 javascript objects rendered in the same way as the above.\r\n\r\n\r\nFor some reason it takes forever (about 10 seconds) to set the new state object:\r\n\r\n```\r\nthis.setState({\r\n  markers: newMarkers, // replacing the array of ~1000 markers with ~20\r\n})\r\n```\r\n\r\nI have tried to remove everything except the position key from the marker component to se if there was some kind of problem, but it didn't help at all. I have also tried dropping the `<Marker />` altogether and instead plot the markers with Google's components directly and then use `marker.setMap(this._googleMapComponent.props.map)` to render it into the DOM. This solved the problem, I think, since the delay was gone. However, that might be because I didn't remove them from the DOM when the React state was changed. That might be clue as to what's going on.\r\n\r\nIn essence, my question is, why does the removing all these markers seem to take such a long time?\r\n\r\nDoes this sound familiar or spark any ideas?"},"comment":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/comments/222348360","html_url":"https://github.com/tomchentw/react-google-maps/issues/210#issuecomment-222348360","issue_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/210","id":222348360,"user":{"login":"tomchentw","id":922234,"avatar_url":"https://avatars.githubusercontent.com/u/922234?v=3","gravatar_id":"","url":"https://api.github.com/users/tomchentw","html_url":"https://github.com/tomchentw","followers_url":"https://api.github.com/users/tomchentw/followers","following_url":"https://api.github.com/users/tomchentw/following{/other_user}","gists_url":"https://api.github.com/users/tomchentw/gists{/gist_id}","starred_url":"https://api.github.com/users/tomchentw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tomchentw/subscriptions","organizations_url":"https://api.github.com/users/tomchentw/orgs","repos_url":"https://api.github.com/users/tomchentw/repos","events_url":"https://api.github.com/users/tomchentw/events{/privacy}","received_events_url":"https://api.github.com/users/tomchentw/received_events","type":"User","site_admin":false},"created_at":"2016-05-29T08:12:07Z","updated_at":"2016-05-29T08:12:07Z","body":"We're going to look into this shortly.\r\n\r\nWe're also looking for maintainers. Involve in #266 to help strengthen our community!"}}
{"actor":{"display_login":"tomchentw"}}