RxJS の購読終了(unsubscribe)の動作確認して理解を深めるまで

前置き

購読終了(unsubscribe)しないとずっとオブジェクトが残るという話を聞いた。
で気になったあれこれを調べて動作確認をしたのでそのメモ。

本編

ほんとに購読終了(unsubscribe)しないとずっとオブジェクトが残るの？

私はAngular を使っており、ページ遷移してコンポーネントが破棄されたらガベージコレクトされるのでは？
となんとなく思っていた。

しかし、実際に確認したところ、確かにオブジェクトが残っていた。
確認方法
下記ページの適当なボタンを押して他のページへ遷移したが、console.log が出力され続けた。
また、chrome の開発者モードでmemory のsnapshot を取って比較したところ、それっぽいオブジェクト※が存在した。

※それっぽいオブジェクトとは
{next, error, complete} 内にmain-AF7LBRZG.js:367 とあった。
当該箇所はページ遷移前のコンポーネントだったので、それっぽいと記載した。

どのように購読終了(unsubscribe)すればいいのか？

一番単純な方法はsubscribe() の戻り値に対してunsubscribe() を実行する方法。
ただし、これでは1個しかunsubscribe() できない。
他のやり方としては、Subscription インスタンスにadd() で登録しまとめてunsubscribe() する方法。
これであれば複数に対応できる。
いずれにしても、RxJS で提供されている機能を使う分にはunsubscribe() が必要である。

筆者のようにAngular で使用するには以下を使うこともできる。

• AsyncPipe
  • Observable を渡せば(un)subscribe を自動でしてくれる。
  • @if, @let と組み合わせることが大半だと思う。
• takeUntilDestroyed
  • subscribe 後にコンポーネント破棄のタイミングで購読終了する。
  • 正確にはストリームをcomplete するのでunsubscribe とは違う。

感想

楽しかった。
あと、ガベージコレクトの対象が思ってたのと違って驚いた。

今回の記事は以上です。

前回記事はこちら

詳細見たい人はこちら