React Hook’lar — useEffect() ve useLayoutEffect()

useEffect()

Eğer React class lifecycle biliyorsanız, useEffect Hook’unu componentDidMount , componentDidUpdate ve componentWillUnmount lifecycle methodlarının birleşimi olarak düşünebilirsiniz.

Nasıl Kullanılır ?

useEffect Hook’u bir fonksiyon ve tetiklenmek için bir değer alır.

Aşağıki örnek sayfanın title’ını render sonrasında güncelleyecektir.

Unmount işlemi nasıl gerçekleştiririz ?

Unmount React komponentlerinin render edilip Dom’a basıldıktan sonra Dom üzerinden kaldırılması durumunda tetiklenecek methoddur.

Aşağıdaki örnekte toggle yardımıyla component mount olduğunda console’da mount, unmount olduğunda ise unMount yazısını görürüz.

useLayoutEffect()

useLayoutEffect kullanım olarak useEffect ile tamamen aynı. Aralarındaki kulanım farkı ise Dom işlemlerinde useLayoutEffect tercih etmemiz. Peki neden?

React yeni DOM’u oluşturduktan sonra fakat tarayıcı daha DOM’u paint etmeden useLayoutEffect çalışır. Burada bir manipülasyon ya da hesaplama yapmamız gerektiğinde useLayoutEffect kullanırız. Siz de ikisini de aynı şekilde çağırdığınızda önce useLayoutEffect’in çalıştığını görebilirsiniz.

useEffect asenkron çalışır ve bu yüzden Api call yapmak için en uygun yerdir. useLayoutEffect ise senkron yapıdadır ve tarıyıcı DOMu paint etmeden araya girer. DOM hesaplama CSS manipülasyon işlemlerinde kullanılabilir.

Kullanım şekli olarak useEffect’in yetersiz olduğu konularda sadece useLayoutEffecte başvurulması daha doğrudur.