概要
React Nativeを使用したアプリの開発時に必要になるものはデバッガーです。デバッガーにはいくつか種類があります。
- Chrome
- VSCode
- Reactotron
- React Native Debugger
- console.log*1
これらの中で、私はReact Native Debuggerを使用しています。
- Chrome: debugger-uiページをアクティブにしていないと、エミュレーターにWarningが出てしまうのが気に入らない
- VSCode: Vimを使っているため除外
- Reactotron: 設定ファイルを書くのに気乗りしなかった
当時(2019年初頭)、上記のような理由(消去法)でReact Native Debuggerに決まりました。
React Native Debuggerは導入も機能も充実しているのですが、唯一の欠点は長時間使っているとメモリリークしてしまうことです。
平気で5GB以上食い潰すので、スワップ使用領域が増えてPCが重くなり、気づくこともあります。
今回はこのReact Native Debuggerの長時間使用時のメモリリークを防ぐ方法について書きます。
設定ファイルを変更
これまで、いちいち再起動していたのですが、アホらしくなったので、設定ファイル的なものがないかを調べたところ、ありました。
これらの設定の中でtimesJSLoadToRefreshDevToolsがどうやらそれっぽいです。
// Refresh devtools when doing JS reload every N times. (-1 for disabled)
// This can effectively avoid possible memory leaks (Like
// https://github.com/jhen0409/react-native-debugger/issues/405) in devtools.
timesJSLoadToRefreshDevTools: -1,
とあるので、n回ごとにJSリロードを行うときにdevtoolsを更新するようです。
デフォルトの設定では-1であるため、無効となっています。
コメントにも「これにより、メモリリークの可能性を効果的に回避できます
」とあるので、一応作者が推している方法のようですね(白目)
設定は以下の通り、行います。
メニューバー => Debugger => Open Config File
すると、エディタが開くので、timesJSLoadToRefreshDevTools: 5といった感じで、-1以外の数値を設定します。
ちなみに、リフレッシュする際はほぼシームレスに行われるため、待ち時間はそこまでありません。私は5回に設定しました。
まとめ
React Native Debuggerの唯一にして最大の欠点であるメモリリーク問題ですが、設定ファイルを変更することで解決しました。
解決方法として、作者がプロダクトのメモリリークを根本解決するものではなく、n回JSのリロードしたらリフレッシュするといったものでしたが、
なにはともあれ解決できたのでよかったです。
*1:流石にこれだけだとキツいですが
