React Side Effects
React Side Effects

React’ta yan etkiler (side effects), bir bileşenin (component) ana işlevi olan UI’yi render etmek dışında gerçekleşen ve dış dünya ile etkileşimde bulunan işlemleri ifade eder. Bir bileşen (component) sadece girdileri alıp kullanıcı arayüzünü render eden basit bir işlev olabilir, ancak bir bileşen (component) ayrıca dış kaynaklarla (veritabanı, tarayıcı API’leri, sunucu ile veri iletişimi, vs.) etkileşime girdiğinde yan etkiler ortaya çıkar.

React Yan Etkilerin (Side Effects) Örnekleri

Yan etkiler, bileşenin dışındaki sistemlerle (örn. tarayıcı, sunucu, kullanıcı) etkileşim kurarken oluşur. İşte birkaç yaygın örnek:

1. Veri Çekme (API Çağrıları): Bir bileşen (component) render edildiğinde, sunucudan veri çekmek veya API’den veri almak bir yan etkidir.

useEffect(() => {
  fetch('https://api.heskan.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

2. DOM Manipülasyonları: React normalde DOM manipülasyonlarını kendi içinde halleder, ancak bazen doğrudan DOM ile çalışmanız gerekebilir. Bu durumlarda da kullanılabilir. Örneğin, bir dış kütüphaneyle (örn. jQuery) manuel olarak DOM üzerinde işlem yapmak.

useEffect(() => {
  document.title = `Sayfa Başlığı`;
}, []);

3. Event Listener Ekleme/Kaldırma: Tarayıcıda bir event listener eklemek, yan etkidir çünkü bileşenin (component) dışında bir etkileşimdir.

useEffect(() => {
  const handleScroll = () => {
    console.log('Scrolling...');
  };
  window.addEventListener('scroll', handleScroll);
  
  return () => {
    window.removeEventListener('scroll', handleScroll); // Cleanup
  };
}, []);

4.Zamanlayıcılar (setTimeout, setInterval): Zamanlayıcıları kurmak ve temizlemek yan etkilerdir.

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Every second...');
  }, 1000);
  
  return () => clearInterval(intervalId); // Cleanup
}, []);

5. Tarayıcı Depolama Kullanma (localStorage, sessionStorage): Tarayıcı depolama sistemlerine veri yazmak veya okumak bir yan etkidir.

useEffect(() => {
  localStorage.setItem('theme', 'dark');
}, []);

useEffect Neden Gereklidir?

Yan etkilerin temel özelliği, bileşenin render süreci dışında bir etkileşim olmasıdır. Yan etkiler, bileşeninizin sadece kendi verileriyle değil, dış dünya ile etkileşime girmesini sağlar. Ancak bu işlemler çoğu zaman zaman alabilir veya asenkron olabilir ve UI’de beklenmedik sonuçlar doğurabilir. İşte bu yüzden yan etkileri dikkatli bir şekilde kontrol etmek gerekir. useEffect bu işlemleri güvenli bir şekilde yapmak için kullanılır.

React bileşenleri her render edildiğinde yan etkilerin tekrar uygulanmasını istemeyebiliriz ya da sadece belirli bir durumda bu işlemlerin yapılmasını isteyebiliriz. Yan etkileri doğru zamanda ve doğru şekilde yönetmek için useEffect kullanılır:

  • Ne zaman çalışacağını kontrol edebiliriz (bağımlılık dizisi [dependencies] ile).
  • Ne zaman temizleneceğini belirleyebiliriz (cleanup kodu ile).

Sonuç olarak, Side Effects (yan etkiler), bileşenin kendi içinde kontrol ettiği işlemlerden öte dış dünya ile olan etkileşimlerdir. useEffect bu etkileşimleri yönetmek için kullanılır.

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.