Selamlar!
Bugün React’ta kullanılan Hooks’lardan biri olan useEffect kullanımına değineceğiz.
Kısa tanım olarak Javascript’te kullandığımız DOMContentLoaded event’ine verdiğimiz callback Function’ı sayfa tamamen yüklenildiğinde devreye giriyordu. Bu mantıkla düşünürseniz aynı işlemi yapıyor ancak sayfa yüklendiğinde değil, component render edildiğinde veya state tetiklendiğinde devreye giriyor.
React dökümanından da useEffect kullanımına bakabilirsiniz, bir önceki yazımızda useState konusuna da buradan ulaşabilirsiniz.
useEffect React’ta yan etkileri (side effects) yönetmek için kullanılan bir hook’tur. Yan etkiler, bir component render edildiğinde component dışındaki kaynaklarla etkileşim kuran işlemlerdir. Örneğin, veri çekmek, event listener’ları ayarlamak veya manuel DOM manipülasyonları yapmak gibi işlemler yan etkiler olarak kabul edilir.
Side Effects (Yan Etkiler) Nedir? başlıklı yazımı okuyarak side effects konusunda bilgi edinebilirsiniz.
Aşağıdaki örnekte bir useEffect kod bloğunu görüyorsunuz.
useEffect(() => {
console.log('setup code')
return () => {
console.log('cleanup code');
}
}, [dependencies])- “setup code” : Bu, setup kodudur. Bileşen her render edildiğinde veya belirli bir durumda çalıştırılmasını istediğiniz kod buraya yazılır. Bu kod, useEffect içerisine yazıldığında, bileşen render edildikten sonra çalıştırılır.
- “cleanup code” : Bu, cleanup kodudur. Eğer useEffect içinde bir geri dönüş (return) fonksiyonu yazarsanız, React, bileşen (component) güncellendiğinde veya bileşen (component) DOM’dan kaldırıldığında (unmount) bu geri dönüş fonksiyonunu çalıştırır. Bu kısım, bir önceki yan etkinin etkilerini temizlemek için kullanılır. Cleanup kodu genellikle event listener’ları kaldırmak, zamanlayıcıları temizlemek veya başka kaynakları serbest bırakmak için kullanılır. Opsiyoneldir.
- [dependencies] : dependencies array’i, useEffect’in hangi değişkenlere bağlı olarak çalışacağını belirler. Eğer bir bağımlılık listesi vermezseniz, useEffect her render işleminden sonra çalışır. Ancak bu listeyi belirtirseniz, sadece o listedeki değerler değiştiğinde useEffect çalışır. [] şeklinde boş array tanımlayarak da component her render edildiğinde bu useEffect fonksiyonunu çalıştırmaktan kurtulabilirsiniz. Aksi durumda gereksiz yere sisteme yük bindirmiş olacağız.
Aşağıdaki kodlardan en basit şekilde nasıl kullanabileceğimiz hakkında bazı kod örnekleri sunulmuştur.
import { useEffect } from "react";
useEffect(() => {
console.log("Component her render edildiğinde çalışır.");
});
useEffect(() => {
console.log("Component ilk render edildiğinde çalışır.");
}, []);
useEffect(() => {
console.log("Component ilk render edildiğinde ve firstName state'inde bir değişiklik olduğunda çalışır.");
}, [firstName]);
useEffect(() => {
console.log("Component ilk render edildiğinde, firstName ve lastName statelerinde de bir değişiklik olduğunda çalışır.");
}, [firstName, lastName]);useEffect kullanımına gerçek hayattan bir örnek verecek olursak; bir ürünler sayfamız olduğunu düşünelim ve 100 adet ürün yüklenecek. useEffect kullanıyoruz ama 2.parametreyi vermiyoruz! bu durumda aynı komponent içinde bir state tetiklendiğinde 100 ürün tekrar veri tabanından çekilecek. Bunun olmasını istemediğimiz için 2.parametreyi boşta olsa bir [] ifadesi bırakıyoruz.
Umarım faydalı olmuştur. Anlamadığınız veya eksik olduğunu düşündüğünüz alanlar var ise lütfen yorum olarak paylaşınız.
Faydalandığım Kaynaklar
Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.
