useEffect Kullanimi Uzerine

useEffect functional component’larda, uygulamanin yasam dongusu evrelerinde gerekli yerlere mudahalede bulunabilmek icin kolayliklar sunan bir gelistirme. Daha onceki birkac yazida hooks ile ilgili giris seviyesinde bir seyler anlatmistim. Burada useEffect kullaniminin biraz daha detayli bir halini ele almaya calisacagiz.

useEffect functional component’lar icerisinde, class-based component’larda componentDidMount’da uyguladigimiz islemleri yapabilmemiz icin kullandigimiz bir yontem. Ancak sadece componentDidMount yontemine denk dusmekle kalmiyor, componentDidUpdate ve componentWillUnmount dongulerine de mudahalede bulunabilmemizi sagliyor. Bir nevi uc farkli yontemin tek bir fonksiyonda birlestirilmesi gibi diyebiliriz.

useEffect, hizli bir sekilde ozetlemek gerekirse, uygulamanizin ayaga kalkma asamasinda, uygulamanin bagimli oldugu yan islemleri cagirmak icin kullandigimiz bir yontem. Bu, bir ihtiyac dogrultusunda api call da olabilmekle birlikte, window objesinden cekilmeyi bekleyen cesitli event’ler de olabilir.

Calisma prensibi, kendisine verecegimiz iki parametreye dayaniyor. Bunlardan ilki, gerceklestirmesini istedigimiz islemleri iceren fonksiyon, ikincisi ise soz konusu fonksiyonun hangi durumlarda calisip hangi durumlarda calismayacagini belirtebilecegimiz bir array degeri; yazinin devaminda da deginecegimiz uzere cogu zaman alt component’lara gectigimiz props’lar.

useEffect’i componentDidMount benzeri bir gorevle calistirmak istiyorsaniz, useEffect’e ikinci parametre olarak bos bir array vermeniz yeterli olacaktir.

Bu kodunuzun sadece app ilk yuklendiginde calismasina sebep olacaktir.

ComponentDidUpdate icinse, useEffect’e verdigimiz ikinci parametreyi kaldirmamiz yeterli. Bu useEffect’in app’de her bir state degisiminde tetiklenmesini saglayacaktir.

Bir adet input olusturduk ve input’un onChange event’ine yukarida tanimladigimiz setValue’yu gonderdik. Boylece, input’da var olan her degisiklik useState yolu ile value degiskenini guncelleyebilecek duruma geldi. Bu input icerisinde yazdigimiz her bir harf’te app’in “update” olacagi anlamina geliyor. Dolayisiyla useEffect icerisindeki kod parcacagi da her bir state degisiminde kendini tekrardan tetikliyor olacaktir.

componentWillUnmount islevini simule etmek icin, useEffect’e ikinci parametre olarak yine bos bir array verecegiz. Ancak bu sefer, useEffect’in icerisinde return etmesi icin fazladan bir fonksiyon daha yazacagiz. Return ettigi fonksiyonun icerisinde component’in yasam dongusu sonlandiginda baslayacak olan islemleri tetikleyebiliriz. Bu genelde, app’ten temizlenmesi gereken degerler soz konusu oldugunda basvurulan bir yontem olarak one cikar.

Ornegimizde bir adet de Child component’i olusturmamiz gerekiyor.

Child component’inin dom’da var olup olmamasini ise App component icerisinde bir kosula baglayacagiz. Boylece “unmount” anini yakalayip simule edebilecegiz.

Child component’i dahil edip, App icerisinde render olup olmamasini input’dan donecek olan degerin karakter sayisina bagladik. 4'ten kucuk olmasi durumunda Child component “mount”, diger durumda ise “unmount” olacaktir. Dolayisiyla Child icerisinde tanimladigimiz, return olan fonksiyon icerisindeki kodumuz o asamada devreye girecektir.

useEffect kullaniminda dikkat cekilecek bir diger nokta ise, alt component’lara veri aktariminda, aktarilan verinin degismesi durumunda alt component’larin buna verecegi tepkileri yonetmek.

App icerisinde input’un guncelledigi value degerini Child component’a gectigimizi ve child component’in da bunu alip kendi icerisinde tekrardan isleyerek kullanmaya calistigini dusunelim. Dolayisiyla, app component’dan gelen props’u Child, kendi icerisinde state’e atayip kullanacak ve props degisimi Child’daki state’i tekrardan guncellemeyecektir. Bu durumun ustesinden gelmek icin soz konusu props degistiginde useEffect icerisinde state’i guncelleyecek kodu calistirmaliyiz.

Child component icerisinde kullandigimiz useEffect’e ikinci parametre olarak Child’in adigi value’yi verdik. Bu, sadece value’de bir degisiklik oldugunda, yani App component icerisindeki value guncellendiginde useEffect’in icerisindeki kodu tetikleyecek bir sinirlama. Boylelikle her bir degisiklikte kodumuzu tetiklemeyerek performans acisindan da onemli bir kazanim elde etmis bulunduk. Ancak bu kullanimin da dikkat gerektirdigini unutmamak gerekiyor. useEffect icerisinde var olan kod yigininin hangi degerlere bagli oldugunu iyi anlayip, o degerleri dogru bir sekilde useEffect’e parametre olarak verme zorunlulugu soz konusu.

Sonuc olarak react gelistirmesi yaparken yapinizi hooks gelistirmesi uzerine kurduysaniz, yasam evrelerine mudahale etmek icin bu yontemleri kullanabilirsiniz.

Umarim faydali olabilmisimdir.

*Makaleyi Ingilizce klavyeden yazdigim ve hemen hemen tamamlanmasinin sonuna yaklasirken duzeltilmesi gerektiginin farkina vardigim icin, makaleyi bastan sona duzeltmeye usendim, varolan Turkce karakter sorunundan oturu ozurlerimi diliyorum.