React.js useEffect Hook Kullanımı

useEffect hook, React fonksiyonel bileşenlerinde yan etkileri yönetmek için kullanılır. Örneğin, bir bileşenin render edilmesi, güncellenmesi veya bileşenin kaldırılması gibi durumlar için yan etkileri kontrol etmek için kullanılabilir.

useEffect hook’u, sınıf tabanlı bileşenlerdeki (class component) yaşam döngüsü metotlarına karşılık gelir. İşlevsel bir bileşende (function component) useEffect kullanırken, sınıf tabanlı bir bileşende aşağıdaki yaşam döngüsü metotlarına karşılık gelir:

  • componentDidMount: İlk render işleminden hemen sonra bir kere çalışır. Bileşen oluşturulduktan sonra yan etkileri gerçekleştirmek için kullanılır.
JavaScript
  • componentDidUpdate: Herhangi bir güncelleme sonrasında çalışır. Bileşen güncellendikten sonra yan etkileri gerçekleştirmek için kullanılır.
JavaScript
  • componentWillUnmount: Bileşen kaldırılmadan hemen önce çalışır. Temizleme işlemleri gibi yan etkileri gerçekleştirmek için kullanılır.
JavaScript
  • İsteğe bağlı olarak, componentDidMount ve componentDidUpdate için birleştirilmiş bir kullanım da mümkündür. Bu durumda, useEffect içerisinde ikinci bir parametre olarak değişen bir değişkenin kullanılması gerekir.
JavaScript

Bu şekilde, useEffect hook’u, sınıf tabanlı bileşenlerdeki yaşam döngüsü metotlarının işlevselliğini sağlar.

useEffect hook’unun temel kullanımı:

JavaScript

Yukarıdaki örnekte, useEffect hook’u, bileşen her render edildiğinde ve count state’i her değiştiğinde çalışır. useEffect içindeki fonksiyon, sayfa başlığını güncellemek için kullanılır. Ayrıca, useEffect içindeki bir temizleme fonksiyonu, bileşenin kaldırılması öncesinde çalışır ve etkisiz hale getirilmiş durumdaki işlemleri gerçekleştirir. Bu örnekte, temizleme fonksiyonu, sayfa başlığını başlangıç durumuna geri getirir.

useEffect‘in ikinci parametresi olan dizi, hangi state ya da props değişkenlerinin değiştiğinde useEffect‘in tekrar çalışacağını belirtir. Bu dizi, useEffect içindeki fonksiyonun tekrar çalışmasını tetikleyen bağımlılıkları sağlar. Eğer bu dizi boş bırakılırsa, useEffect her bileşen yeniden render edildiğinde çalışır. Bu, özellikle komponentin ilk render edildiği zaman gibi durumlarda işe yarar.

Bu örnek, bir sayfa başlığını güncellemek için kullanılırken, gerçek uygulamalarda daha karmaşık işlemler yapılabilir. Örneğin, veritabanı çağrıları yapmak, API istekleri göndermek veya abonelikleri yönetmek gibi işlemler de useEffect içinde gerçekleştirilebilir.

API İstekleri Yapma

JavaScript

Tarayıcı Eventlerini Kullanma

JavaScript

Özel Abonelikler Oluşturma

JavaScript

Bu örnekler, useEffect hook’unun farklı senaryolarda nasıl kullanılabileceğini göstermektedir. API istekleri yapma, tarayıcı olaylarını dinleme veya özel abonelikler oluşturma gibi çeşitli işlemler useEffect içinde gerçekleştirilebilir.

Ads Blocker Image Powered by Code Help Pro

Reklam Engelleyici Algılandı!

Reklamları engellemek için uzantı kullandığınızı tespit ettik.

Lütfen bu reklam engelleyiciyi devre dışı bırakarak ya da sitemize izin vererek bize destek olun.

Dikkat: VPN eklentiniz üzerinde de reklam engelleyici olabilir.