'Memory leak in SVG Text component in React Native macOS on M1

while using react-native-svg library for building graphics in a macOS app, I encountered a problem regarding performance, or a memory leak, don't know how I should call it.

When iterating over an array and mapping values into a <SVGText> component, the application frozens and memory usage goes up-high (>4 gb). I've tried to overcome this, generating the svg using the component, independent component for text, but further it proved that the problem comes from a lower-lever code.

The snippet:

<Svg width={width} height={height}>
  <G y={10}>
    <Path d={`${this.linePath}`} fill="none" stroke="white" strokeWidth="1.5" strokeMiterlimit="20" />
  </G>
  <G y={40}>
    {this.xTicks.map((tick, i) => (
      <G key={i}>
        <Line x1={tick.x} x2={tick.x} y1={tick.y} y2={tick.y + 5} stroke="grey" />
        <SVGText originX={tick.x} originY={tick.y + 20} fill="pink" textAnchor="middle" fontSize={8}>
          {tick.label}
        </SVGText>
      </G>
    ))}
  </G>
</Svg>

As I don't have great skills in low-level languages and don't know how react-native-svg internally works and I'm using a relative new system (M1) together with NSPopover in system tray, I guess it's relatively a unique problem.

How do you think I can debug this?

enter image description here

Environment info

React native info output:

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 366.59 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: Not Found
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2022.02.14.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /Users/paul/.rvm/gems/ruby-2.7.4/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.12 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.3 => 0.67.3
    react-native-macos: ^0.66.21 => 0.66.21
  npmGlobalPackages:
    *react-native*: Not Found

react-native-svg version: 12.1.1



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source