Can't perform a React state update on an unmounted component

Seeing this error when I hide a div that contains many ChipSet components.

index.js:1452 Warning: Can't perform a React state update 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.
    in RippledComponent
    in div
    in ChipSet

It seems to happen right before execution of this line:

https://github.com/material-components/material-components-web-react/blob/a468f024df300c535d220f9bbc493e5c67af77d5/packages/chips/Chip.js#L74

I see there is no “mounted” check prior to this setState call, maybe this could be the source of error.

[mohokh67]

Fix it with this technique.

Look where I added _isMounted and follow the same in you code

class Page extends Component {
  _isMounted = false;

  state = {
    isLoading: true
  }

  componentDidMount() {
    this._isMounted = true;
  
    callAPI_or_DB(...).then(result => {
      if (this._isMounted) {
        this.setState({isLoading: false})
      }
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    return (
      <div>Whatever</div>
    );
  }
}

export default Page;

[5ervant]

@mohokh67 What about solution for a functional component?