React Hooks — useEffect mi useLayoutEffect mi?

React Hooks’u öğrenmeye başladığımda kafama takılan en önemli soru bu olmuştu. Çünkü “ikisi de aynı şeyi yapıyor gibi gözüken bu iki Hook’un farkı tam olarak neydi?” diye düşünüyordum. Okuduğum materyallerde veya takip ettiğim kaynaklarda genellikle farkın sadece milisaniyelerden oluşan render süreleri olduğu söyleniyordu. Genelde useEffect’i kullanmanın daha faydalı olacağını söylüyorlardı. Ben de bu konuda kafası karışan ve Türkçe kaynak azlığından tam da aydınlanamayan arkadaş için bu yazıyı yazma kararı verdim.

useEffect() ve useLayoutEffect’in farkı nedir?

Öncelikle kod yapısına bakalım.

yukarıdaki kod bloğunda da gördüğümüz gibi kullanımları birebir aynı formatta. Burada dikkat etmemiz gereken nokta useEffect()’i üste useLayoutEffect()’i alta yazdım. JavaScript ve birçok programlama dilinde söz dizimi yukarıdan aşağıya doğru okunur ve sırasıyla çalıştırılır. Bu duruma göre useEffect()’in içindeki kod parçacığının daha erken çalıştırılması gerekiyor. Şimdi kodu çalıştırıp bakalım ilk önce hangi alert fonksiyonu çalışacak.

Çalıştırınca ekrana gelen ilk görüntü

İlk görüntüden sonra ekrana gelen ikinci görüntü

Gördüğünüz gibi kodu çalıştırdığımız zaman ilk önce render edilen useLayoutEffect() Hook’u oldu.

useLayoutEffect Neden Hızlı?

Çünkü useEffect çalışmak için Render’ın tamamlanmasını beklemektedir. useLayoutEffect ise render esnasında çalışabilmektedir. Aradaki hız farkı bundan kaynaklanmaktadır.

Peki Bu Ne İşimize Yarar?

Gelelim aradaki bu milisaniye cinsinden gecikmenin bize ne yarar sağlayacağına..

React Hooks kullanan yazılımcıların çoğu birçok yerde useEffect’i kullanıyor ancak DOM olaylarında useLayoutEffect’i tercih edebiliyorlar. Daha sağlıklı ve verimli bir DOM kullanımı için useLayoutEffect’i DOM işlemleriniz esnasında kullanabilirsiniz. Geriye kalanlarda ise useEffect’i kullanmanız daha iyi olacaktır.