0

In the App component of my React app, I fetch some data from a rest API. When the app loads I fetch those data in the componentDidMount function and store them in the state. Then in componentDidUpdate function, I fetch those data and update the state when the fetched data differ from the state data.

As a result, my app makes Http requests continuously but update the state only when it is necessary. But when my app remains open in the browser, memory resources used by it also increases continuously and eventually, my app crashes when it runs out of memory.

I think a large number of Http requests is causing this memory leak. But I don't know what is actually being stored that is using that amount of memory space. Since I am replacing old data with fetched data, it should not use that amount of memory, right?

I want to know what data is using that memory and how to prevent this kind of memory leak while keeping data updated in real-time. If my way of updating data in real-time is not appropriate, I want to know the ideal way to do this in a React app.

I am using Axios for making Http requests.

user8544110
  • 11
  • 6

2 Answers2

0

If you want to continuously fetch data to simulate a sort of soft real time mechanism you could use setInterval inside componentDidMount method, it is much easier to implement and clear to read I think.

Remember to call clearInterval inside the componentWillUnmount lifecycle hook. I use this approach in an application that has no interaction with users and so I need to fetch data each n minutes, because api does not expose websocket endpoint.

stearm
  • 133
  • 11
0

I think the best solution would be using sockets.

Frustrated Programmer
  • 341
  • 1
  • 11