MENU
HOMEWebjs: React Native メモリーリークの原因になる要素

js: React Native メモリーリークの原因になる要素

React Native のメモリーリークについて調査。
下記サイトにて Animated について分析、解説されていました。一部引用させていただきました。
https://quipper.hatenablog.com/entry/2018/12/07/memory_leak_investigation

少し解説すると、Animated.startメソッドのcallbackに渡ってくるfinishedというbooleanフラグがtrueだった場合時のみアニメーションを再度開始するように修正をしました。この条件文が抜けていた為に、キャンセル・停止済のアニメーションに対しても再度startメソッドが呼び出され結果として必要ない大量のAnimatedValueオブジェクトが作られメモリ領域を圧迫してしまっていたという事でした。詳細が気になる方は以下の公式ドキュメントをご覧ください。
https://facebook.github.io/react-native/docs/animated#working-with-animations

ちなみに、このエントリを書く過程で調査してみたところReact Nativeでメモリリークの原因になりがちなのはAnimation以外にも以下の項目があるそうです。
・Component内でのaddListenerの解除し忘れ
・setIntervalのclearし忘れ
・Closure(arrow function)による外部変数の参照によるキャプチャ

ページの先頭へ