React Projelerinde Memory Leaks

React projelerini geliştirirken, Class Based komponentlerden aşina olduğumuz fakat Hook’lar ile gözden kaçırdığımız bir konu olan komponentlerin yaşam döngüsünün olduğunu (component life cycle) hatırlatarak konuya başlamak istiyorum. Özellikle sıkça kullanılan ve birden fazla yaşam döngüsünü içinde barındıran useEffect ile Memory Leaks konusu şimdilerde önemini artırdı.

Öncelikle, “Memory Leaks nedir?” kısaca bakalım. Çok genel anlamda bilgisayarınızda çalışan bir program için ayrılan bellek, işletim sistemine veya bellek havuzuna geri döndürülemediği durumlara bellek sızıntısı diyoruz. Bu durumda bellek herhangi bir uygulama tarafından kullanılamaz, gereksiz tüketilmiş olur. Böylece, düşük performans, sistemin cevap verme süresinin gecikmesi ve yine sistemin çökmesi gibi bir dizi problem ile karşılaşırız.

Aklınıza şu gelebilir, iyide garbage collector var.

Garbage collector’lar mükemmel olsaydı, bellek sızıntıları sorun olmazdı. Belli algoritmalar çerçevesinde çalışmalarından dolayı, tüm durumları tespit edecek kadar gelişmiş değiller, bu nedenle, insan müdahalesi kaçınılmaz hale geliyor ve geliştiricilerin bunu göz önünde bulundurmaları gerekiyor.

Konu çok geniş olduğu için burada bir nokta koyalım ve asıl konumuz olan React projelerimize dönelim.

Bilindiği üzere React projeleri Single Page olarak çalışır ve tüm uygulama tek bir Javascript kod bloğu içerisinde çalıştırılır. Sayfalama işi ise React-Router paketiyle çözümlenir. Durum böyle olunca Memory Leaks React uygulamaları geliştirirken yaygın olarak karşılaşılan bir sorun olarak karşımıza çıkar. Bir URL çağırıldığında, o url için çalıştırılan bir API Call başka bir URL’e geçildiğinde kod içinden “Unmount” edilmezse bellek sızıntısı oluşur. Bunun dışında bir nesne bellekte depolandığında ve çalışan kod tarafından erişilemediğinde de bellek sızıntısı oluşabilir.

Bellek sızıntıları ne gibi sorunlara yol açabilir ?

· Sistemde kullanılabilir bellek miktarını azaltarak projenin performansını etkileyebilir;

· Uygulamada performans sorunları oluşabilir.

· Sayfa rastgele hard Refresh yaparak yeniden Render olabilir.

· Daha ileri seviyelerde sistemin kilitlenmesi ve çökmesi ile sonuçlanabilir.

· Sunucuya büyük miktarda Request atarak içeren sunucuya ve veritabanına aşırı yüklenilebilir.

Problemi yeterince analiz ettiğimize göre, artık çözüm yollarına göz atalım. Bu aşamada iki farklı çözüm yolundan bahsedeceğim.

Boolean Flag kullanımı

useEffect Hook bir Component ekrandan kaldırıldıktan sonra arka planda çalışmaya devam etmektedir. Basit bir boolean değere sahip isMounted değişkeni ve bir if bloğu ile api call yapılıp yapılmayacağını takip ediyoruz, useEffect görevini tamamladıktan sonra bağlantısını kestiğimizden artık api call çalışmayacaktır.

AbortController Kullanımı

Javascriptte built in olarak bulunan AbortController nesnesi, API isteklerimizi istediğimiz zaman iptal edebiliriz. Böylece yeni sayfa render edildiğinde, bir önceki sayfadaki api istekleri iptal edilir. Memory Leak temizlenir.

React uygulamaları artık çok popüler ve birçok geliştirici tarafından kullanılıyor ya da kullanılmak isteniyor. Uygulamalarımızda kullanırken, tüm yönlerini düşünerek geliştirmelerimizi ilerletmek, uygulamalarımızın daha güvenli olmasını sağlar.