production.log

株式会社リブセンスでエンジニアをやっている星直史のブログです。

React Native Debuggerの長時間使用時のメモリリークを防ぐ方法

概要

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の長時間使用時のメモリリークを防ぐ方法について書きます。

設定ファイルを変更

これまで、いちいち再起動していたのですが、アホらしくなったので、設定ファイル的なものがないかを調べたところ、ありました。

github.com

これらの設定の中で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:流石にこれだけだとキツいですが