{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/6067","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/6067/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/6067/comments","events_url":"https://api.github.com/repos/facebook/react/issues/6067/events","html_url":"https://github.com/facebook/react/issues/6067","id":134696906,"number":6067,"title":"Proposal: componentWillPrepareUnmount (continueCallback)","user":{"login":"Kasu","id":805006,"avatar_url":"https://avatars.githubusercontent.com/u/805006?v=3","gravatar_id":"","url":"https://api.github.com/users/Kasu","html_url":"https://github.com/Kasu","followers_url":"https://api.github.com/users/Kasu/followers","following_url":"https://api.github.com/users/Kasu/following{/other_user}","gists_url":"https://api.github.com/users/Kasu/gists{/gist_id}","starred_url":"https://api.github.com/users/Kasu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Kasu/subscriptions","organizations_url":"https://api.github.com/users/Kasu/orgs","repos_url":"https://api.github.com/users/Kasu/repos","events_url":"https://api.github.com/users/Kasu/events{/privacy}","received_events_url":"https://api.github.com/users/Kasu/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":10,"created_at":"2016-02-18T21:06:56Z","updated_at":"2016-02-24T20:04:54Z","closed_at":"2016-02-24T20:04:54Z","body":"*EDIT: After discussion in this thread I've amended ```componentWillRemount``` to the proposal.*\r\n\r\nI've been working a lot with animations in combination with react lately and while most lifecycle methods make transitions on components a walk in the park, I've struggled to get the scenario of unmounting a pleasant experience. In the end though I've come up with a lifecycle method proposal that could be incredibly powerful: ```componentWillPrepareUnmount (continueCallback)``` and ```componentWillRemount```.\r\n\r\nWhat they would do, when declared on a component, is to delay the actual unmount just as if nothing happened, until the component itself calls the provided callback, which then would resume the actual unmounting. If a component in a pending unmount state is restored before the actual unmount takes place, the unmount is canceled and the component treats the change as a regular update (```componentWillUpdate``` fires, etc), with the addition of ```componentWillRemount``` being called to give you the chance to react specifically to this event.\r\n\r\n> Edge case mitigation: Ancestors override descendants. If an ancestor of a component using \"unmount preparation\" unmounts the descendant unmounts instantly without preparation, unless the ancestor also utilizes ```componentWillPrepareUnmount```, which would give it some arbitrary time to prepare.\r\n\r\nThis would allow us to gracefully perform an animation on our components right before they're really unmounted, letting component specific code decide how it should disappear.\r\n\r\nFor example:\r\n```javascript\r\nvar styles = {\r\n    // .. some styling\r\n};\r\n\r\nvar tweenOptions = {\r\n    // .. some tween options\r\n};\r\n\r\n/**\r\n * A menu item that fades in and scales up on mount \r\n * and then fades out and scales down on unmount.\r\n */\r\nclass MenuItem extends React.Component {\r\n    componentWillMount () {\r\n        this.tweens = {\r\n            opacity: new Tween(0, tweenOptions),\r\n            scaleY: new Tween(0, tweenOptions)\r\n        };\r\n        this.animateShow();\r\n    }\r\n\r\n    componentWillPrepareUnmount (continueCallback) {\r\n        Promise.all([\r\n            this.tweens.opacity.to(0),\r\n            this.tweens.scaleY.to(0)\r\n        ]).then(continueCallback);\r\n    }\r\n\r\n    componentWillRemount () {\r\n        this.animateShow();\r\n    }\r\n\r\n    animateShow () {\r\n        this.tweens.opacity.to(1);\r\n        this.tweens.scaleY.to(1);\r\n    }\r\n    \r\n    render () {\r\n        return (\r\n            <surface style={{...styles, this.tweens}}>\r\n                {this.props.label}\r\n            </surface>\r\n        );\r\n    }\r\n}\r\n```\r\n\r\nAnd the usage:\r\n```javascript\r\nclass Menu extends React.Component {\r\n    render () {\r\n        var itemElements = this.props.items.map((item) => {\r\n            return <MenuItem key={item.id} label={item.label}/>;\r\n        });\r\n        return (\r\n            <surface style={{flexDirection: \"row\"}}>\r\n                {itemElements}\r\n            </surface>\r\n        );\r\n    }\r\n}\r\n\r\nMenu.propTypes = {\r\n    items: React.PropTypes.arrayOf(\r\n        React.PropTypes.shape({\r\n            id: React.PropTypes.any,\r\n            label: React.PropTypes.string\r\n        })\r\n    ).isRequired\r\n};\r\n```\r\n\r\nWhat do you think?"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/188433792","html_url":"https://github.com/facebook/react/issues/6067#issuecomment-188433792","issue_url":"https://api.github.com/repos/facebook/react/issues/6067","id":188433792,"user":{"login":"jimfb","id":9595985,"avatar_url":"https://avatars.githubusercontent.com/u/9595985?v=3","gravatar_id":"","url":"https://api.github.com/users/jimfb","html_url":"https://github.com/jimfb","followers_url":"https://api.github.com/users/jimfb/followers","following_url":"https://api.github.com/users/jimfb/following{/other_user}","gists_url":"https://api.github.com/users/jimfb/gists{/gist_id}","starred_url":"https://api.github.com/users/jimfb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jimfb/subscriptions","organizations_url":"https://api.github.com/users/jimfb/orgs","repos_url":"https://api.github.com/users/jimfb/repos","events_url":"https://api.github.com/users/jimfb/events{/privacy}","received_events_url":"https://api.github.com/users/jimfb/received_events","type":"User","site_admin":false},"created_at":"2016-02-24T20:04:53Z","updated_at":"2016-02-24T20:04:53Z","body":"After some discussions with Sebastian, and thinking on this issue, I agree that this doesn't elegantly handle the edge cases for the reasons mentioned above (classic problem with proposed solutions to animation).  For this reason, I'm going to close out the issue.  But feel free to continue the discussion on this thread, and we can re-open if our thinking changes dramatically."}}