フロント全体のメモリ管理、注意点、Reactでの対策

1. ギークなフロントのメモリ管理
■メモリ管理とは
■JSのメモリ管理
■JSのメモリリークパターン
■最近のフロントエンドのメモリリーク問題
■まとめ
2023/3/13 梶谷 渓太

2. JSのメモリ管理意識したことありますか？

3. ■メモリ管理とは
• 必要なメモリーを割り当てる
• 割り当てられたメモリーを使⽤する（読み込む、書き込む）
• 必要なくなったら割り当てられたメモリーを解放する
メモリ管理をしないと・・・
メモリリークが発生

4. ■JSのメモリ管理
• 必要なメモリーを割り当てる
JSでメモリが割り当てられるタイミングは？
・値の宣⾔
・関数の呼び出し
じゃあ「必要なくなったら割り当てられたメモリーを解放する」
これはどうやって判断してるの？

5. ■JSのメモリ管理
参照カウント
• 必要なくなったら割り当てられたメモリーを解放する
循環という問題

6. ■JSのメモリ管理
マーク・アンド・スイープアルゴリズム
循環
window

7. １. グローバル変数を作ってしまう
■JSのメモリリークパターン
2. クロージャ
3. 忘れ去られたタイマー
4. DOMの参照外
■最近のフロントエンドにおけるメモリ管理
▼

8. グローバルなtest関数
１. グローバル変数を作ってしまう

9. 2. クロージャ

10. 3. 忘れ去られたタイマー
一定間隔で呼び出されるのでclearItnervalをしないと数値配列が肥大化していき、メモリリークの原因となる

11. 4. DOMの参照外
DOMから削除されたが、メモリ内でまだ使用可能なノード。ガベージコレクタはこれらのDOMオブジェクトを解放できない
removeEventListenerイベントリスナーの参照を作成してメソッドに渡すことにより、イベントリスナーが不要になったら、常に登録を解除する

12. ■最近のフロントエンドのメモリリーク問題①（React）
useE
ff
ectが怪しい
①表示時にチャットサーバーに接続する必要がある。
②第二引数が空配列なのでマウントされた時のみコードを実行。

13. ■最近のフロントエンドのメモリリーク問題②（React）
DeepL翻訳
①fetchをした際にサーバーからのresponseの待ち時間が長くなる
②その間にコンポーネントがUnmountされるRequestは待機中
③そして、Responseが来たら、setPostにpostデータをセットし
Reactは警告文を表示する
ここもuseE
ff
ect関連…

14. 変更前 変更後
・isMountedで制御している
・クリーンアップの処理書いている

15. ■最近のフロントエンドのメモリリーク問題（React）
気にしなくても良さそう
1. Promiseはすぐに解決する可能性が高く、その後メモリを解放できる
2. すぐに解決しなかったとしても、Promisesを使用している場合は警告がアクションはいらない
この警告は削除します。ほとんどの製品開発者が遭遇するケースは、この警告が
役に立たない/誤解を招くだけでなく、警告を抑制しようとするあまり、開発者
をより悪い解決策に追いやってしまうケースがある
Dan Abramov

16. ■まとめ
• JSは自動でGCを行なってくれているので殆どの場合メモリを意識する必要はなさそう。
• もし何かしら動作が遅い場合はメモリリークを気にしてみてもいいかも
疑問に思ったことわからなかったことその他感想
Reactで他にメモリリークが発生するパターンがないのか確かめたい。
Reactではcomponentのunmount時に毎回クリーンアップしているのでメモリリーク
が回避されてる？っぽい
• また、Reactのメモリ管理に対して特別な記述はなく恐らくJSと全く同じか殆ど同じこと
をやってそう。
• useE
ff
ect処理は慎重に
• React公式は日本語より英語orBeta版の方が詳しく書いてくれてる気がする

17. 参考
・Update to remove the "setState on unmounted component" warning #82
・Using the E
ff
ect Hook
・メモリ管理
・ガベージコレクション
・JavaScriptでメモリリークを回避する
・JavaScriptのクロージャはメモリーリークをちゃんと理解して使おう
・JavaScriptガベージコレクション：ブラウザとサーバー
・フック API リファレンス
・React useE
ff
ect メモリーリーク防止 Tip
・React Memory leak エラーの出力対策
・Global object (グローバルオブジェクト)
・React18では setState 時のメモリリーク対策は必要ない
・Understanding Reactʼs useEffect cleanup function
・【3分解説】メモリ管理ってなに？ - キノコード
・Synchronizing with E
ff
ects