DEV Community

Cover image for Memory Leaks, How to avoid them in a React App.

Memory Leaks, How to avoid them in a React App.

Lena Jeremiah on January 08, 2022

What is a memory leak? According to Wikipedia, a memory leak is a type of resource leak that occurs when a computer program incorrectly ...
Collapse
 
shivams136 profile image
Shivam Sharma

I have created a wrapper named as advanced-promise for promises including fetch which provides aborting and some other features as well. You can try it and we can improve it together.

Collapse
 
jeremiahjacinth13 profile image
Lena Jeremiah

I just checked the package on GitHub, it makes total sense. I'd try to use it in one of my projects soon.

I'd sure love to work on it with you.

Collapse
 
shivams136 profile image
Shivam Sharma

Thanks a lot, It's my first ever npm package so it may not be that well written... I'm sure with your experience it can be improved 😊

Thread Thread
 
jeremiahjacinth13 profile image
Lena Jeremiah

Nice, I've never written one yet. I'd like to collaborate with you on this. You can email me at jeremiahlena12@gmail.com

Thread Thread
 
jeremiahjacinth13 profile image
Lena Jeremiah
Thread Thread
 
rprtg profile image
rprtg

رپورتاژ آگهی (رپورتاژ خبری) در واقع اطلاعیه‌ای است یک رپورتاژ که از سوی واحد روابط عمومی با هدف اطلاع‌رسانی اتفاقات کسب و کار به مردم در رسانه‌های مختلف و انتشارات مرتبط و هدفمند منتشر می‌‌شود

Collapse
 
midoukh profile image
Ahmed Khelili

This is exactly what I needed, thanks a lot 🙏

Collapse
 
jeremiahjacinth13 profile image
Lena Jeremiah

I'm happy you found it helpful😊😊

Collapse
 
stephcrown profile image
Steph Crown

Nice article.

Collapse
 
jeremiahjacinth13 profile image
Lena Jeremiah

Thanks for reading bro

Collapse
 
dro1 profile image
Seun Taiwo

Very explanatory article. Thanks

Collapse
 
jeremiahjacinth13 profile image
Lena Jeremiah

Thanks for reading bro

Collapse
 
framitdavid profile image
David Øvrelid • Edited

First of all thanks for sharing. 👏

But I do not understand how your example is providing memory leak while setting the company after the component itself is unmounted.

Where in the memory will the variable company be stored when the component is unmounted? Would the company variable have any references at all? If not I believe the garbage collector is going to collect it?

Can you please explain why and how your example is providing the leak? 🤔

I would understand the memory leak if you had a setInterval or was subscribing to streams like WebSockets. But within your case where you have promise which resolve once, I believe the GC collects it.

Thanks in advance! :)

Collapse
 
dinniej profile image
Nguyen Ngoc Dat

Nice, i hardly consider the network issues when working on a product, and i bet most of us didn’t either. Great article

Collapse
 
jeremiahjacinth13 profile image
Lena Jeremiah

Yeah... I also didn't put much consideration to it until I found out about AbortControllers and decided to share. I'm glad you enjoyed reading it

Collapse
 
daehyeonmun2021 profile image
Daehyeon Mun

Very interesting article. Thanks for sharing your knowledge :D

Collapse
 
jeremiahjacinth13 profile image
Lena Jeremiah

Thank you for reading @daehyeonmun2021

Collapse
 
tasin5541 profile image
Miftaul Mannan

Is this still relevant according to the warning removal from react v18 and the discussion in the thread?

github.com/facebook/react/pull/22114

Collapse
 
ammarsiddiqi profile image
AmmarSiddiqi

Thanks Lena for sharing this article. Really Helpful. 😊