アルパカログ

Reactアプリで表示を切り替えるためにコンポーネントをアンマウントしたときに、下記のようなエラーが出ることがあります。

このエントリでは、Reactコンポーネントのアンマウント時のエラーを修正する方法を紹介します。

エラーの意味は、アンマウントしたコンポーネントではstateの更新が行えないため、componentWillUnmountメソッドで非同期処理やイベントの講読をキャンセルしなければメモリリークを引き起こす可能性があるというものです。

解決策としては大きく2つあります。

ひとつは、setStateを含むそれらの処理を、ReactのuseEffect副作用フック内で行うというものです。

しかし、フックには次のようなルールがあります。

つまり、今のところクラスコンポーネント内のメソッドからは呼べないということです。これはちょっと微妙です。

もうひとつの解決方法は、mountedのようなマウント状態を表すカスタムプロパティを定義する方法です。

流れとしては次のようになります。

下記に例を示します。

constructor(props) {
  super(props);
  this.mounted = false;
}

componentDidMount() {
  this.mounted = true;
}

componentWillUnmount() {
  this.mounted = false;
}

doSomething() {
  // 非同期処理の前にmountedをチェックする
  this.mounted && this.setState({ ... });
}

これでエラーが発生しなくなります。

以上です。

このエントリでは、Reactコンポーネントのアンマウント時のエラーを修正する方法を紹介しました。