Warning: setState(...): Can only update a mounted or mounting component.

Hi,

First off, thanks for an awesome lib.

We’ve experienced some issues when the animation is running but the component gets unmounted, as seen here:

I believe this is related to tweenValue’s (possibly also endTween’s) setState call.

Probably workaround:

componentDidMount() {
    this.setState({ isMounted: true });
}
componentWillUnmount() {
    this.setState({ isMounted: false}, () => {
        this.endTween();
    });
}
// ....


// ... not sure if needed
endTween() {
    raf.cancel(this.tweenHandle);
    if (this.state.isMounted) {
        this.setState({
            ...this.state,
            currentValue: this.props.value
        });
    }
}

// ... but this probably is:
tweenValue(timestamp, start) {
    // ....
    if (this.state.isMounted) {
        this.setState({
            currentValue: newValue,
            startTime: startTime ? startTime : currentTime,
            fromValue, currentTime
        });
    }
    // ...
}

[phiresky]

Fixed in #13

[t1mmen]

@ameyms I’ve been unable to pin down exactly when/why this happens, I’m afraid. If I manage to figure it out, I’ll produce a gist for you.

@septs That is why I didn’t check this.isMounted() but kept it in state, though a property on the class is probably better as described in the link you pasted:

An easy migration strategy for anyone upgrading their code to avoid isMounted() is to track the mounted status yourself. Just set a _isMounted property to true in componentDidMount and set it to false in componentWillUnmount, and use this variable to check your component’s status.