JavaScript Memory Leaks and How To Fix Them

Memory Management in JavaScript is often not a topic, but to avoid Memory Leaks in your web apps it's crucial to have a good understanding of how the Garbage Collector works, what can cause a Memory Leak, and how to analyze Memory Leaks with Chrome DevTools. In this video, I'm going to explain all of that.
======⚡⚡⚡======
Get a 20% discount on Brilliant.org (to learn Science, Technology, Engineering, and Math): brilliant.sjv.io/kjVO2z
======⚡⚡⚡======
🙌 Become my Patreon and get exclusive perks: / softdevdiaries
💼 Follow me on LinkedIn and drop me a message if you'd like: / gusgadirov
💻 Also, let's connect on GitHub: github.com/gusgad
📚 Resources:
Memory Management in JavaScript: developer.mozilla.org/en-US/d...
🕒 Timestamps:
(00:00) Memory Leaks explained
(03:57) Causes of a Memory Leak
(08:05) Identifying Memory Leaks
And don't forget to subscribe for more videos like this 😊

[@SoftwareDeveloperDiaries]

And how do YOU guys detect and overcome memory leaks in your projects? Feel free to share your approaches below 😎

[@fatimaiqra2169]

This video is really helpful, you explained very deeply, thanks a lot!

[@AdarshNamboothiri]

This video is surely going to be a life saver for me, Thank you

[@aokaziz6815]

Useful content with crystal clear explanation

[@paschalynukwuani6930]

You are so good with your explanation. Thank you.

[@SoftwareDeveloperDiaries]

Happy to hear mate! Let me know if there's any topic you'd like me to make a video about :)

[@darrenpierre9903]

wow this is a great video . I'm curious where did you learn how to use the developer tools for memory and performance ? I haven't used those tabs in my work but would love to do so in the future

[@user-vw3cx9gy9e]

Excellent and clear explanation, thanks:)

[@SoftwareDeveloperDiaries]

Thank you too, happy to hear! :)

[@Hala-os6ij]

a GREAT explanation. thank you so much

[@SoftwareDeveloperDiaries]

Glad it was helpful!

[@user-mr3ko8rz7j]

Great information and excellent presentation.

[@SoftwareDeveloperDiaries]

Glad it was helpful!

[@criticalthinker88gis13]

Thanks, seems promising, ill try to use what i learned to identify and fix a mem leak at my now with it

[@luck-xc7dy]

Hello, with the setTimeout memory leak. Does no variable ever get garbage collected inside of setTimeout, or is it just references to dom elements that dont get cleaned up. If you had node set = to 10 would it still have been a memory leak?

[@germanmartinezsolis9543]

such a great video, I'm looking forward to see more content like this, you got a new sub.

[@SoftwareDeveloperDiaries]

Happy to have you here, German :)

[@user-qu8gi5id8p]

Wow Thanks a lot. It's what I want to know

[@brinthkr1533]

Awesome explanation 🎉

[@SoftwareDeveloperDiaries]

Thank you!

[@salmanrana803]

Hey bro! Awesome content. In your third approach you are deleting the property "delete nodes.btn". But "useStrict" doesn't allow us to use "delete". What can be other way to do that?

[@SoftwareDeveloperDiaries]

Hey hey, thanks for a great remark! Here's an article that I found, apparently it happens because the property is non-configurable. Maybe you can find something useful here :) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete

[@user-nt7tm4iw3t]

Great explanation❤❤ Btw what is the tool u r using to draw and write ur explanation?

[@SoftwareDeveloperDiaries]

Thank you my friend! It’s Excalidraw :)

[@Petersonbabs]

great video. What tool are you using for this explanation

[@SoftwareDeveloperDiaries]

Excalidraw 😉

[@paperC_CSGO]

Please do more browser dev tools stuff, especially performance in a big live site with loads of requests going on

[@SoftwareDeveloperDiaries]

I'm thinking about making a separate course on JS performance, so stay tuned!

[@paperC_CSGO]

@@SoftwareDeveloperDiaries great news, thank you!

[@MrFikret90]

This pretty interesting, but when it comes to determine memory leaks in app like Angular, it very difficult to find it. Because it's huge amount of functions in it, and names like "lj, H9, Xv"... not sure what all those functions comes from. Do you know how debug memory leaks in TypeScript apps? I believe it's after transpiler comes those names.

[@SoftwareDeveloperDiaries]

Yes, you're right, it's quite challenging to find memory leaks when using JS frameworks. My suggestion would be to monitor the memory while you interact with the app, to at least be able to pin down the problem. Also, in the "Performance" tab, you can stumble upon you own methods, among framework-native methods, if you look close enough.

[@itsall1sand0s]

Amazing video❤ The fact that it has so less views and engagement makes me kinda sad

[@SoftwareDeveloperDiaries]

Thanks for the kind words! 😊

[@duongnguyen8853]

Hi, I am from VietNam, thank you for your video but I have a problem with my node server, I don't know how to debug the memory leaks in that Please help me, thank you so much

[@ulashofficial]

Thank you very much Software Developer Diaries! Fuuuuuuuuuuuuu

[@ru2979]

wait what his name is foooo 👀😳🌬️🌬️🌬️?

[@gaurishrane9818]

Very use full video ..

[@SoftwareDeveloperDiaries]

Thank you :)