Proposal: componentWillPrepareUnmount (continueCallback)

EDIT: After discussion in this thread I’ve amended componentWillRemount to the proposal.

I’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.

What 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.

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.

This 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.

For example:

var styles = {
    // .. some styling
};

var tweenOptions = {
    // .. some tween options
};

/**
 * A menu item that fades in and scales up on mount 
 * and then fades out and scales down on unmount.
 */
class MenuItem extends React.Component {
    componentWillMount () {
        this.tweens = {
            opacity: new Tween(0, tweenOptions),
            scaleY: new Tween(0, tweenOptions)
        };
        this.animateShow();
    }

    componentWillPrepareUnmount (continueCallback) {
        Promise.all([
            this.tweens.opacity.to(0),
            this.tweens.scaleY.to(0)
        ]).then(continueCallback);
    }

    componentWillRemount () {
        this.animateShow();
    }

    animateShow () {
        this.tweens.opacity.to(1);
        this.tweens.scaleY.to(1);
    }

    render () {
        return (
            <surface style={{...styles, this.tweens}}>
                {this.props.label}
            </surface>
        );
    }
}

And the usage:

class Menu extends React.Component {
    render () {
        var itemElements = this.props.items.map((item) => {
            return <MenuItem key={item.id} label={item.label}/>;
        });
        return (
            <surface style={{flexDirection: "row"}}>
                {itemElements}
            </surface>
        );
    }
}

Menu.propTypes = {
    items: React.PropTypes.arrayOf(
        React.PropTypes.shape({
            id: React.PropTypes.any,
            label: React.PropTypes.string
        })
    ).isRequired
};

What do you think?

[gaearon]

@chenglou thought about this a lot (which resulted in react-motion). I found his thoughts on animation quite insightful.

[jimfb]

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.