React “useEffect” metodunu Sadece Değişiklik olduğunda Tetikleme

Son zamanlarda React Hooks ile yeni proje geliştiriyorum.

useEffect metodu ile class based komponentte componentDidUpdate lifecycle metodunda yaptığımız gibi bir iş yaptırmak istedim ancak sonsuz döngüye girdim :)

Basitçe yapmak istediğim iş; form sayfasında yeni bir kayıt oluşturduğumda liste sayfasına dönmekti. İlk yazdığım kod şu şekildeydi

Butona bastığımda api isteği yapılıyor ve dönen sonuca göre (createQuestionRes) işlem yaptırmaya çalışıyorum ve istediğim gibi sonuç geldiğinde liste sayfasına dönüş yapıyor.

Asıl problem şimdi başlıyor :) Form sayfasına tekrar erişmek istediğimde useEffect içerisinde yönlendirme kodu tekrar çalışıyor beni liste sayfasına geri atıyor.

Aslında useEffect metodunun doğası gereği herhangi bir problem yok. Dependency verdiğimizde hem komponent ilk yüklendiğinde hem de güncelleme olduğunda tetikleniyor. Daha farklı hangi durumlarda tetiklendiği konusu için dokümanlarına göz atabilirsiniz.

Sadece güncelleme olduğunda çalışması için ne yaptım?

Anahtar cevap başka bir Hooks metodu olan useRef’te saklı

useRef metodu sayesinde komponentin tüm yaşamı boyunca tutulabilen ve mutate edilebilen bir değişken elde edebiliyoruz. Koddanda da anlaşılabileceği gibi const isInitialMount = useRef(true); ile referans değerimizi başlangıcı true olmak üzere oluşturuyoruz. Komponent ilk çağrıldığında değerini false’a çekiyoruz ve bu sayede komponentin mount mu update mi olduğunu ayrıştırabiliyoruz.