'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?
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 |
|---|

