React useEffect Nedir? React useEffect Kullanımı

Merhaba arkadaşlar, React yazı serimize oldukça önemli bir konu ile devam ediyoruz. Bu yazımızda React useEffect Nedir? React useEffect Kullanımı’na bakacağız. İlk başta karmaşık gibi görünse de React yazmaya devam ettikçe ve projeler geliştirdikçe useEffect kullanımının mantığını ve gerekliliğini daha iyi anlayacaksınız. 

React useEffect, bir componentin yaşam döngüsü içerisinde yan etkileri yönetmek için kullanılan önemli bir fonksiyonudur. Yan etkiler, componentin render edilmesi veya güncellenmesiyle ilişkili olmayan işlemleri ifade eder. Örnek olarak, API istekleri, abonelikler, veritabanı işlemleri veya olay dinleyicileri gibi işlemler bu yan etkiler arasında yer alır.

useEffect’in kullanımını ve işleyişini örneklerle daha iyi anlayacağız. Fakat öncesinde mantığını daha iyi anlamak için React Yaşam Döngüsüne bakalım.

React Yaşam Döngüsü (Lifecycle) Nedir?

React componentlerinin yaşam döngüsü, componentin oluşturulma, güncellenme ve kaldırılma aşamalarını kapsar.

Componentlerin bu aşamalarında belirli işlemler gerçekleştirilmek istenebilir. Bu tür işlemleri yapabilmek için function componentlerde useEffect kullanılmaktadır. Class componentlerinde componentDidMount(), componentDidUpdate(), componentWillUnmount() fonksiyonları kullanılmaktadır.

useEffect, componentin bu yaşam döngüsü aşamalarına bağlı olarak belirli kodların çalışmasını sağlar.

Yaşam Döngüsü Neden (Lifecycle) Kullanılır?

React componentleri, bu yaşam döngüsü aşamaları boyunca belirli işlemleri gerçekleştirmek için kullanılır. Bu işlemler, componentin ihtiyaçlarına ve kullanım senaryolarına bağlı olarak farklılık gösterebilir.

Örneğin ülke geneli okulları bulunan bir kurumun uygulamasını düşünelim. Bu kurumda hem çalışan binlerce personel bulunur hem de on binlerce öğrenci olur. Siz yöneticiler için bir yönetim componenti yazdınız ve yönetici bu componentte tüm öğrencileri ve personeli görebiliyor.

Böyle büyük bir datanın sayfaya işlenmesi oldukça performans gerektirir ve hem zaman alabilir hem de bazen internet hızınızdan kaynaklı problem oluşturabilir.

Çünkü yönetici sitede herhangi bir hareket yaptığında component yeniden render edilecek ve bütün data yeniden yeniden çağrılacaktır.

Bu gibi hataların önüne geçmek ve sistemin performans olarak aşırı yorulmasını önlemek için yaşam döngüsü içinde bu işlemleri yapmak kaçınılmazdır. Çünkü yaşam döngüsü içine aldığınız işlemleri belli durumları bağlı hale getirebilirsiniz. Böylece bu tür CPU gerektiren yoğun işlemleri sadece gerekli anlarda tetiklemiş olursunuz.

Şimdi React componentlerinin yaşam döngüsü aşamalarına bakalım:

 1. Oluşturma (Mounting):  Bileşenin oluşturulduğu aşamadır. Bileşenin DOM hiyerarşisine eklendiği ve başlangıç durumu (initial state) ayarlandığı aşamadır. componentDidMount() yöntemi bu aşamada kullanılabilir.

Örnek: Bir form bileşeni oluşturulduğunda, başlangıçta bazı alanları varsayılan değerlerle doldurabilir veya bazı başlangıç işlemlerini gerçekleştirebilirsiniz.

 2. Güncelleme (Updating):  Bileşenin durumunun veya özelliklerinin güncellendiği aşamadır. Bu aşama, bileşenin state veya props değerlerinin değiştiği zaman tetiklenir. componentDidUpdate() yöntemi bu aşamada kullanılabilir.

Örnek: Bir liste bileşeni, listedeki öğelerin güncellendiği veya yeni öğelerin eklenip çıkarıldığı zaman güncelleme aşamasına geçebilir ve listedeki görünümü güncelleyebilir.

 3. Kaldırma (Unmounting):  Bileşenin DOM hiyerarşisinden kaldırıldığı aşamadır. componentWillUnmount() yöntemi bu aşamada kullanılabilir.

Örnek: Bir modül bileşeni, kapatıldığında veya sayfa geçişinde kaldırma aşamasına geçebilir ve bellekte tutulan verileri temizleyebilir.

 NOT:   React hooks ile birlikte ise useEffect() kullanarak yaşam döngüsüne bağlı işlemleri gerçekleştirebiliriz. Class componentte 3 ayrı fonksiyonun yürüttüğü yaşam döngüsü yöntemleri, function komponentte sadece useEffect içinde gerçekleştirirlir. 

Örneğin, useEffect() ile bileşen oluşturulduğunda veya güncellendiğinde bir API‘den veri almak, olay dinleyicilerini eklemek veya bir component kaldırıldığında temizleme işlemleri yapmak gibi işlemler gerçekleştirebiliriz.

React useEffect Nedir? React useEffect Kullanımı

Yukarıda Yaşam Döngüsü sisteminin React function componentlerde useEffect ile yapıldığını söylemiştik.

ufeEffect Syntax

UseEffect başlangıçta çalışır ve içerisindeki fonksiyonlar çalışmış olur. Eğer değişen bazı state’lerde yeniden çalışmasını istediğiniz fonksiyonlar varsa, bu state’leri köşeli parentezler içinde araya virgül koyarak [state1, state2, state3 …] yazabilirsiniz. Bu durumda useEffect bunları takip edecek ve bu state’lerin değeri değiştikçe, useEffect yeniden çalışacaktır. State konusunda bilgilerinizi yenilemek için buraya tıklayabilirsiniz.

 NOT:   Eğer sayfanızda sadece ilk yükleme anında çalışmasını istediğiniz, daha sonra site içi işlemler olurken bir daha çalışmasına gerek görmediğiniz bir fonksiyonunuz varsa, köşeli parantezler içini boş bırakırsınız. Böylece useEffect sadece component yüklenirken çalışır. Ve bir daha çalışmaz.

Şimdi React useEffect Nedir sorusuna örneklerle cevap vermeye devam edelim.

 Örnek 1:  Aşağıdaki örnekte, useState ve useEffect hook’larını kullanarak bir timer (zamanlayıcı) oluşturacağız. Timer’ı başlatan ve durduran butonlar da bulunacak. Timer başlatıldığında, sayfada bir sayaç gösterilecek ve useEffect içindeki cleanup işlevi, timer durdurulduğunda çağrılacak ve timer’ı temizleyecektir.

Bu örnekte, useState hook’u ile timer ve isRunning adında iki state değişkeni tanımlanır. timer, timer’ın süresini ve isRunning, timer’ın çalışıp çalışmadığını tutar.

useEffect hook‘u içerisinde, isRunning state’i değiştiğinde tetiklenen bir yan etki fonksiyonu tanımlanır. Bu fonksiyon, isRunning true olduğunda setInterval() ile her saniyede bir timer’ı bir artırır. clearInterval() ile temizleme işlemi yapılır.

useEffect’in cleanup kısmı ise return ile tanımlanır. Timer durdurulduğunda, clearInterval() ile setInterval’i temizler ve timer’ı sıfırlar.

startTimer() fonksiyonu ile timer başlatılır ve setIsRunning(true) ile isRunning öz durumu true olarak ayarlanır. stopTimer() fonksiyonu ise timer’ı durdurur, setIsRunning(false) ile isRunning öz durumu false olarak ayarlanır ve timer sıfırlanır.

Bu şekilde useEffect içindeki cleanup işlevi, timer durdurulduğunda çağrılacak ve timer’ı temizleyecektir.

 Çıktı:  Cleanup işlemi (return) kısmını yazarak bu işlemi yapınca

 Çıktı:  Cleanup işlemi (return) kısmını yazmadan bu işlemi yapınca

Temizleme işlemi olan cleanup kısmını koddan çıkardığımızda sistem bozuluyor ve stop desek bile zamanlayıcı yeniden başlıyor. İşlem kapanamıyor.

 Örnek 2:  Bu örneğe dikkat edelim. Şimdi öncelikle bir data alma API’sine bağlanarak kişi bilgisi alacağız. Bu fetch işlemlerini useEffect dışında tanımlayacağız ama fonksiyonumuz useEffect içerisinde çalışacak. Bu durumda herhangi bir hata almadan işlemlerimizi yapacağız.

Öncelikle koda bir göz atalım.

ApiExample.js

Örneğimizde API’den gelen bir data var. Ve data getirme fonksiyonu useEffect içerisinde çağrılmış. Sayfamız ilk kez yüklendiğinde useEffect içerisine girilecek ve fetchData fonksiyonu çalışmış olacak. Datamız gelecek. Data sayfaya yüklenecek. 

Daha sonra numaralı butonlar aracılığı ile istediğimiz sıradaki personel bilgisini çağırmak için bir sayıya tıklıyoruz. Bu sayı personNo state’ini güncelliyor. useEffect, personNo state’ini takip ettiği ([personNo] şeklinde yazarak bu state’i takip etmesini, ve her güncellemede bir daha çalışmasını söylemiş olduk) için yeniden çalışıyor. Ve biz her yeni bir kişi çağırdığımızda useEffect çalışarak fetchData fonksiyonu ile bize yeni bir kişi ismi getiriyor. Şimdi bunu çıktı üzerinde görelim.

 Çıktı:

Şimdi fetchData fonksiyonunu useEffect dışında çağırdığımızda neler olduğuna bir bakalım. Ve useEffect’in neden önemli olduğunu anlayalım.

Gördüğünüz gibi sistem sonsuz döngüye girdi. Sayfa yüklenince fetchData fonksiyonu çalıştı. Data gelince data state’i güncellendi. Güncelleme olunca React componenti yeniden render etti. Sayfa yeniden render olunca yine data çağrıldı ve yine data state’i güncellendi. Bu şekilde sonsuz bir döngü oluşmuş oldu. 

İşte useEffect kullanarak bu problemi çözmüştük. Data sadece yeni kişi çağırdığında ve yalnızca bir kere çalışıyordu. Her çağrımda bir kez çalıştı ve durdu useEffect ile data çağrımı yaptığımızda.

 ⇒  Peki useEffect’te köşeli parantezleri boş bırakırsak nasıl bir sonuç olur. Ona bakalım. 

Gördüğünüz gibi burada useEffect’in takip ettiği hiçbir state olmadığı için state değişse ve component yeniden render edilse bile useEffect yeniden çalışmadı. Bu nedenle datayı getiren fetchData fonsiyonumuz sadece ilk yüklemede çalıştı. Datayı getirdi. Ve bir daha çalışmadı.

 Örnek 3:  Bu örnekte, bir Counter (Sayaç) bileşeni oluşturacağız. Bileşenin başlangıç değeri 0 olacak. useEffect hook’u kullanılarak count state’i güncellendiğinde çalışacak bir yan etki fonksiyonu tanımlayacağız. Yan etki fonksiyonu, “useEffect çalıştı” mesajını console’a yazdıracak. useEffect’in bağımlılık listesi olarak [count] state’ini belirteceğiz, yani useEffect sadece count state’i güncellendiğinde tetiklenecektir.

Componentte increment fonksiyonu tanımlayacağız ve bu fonksiyon setCount kullanılarak count state’ini bir artıracak.

Aşağıda çıktımızı incelersek her tetiklemede “useEffect çalıştı” mesajının tekrarlandığını göreceğiz. Çünkü useEffect, count state’i güncellendiğinde her seferinde çalışır. 

 Çıktı:

Umarım “React useEffect Nedir? React useEffect kullanımı” başlıklı yazım sizin için faydalı olmuştur. useEffect kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.

Şu yazılar da ilginizi çekebilir.

React Listeler ve  map Kullanımı

Happy coding!

Kaynaklar

react.dev

w3schools.com