イベントとモデル: TodoListModel.js の onChange の返している関数の意味

[tabass]

該当ページ

https://jsprimer.net/use-case/todoapp/event-model/#event-emitter-todolist-model

質問内容

src/model/TodoListModel.jsのonChangeは以下のようになっていますが、

    onChange(listener) {
        this.addEventLister("change", listener);
        return () => {
            this.removeEventLister("change", listener);
        };
    }

単に以下のような実装でも正常に動作するように思いました。

    onChange(listener) {
        this.addEventLister("change", listener);
    }

returnでremoveEventListerを呼ぶ関数を返しているのには、どのような意味があるのか教えていただけますでしょうか。

[azu]

const unlisten = onChange(() => { /* onChangeのハンドラ */ });
// onChangeのハンドラを解除する
unlisten();

というパターン向けにremoveEventLister(登録したイベントリスナーを解除する処理)を返していた感じですね。
登録したイベントは解除しないとメモリリークの原因となるので、ちゃんと解除できるように作るのがいいのですが、正直このサンプルだとリロードで十分なのでそこまでいけてないという感じですね。

ホントは mountで addEventLister して

js-primer/source/use-case/todoapp/final/final/src/App.js

Line 42 in 7c8a444

this.todoListModel.onChange(() => {

unmountで removeEventLister するという対比構造にする予定で書いていたのですが、
unmountの部分が省略されてしまった残骸みたいなものになっていますね。
return () => this.removeEventLister("change", listener); の部分は消そうかなと思います。

[tabass]

ご回答ありがとうございます。本書のレベルは私にちょうど良く、たいへん勉強になっています。おかげさまで上記のやり取りが理解できるほどになってきたかと思います。ありがとうございます。