如何清除在组件生命周期中创建的setTimeout？

Question

The thing is that I am getting this warning:

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.

And it is because of this:

  componentDidUpdate(props, state) {
    const {
      pushNotificationData,
      unassignedPickUpPassengers,
      unassignedDropOffPassengers,
    } = this.props;

    if (props.pushNotificationData !== pushNotificationData) {
      this.applyOpacityForSomeSeconds(0.5, 0);
    }

    if (
      props.unassignedPickUpPassengers !== unassignedPickUpPassengers ||
      props.unassignedDropOffPassengers !== unassignedDropOffPassengers
    ) {
      this.applyOpacityForSomeSeconds(1, 1000);
    }
  }

  applyOpacityForSomeSeconds = (setOpacity, timeout) =>
    setTimeout(() => {
      this.setState({ lastIndexOpacity: setOpacity });
    }, timeout);

How should I clear the timeout on a componentWillUnmount? Is that the proper way of doing this or is there any other way?

Answer 1

You need to keep a reference of it, like this:

applyOpacityForSomeSeconds = (setOpacity, timeout) =>
  clearTimeout(this.timeout) // notice that you don't have to check if this.timeout is null or undefined just let clearTimeout handle it

  this.timeout = setTimeout(() => {
    this.setState({ lastIndexOpacity: setOpacity });
  }, timeout);

Notice, that reference is set at this.timeout = setTimeout(... . You may initialise the reference in the constructor or somewhere else with a null - I always hesitate on this. :)

You can move or copy clearTimeout(this.timeout) into componentWillUnmount if you want.

Answer 2

A simple solution:

componentWillUnmount() {
  this.isUnmounted = true;
}

Then you can add to your timeout callback:

setTimeout(() => {
  if (!this.isUnmounted) {
    this.setState({ lastIndexOpacity: setOpacity });
  }
}, timeout);

This will prevent the setState from running if the component is unmounted.

Answer 3

setTimeout returns a handle you can use with cancelTimeout . You could drop that handle into your state as well:

applyOpacityForSomeSeconds = (setOpacity, timeout) => {
    this.setState({
        opacityTimeout: setTimeout(() => {
            this.setState({
                lastIndexOpacity: setOpacity,
                opacityTimeout: null
            });
        }, timeout);
    });
}

componentWillUnmount() {
    if (this.state.opacityTimeout) {
        clearTimeout(this.state.opacityTimeout);
    }
}

Since you have a timeout of 1 second it might be possible, depending on how quickly your application updates props for this component, that you have multiple timeouts running at the same time. In that case, an array of handles might be a better solution:

(assuming your initial state initializes opacityTimeouts to an empty array)

applyOpacityForSomeSeconds = (setOpacity, timeout) => {
    const handle = setTimeout(() => {
        this.setState({
            lastIndexOpacity: setOpacity,
            opacityTimeouts: this.state.opacityTimeouts.filter(
                h => h !== handle
            )
        });
    }, timeout);

    this.setState({
        opacityTimeouts: [
           ...this.state.opacityTimeouts,
           handle
        ]
    });
}

componentWillUnmount() {
    this.state.opacityTimeouts.forEach(handle => clearTimeout(handle));
}