React-native: Debugging projects using too much RAM

[josecarlosns]

So I am having many, MANY issues with react-native lately, I'll give my best to describe what is happening here, so please correct me if I do something wrong or if you need more information.

Disclaimer: This seems related to the metro bundler, but since this is happening on all RN-related projects I've opened the issue here. If needed I can move this issue elsewhere.

So what happened is that debugging RN projects started consuming too much RAM, so much in fact that it frequently freezes my PC.

It started on a simple project I've created with react-native init. After that I've installed and configured some dev dependencies (babel, eslint, prettier, typescript) and started the bundler with react-native start, but then bundler got stuck in Loading dependency graph... and kept ramping up RAM consumption until my computer eventually froze.

I thought that it was maybe some bad configuration that I made, so I stashed my changes and returned to the default structure that comes with react-native init, and it still bugged out, but this time, there was a difference: The bundler showed Loading dependency graph... Done but still kept ramping up RAM consumption

I tried starting another fresh new project and start the bundler there, but the issue persisted on every new project started with react-native init. The thing is: there is another difference here too! If I stop the bundler before my computer freezes and start it again, the issue stops

I tried running watchman watch-del-all and starting the bundler with react-native start --reset-cache but it was all for naught, the issue persists.

Also keep in mind that not even once I got to actually run my project on a device or emulator, my computer freezes before it even gets to build.

Environment

React Native version:

System:
OS: Linux 4.15 Linux Mint 19.1 (Tessa)
CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Memory: 1.97 GB / 7.71 GB
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node
Yarn: 1.16.0 - ~/.nvm/versions/node/v12.6.0/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v12.6.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.3 => 0.60.3
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native: 0.60.3

Steps To Reproduce

1. react-native init myproject
2. cd myproject
3. react-native start

Describe what you expected to happen:

Well, maybe actually get to work on a RN project in peace.

Snack, code example, or link to a repository:

The project I'm working on is private and the issue can be reproduced with only react-native-cli it seems, but if needed I can open a dummy repo with all the configuration files and dependencies I'm using.

[josecarlosns]

UPDATE

As I said above, using react-native start inside a fresh new project created by react-native-cli triggers the absurd consumption of RAM by the bundler, but if you stop the bundler and start it again, the issue stops.

After that, I tried running watchman watch-del-all && react-native start --reset-cache and it triggered the RAM consumption issue again.

[josecarlosns]

UPDATE 2 WITH WORKAROUND

Returning to [email protected] solved the issue for me.

Sadly I had to remake the project using react-native init myproj --version 0.59.8 (with an earlier version of react-native-cli, for the current version forbids creating new apps with versions pre-0.60) because while simply downgrading the react-native dependency solved the RAM consumption issue, it created many more issues when I tried to run on a device/emulator because the build configurations from the android/ios modules where made to work with RN 0.60+. Since I've only started learning and working with RN a few weeks ago, those files are still too complex for me to manually fix, so it was easier just to rely on react-native init to create those for me.

[plouh]

Have you tried RN 0.60.3 with node 12.4? It seems that something in metro bundler triggers a memory leak in node 12.6.

See https://github.com/react-native-community/cli/issues/485#issuecomment-509210382

[josecarlosns]

Wow, you are right! Using node v12.4 solved the issue, even with RN 0.60.3! I should have thought about using previous node versions, but whatever.

So we have 2 workarounds as of now: either downgrade RN or use node 12.4.

Anyways, thank you!

[Agungkes]

Thanks, @plouh you saved my day!
I try to downgrade my node and to 12.4 for now.