{"action":"created","issue":{"url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/178","repository_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper","labels_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/178/labels{/name}","comments_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/178/comments","events_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/178/events","html_url":"https://github.com/alexbrillant/react-native-deck-swiper/issues/178","id":358414543,"node_id":"MDU6SXNzdWUzNTg0MTQ1NDM=","number":178,"title":"Possible memory leak in onSwipedAll()","user":{"login":"mcavaliere","id":147237,"node_id":"MDQ6VXNlcjE0NzIzNw==","avatar_url":"https://avatars3.githubusercontent.com/u/147237?v=4","gravatar_id":"","url":"https://api.github.com/users/mcavaliere","html_url":"https://github.com/mcavaliere","followers_url":"https://api.github.com/users/mcavaliere/followers","following_url":"https://api.github.com/users/mcavaliere/following{/other_user}","gists_url":"https://api.github.com/users/mcavaliere/gists{/gist_id}","starred_url":"https://api.github.com/users/mcavaliere/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mcavaliere/subscriptions","organizations_url":"https://api.github.com/users/mcavaliere/orgs","repos_url":"https://api.github.com/users/mcavaliere/repos","events_url":"https://api.github.com/users/mcavaliere/events{/privacy}","received_events_url":"https://api.github.com/users/mcavaliere/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-09-09T21:34:04Z","updated_at":"2018-10-16T00:05:08Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"I'm getting the following error while using `react-native-deck-swiper` within a `react-navigation` view that is connected to Redux:\r\n\r\n```Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. ```\r\n\r\nIt happens when I dispatch an action telling `react-navigation` to redirect me to another screen inside the swiper's onSwipedAll() callback. \r\n\r\nWhat appears to be happening is a race condition within `incrementCardIndex()` .\r\n\r\n```js\r\n  incrementCardIndex = onSwiped => {\r\n    // ...\r\n\r\n    this.onSwipedCallbacks(onSwiped, swipedAllCards)\r\n    this.setCardIndex(newCardIndex, swipedAllCards)\r\n  }\r\n\r\n // ...\r\n\r\n  setCardIndex = (newCardIndex, swipedAllCards) => {\r\n    this.setState(\r\n      // ...\r\n    )\r\n  }\r\n\r\n```\r\n\r\nSince the callback is getting fired before `setCardIndex()`, it's trying to redirect the screen (and triggering an unmount) before `setState()` gets called. \r\n"},"comment":{"url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/comments/430055660","html_url":"https://github.com/alexbrillant/react-native-deck-swiper/issues/178#issuecomment-430055660","issue_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/178","id":430055660,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMDA1NTY2MA==","user":{"login":"mcavaliere","id":147237,"node_id":"MDQ6VXNlcjE0NzIzNw==","avatar_url":"https://avatars3.githubusercontent.com/u/147237?v=4","gravatar_id":"","url":"https://api.github.com/users/mcavaliere","html_url":"https://github.com/mcavaliere","followers_url":"https://api.github.com/users/mcavaliere/followers","following_url":"https://api.github.com/users/mcavaliere/following{/other_user}","gists_url":"https://api.github.com/users/mcavaliere/gists{/gist_id}","starred_url":"https://api.github.com/users/mcavaliere/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mcavaliere/subscriptions","organizations_url":"https://api.github.com/users/mcavaliere/orgs","repos_url":"https://api.github.com/users/mcavaliere/repos","events_url":"https://api.github.com/users/mcavaliere/events{/privacy}","received_events_url":"https://api.github.com/users/mcavaliere/received_events","type":"User","site_admin":false},"created_at":"2018-10-16T00:05:08Z","updated_at":"2018-10-16T00:05:08Z","author_association":"CONTRIBUTOR","body":"@MarcoMig I had to restructure the app a bit to do what I want, and it got resolved. \r\n\r\nBut I think the workaround came from avoiding calling setState() inside onSwipedAll(), and letting onSwipedAll() only dispatch a redirect action. That way setState() was only called before the redirect, and finished way before any unmounting occurred. \r\n\r\nIn my case it looked something like this: \r\n```jsx\r\n{/* render() */}\r\n<Swiper\r\n  onSwiped={ (index) => { this.onSwiped(index) } }\r\n  onSwipedAll={ this.props.onComplete }\r\n/>\r\n``` \r\n\r\n```js\r\n// this.onSwiped\r\nonSwiped(cardIndex) {\r\n  // This was the magic part for me. Since this will never happen for the last card in the stack, \r\n  //   it never runs the risk of calling the setState() below at the same time that onSwipedAll() \r\n  //   triggers the dispatch of the navigation action. \r\n  if (cardIndex+2 <= Constants.QUESTION_COUNT) {\r\n    this.setState({\r\n      // Update this to the index of the next card.\r\n      currentCardIndex: cardIndex+1,\r\n\r\n      // Below we add another +1 to translate from zero-based indexes to\r\n      //  1-based card numbering.\r\n      currentCardNumber: cardIndex+2\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n```js\r\nconst mapDispatchToProps = (dispatch) => () => {\r\n  return {\r\n    goToResults: () => {\r\n      dispatch(\r\n        NavigationActions.navigate({ routeName: 'Results' })\r\n      );\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis is only partial code, but hopefully it helps clarify. Let me know if it works out for you. \r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"mcavaliere"}}