【React】「Warning: Can’t perform a React state update on an unmounted component」警告の対処法

React Native でアプリを開発中、時折目にしていた警告メッセージにようやく対応できたので、その方法についてまとめ。
タイトルでは警告メッセージが長すぎたので省略しましたが、「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.」という警告です。
こちらは、A から B のページに遷移後、まだページの読み込みが完了していないタイミングで A のページに戻ったときなどに発生していました。

対応にあたり、参考にさせていただいた記事はこちら。

javascript – Can’t perform a React state update on an unmounted component – Stack Overflow
https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component

 

上記の記事内で一番実装がお手軽だったのが、下記を該当のページに追加する方法です。

componentWillUnmount() {
  this.setState = (state, callback) => {
    return;
  };
}

componentWillUnmount() が、ページを離れる直前に実行される処理なので、そのタイミングで state を操作しているのでしょうが…正直、何をしているのか正確には分かっていません…。

なお、該当のページは警告メッセージの下に表示されるので、それを参考にして下さい。
で、上記を追加して、再度警告メッセージが表示した時と同じ操作をしたところ、無事、警告が表示されなくなりました…!
他のページにも同じように追加して様子を見るつもりですが、今のところ特に何の問題もないです。

たったこれだけで解決出来るなんて…もっと早く調べて対応すれば良かったです…。

 

以上、React(React Native)で「Warning: Can’t perform a React state update on an unmounted component」という警告メッセージが表示されるときの対処方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG