Why would a React app have high memory usage on Heroku?

Question

At my work we have created a small React app using CRA and typescript, i.e. create-react-app some-app --typescript. The app total size is 305MB, and after running npm run build, the resulting app is about 6MB. We're deploying it to Heroku using Bitbucket pipelines.

When we deploy it to Heroku, it somehow uses over 500MB of memory on Heroku constantly. We find this odd, because a different react app we made with CRA and javascript only uses 100MB, despite being much larger; the build folder is 60MB and the app folder is larger than 1GB.

We know it is something inside the app, because when we deployed a basic version of the app, the memory usage fell to 250MB, which is still bizarrely high, but a significant improvement over the current situation.

The only thing we can think of is clearing the cache, which did not help.

Has anyone else encountered this issue, and if yes, how did they solve it?

PS. Unfortunately I can't post the code for the app because it belongs to the company.I can post segments if people have an idea where the issue might be.

Answer 1

When you run the development server on heroku, you run out of memory because of typescript, since now 2 node processes are running:

• one for your start.js script
• one for typescript's typechecker

each of which takes about 300-400mb of memory

Answer 2

Fixed by using the buildpack mars/create-react-app

Note: make sure to add it as mars/create-react-app in the Heroku settings

Answer 3

When you test are you testing against the dev mode or prod mode? Are you using unneeded packages. is the data-source the same, are you calling the same API's etc.. look for the differences in your app.