Htykuut

I know that a common pattern of avoiding calling .setState() on an unmounted component is by adding a private property such as _isMounted to keep track of it, as mentioned in a blog.

I've been using this method like this:

class Hello extends React.PureComponent{

_isMounted = false;



constructor(props) {

    super(props);

    this.state = {

        // ...

    };

}



componentDidMount() {

    this._isMounted = true;

}



componentWillUnmount() {

    this._isMounted = false;

}

// ...

}

Everything was fine until I started to use TypeScript. I tried to do this in the same way:

class Hello extends React.PureComponent<Props, State> {

private _isMounted: boolean;



constructor(props: Props) {

    super(props);

    this.state = {

        // ...

    };

}



componentDidMount() {

    this._isMounted = true;

}



componentWillUnmount() {

    this._isMounted = false;

}

}

But then it always throws a type error:

TypeError: Cannot set property _isMounted of #<Component> which has only a getter

For now, the only solution I know is to explicitly write a setter for it. But I don't really understand if this is the expected way to do it. Doesn't TypeScript generate getter and setter automatically?

Updated:

A codesandbox example: https://codesandbox.io/s/l59wnqy5zz