I’m currently getting into React and so far I am excited about it. It’s really cool. But I got one issue that I witnessed and hope to fix: the performance. I am currently working on a part of my app where users can add a new station to a resume. And over the time the browser tab gets slow and tears down the speed of my browser (primary Firefox, Safari shows a warning about high RAM usage). I can imagine that it relates to the fetches I do to get a list of countries and dependent divisions as well as searching for a company. by entering a name. What I witness is that the tab is not getting slow immediately, but over a time of 5 or 10 minutes. Did anybody witness such behavior and knows how to fix it?
Hey @nucky , welcome back!
When it comes to performance it really depends on how you’re making your fetch calls. How big is the data returned and etc. This only if the performance issues are the HTTP calls.
There could be something else somewhere in your code base that’s causing this issue and slowing things down.
I think the best step for now is to share your codebase here so people can take a look and aid you better.
Above these, there are some common best practices and also techniques like bundling to boost your performance, if for example, you’re using too many third-part library.
So let’s see the code and see if we can detect this!
Something is repeatedly running: you are doing something over and over again, and it isn’t just running in isolation, you’re likely adding to something: some data structure is getting bigger and bigger and bigger steadily. It sounds like a memory leak. Instead of being cleaned up, some object/s is/are just expanding in size and eating memory up (or there is something that’s running recursively and never stopping, but I’d expect that to either trigger an immediate error in React or at least cause everything to lock up very quickly). The thing that is happening is using more and more memory each time it runs: this would be why you would get a steady slowing down. But without knowing what you’re doing it’s not really possible to give you an answer: there is probably an error in your code, but would need to see the code and see it running to have any chance of helping. It could be the fetches; what you describe would indicate increasingly larger amounts of data being pulled in/sent out. But it could easily be something else.
What I would do first is use the performance and memory usage tabs on your developer tools. React Devtools also has a performance tab, use that as well. This may help you locate where the issue is being triggered from
You were right. I found out that I used Component Mounted for something that can’t do anything if I don’t provide a specific variable. That was the issue. Now it works like it should. Thanks, Dan, thanks Shervinee.
