takeWhile はメモリリーク (無駄なメモリ消費) の原因になり得る

takeWhile に参照透過でない式を渡すのは良くない。

上記が分かっていれば下記を読む必要はありません。

経緯

React開発ノウハウメモ（随時更新）
上記記事を読んで unsubscribe を componentWillUnmount に書かない方法を知ったので調べてみた。¹

takeWhile はメモリリークの原因になり得る。

takeWhile は値が来たときのみ実行されるので値が来なければ unsubscribe されない。
無駄なネットワーク通信やDBへのアクセスを続けてしまう。
takeWhile は値に応じて処理を続けるべきか決まる場合で使うべき。

Observable を流れる値と関係なく処理を止めたいなら unsubscribe を呼ぶか takeUntil を使う。

テストしてみる

実際に試してみるためのコードを書いた。
それらで下記の 3 つの関数を使っている。

utils.ts

// s 秒待つ
const sleep = (s: number) => new Promise(r => setTimeout(r, s * 1000))
// タイムスタンプをつけてログを出す
const log = (...v: any[]) => {
    const ts = (performance.now() / 1000) | 0
    console.log(...v, `(${ts})`)
}
// キャンセルできる Observable を生成
const make = (name: string) => {
    return new Observable<number>(s => {
        let canceled = false
        const push = (v: number) => {
            log(name, 'sub1', v, '- canceled', canceled)
            s.next(v)
        }
        Promise.resolve().then(async () => {
            push(12) // すぐに 12 を渡す
            await sleep(10) // 10 秒待ってから
            push(13) // 13 を渡す
            push(14) // 14 を渡す
        })
        return () => {
            log(name, 'unsub1')
            canceled = true
        }
    })
}

テスト内容

上記 make で Observable を生成したのち 1 秒後に処理を止める。

unsubscribe する

一般的なやりかたであると思われる。
問題なく動いている。

test1.ts

const test1 = async () => {
    const read = make('test1').pipe(
        tap(v => log('test1', 'sub2', v)),
    ).subscribe()
    await sleep(1)
    read.unsubscribe()
}
test1() /*
test1 sub1 12 - canceled false (0)
test1 sub2 12 (0)
test1 unsub1 (1)
test1 sub1 13 - canceled true (10)
test1 sub1 14 - canceled true (10)
*/

takeWhile を使う

1 秒後に止めようとしたが、その後 9 秒経って次の値が来るまで止まっていない。

test2.ts

const test2 = async () => {
    let alive = true
    make('test2').pipe(
        takeWhile(() => alive),
        tap(v => log('test2', 'sub2', v)),
    ).subscribe()
    await sleep(1)
    alive = false
}
test2() /*
test2 sub1 12 - canceled false (0)
test2 sub2 12 (0)
test2 sub1 13 - canceled false (10)
test2 unsub1 (10)
test2 sub1 14 - canceled true (10)
*/

takeUntil を使う

問題なく動く。

test3.ts

const test3 = async () => {
    const unsub = new Subject<void>()
    make('test3').pipe(
        takeUntil(unsub),
        tap(v => log('test3', 'sub2', v)),
    ).subscribe()
    await sleep(1)
    unsub.next()
    unsub.complete()
}
test3() /*
test3 sub1 12 - canceled false (0)
test3 sub2 12 (0)
test3 unsub1 (1)
test3 sub1 13 - canceled true (10)
test3 sub1 14 - canceled true (10)
*/

unsubscribe と takeUntil 、どちらを使うべきか？

こちらの記事 (英語)では takeUntil がオススメされている。

手続き的な unsubscribe よりも宣言的な takeUntil が良いという判断だろうか？

補足

React と RxJS を組み合わせる場合

大規模なアプリなら redux-observable を、小規模なら rxjs-hooks を使うことを勧める。
古い React を使っているなら recompose も良い。

---

1. useEffect のある今の React で componentWillUnmount のような古い方法を使う必要はないと思う。 ↩