⏳ Özet: useLayoutEffect hook'u React component'i render olduktan sonra ve useEffect hook'u çağrılmadan önce çalışır. İkisi arasında çalışma mantığı olarak bir fark yoktur. useLayoutEffect DOM üzerinde herhangi bir işlem veya bir hesaplama yapılacağı zaman kullanılır.

⚠️ React hook'ları class based componentlarda kullanılamaz.

React kütüphanesi gün geçtikçe popülerleşmeye ve bünyesine yeni özellikler eklenmeye devam ediyor. Bugün 16.8 versiyonuyla hayatımıza giren ve herhangi bir sınıf yazmadan functional componentlarda da lifecycle anlarını yakalayabileceğimiz 2 React hook'undan farklarından bahsetmeden önce kısaca ne işe yaradıklarını açıklamaya çalışacağım.

useEffect

useEffect hook'u class based componentlardaki componentDidMount, componentDidUpdate, ve componentWillUnmount işlevlerinin tek bir API'de birleştirilmiş halidir. Bu da bize tek bir method ile 3 farklı işlevi simüle edebilmemize olanak sağlıyor 🎉. Öncelikle useEffect'in kullanım şekline bakalım.

// ...

useEffect(
  () => {
    // yapılacak işlemler...
  },
  [dependencyOne, dependencyTwo] // bağımlı değişkenler
)

// ...

Görüldüğü gibi garip bir syntax'i var. Bu gözünüzü korkutmasın. Sırayla açıklamaya çalışacağım.

useEffect hook'u 2 adet parametre alır. Bunlardan ilki lifecycle esnasında çalıştırılacak fonksiyon ikincisi de bu çağırılacak fonksiyonun bağımlı olduğu değişkenler listesi. Bağımlı değişkenlerin değeri değiştiği zaman useEffect hook'u çalışır. Uygulamada performans sağlamak adına bu listenin parametre olarak verilmesi elzemdir. Bu değerler verilmediği yani dependency listesinin boş olması ([]) durumunda her component render olduğunda useEffect hook'u çalışacaktır.

useLayoutEffect

useEffect hook'u ile çalışma mantığı ve syntax'i aynıdır. useLayoutEffect React yeni DOM'u oluşturduktan sonra fakat tarayıcı'da yeni DOM paint edilmeden önce çalışır. Bu yüzden DOM üzerinde yapacağınız değişiklikleri useLayoutEffect hook'u içerisinde yapmalısınız.

useEffect vs useLayoutEffect

useEffect:

• React component'i render olduktan ve tarayıcı DOM'u paint ettikten sonra çalışır.
• Asenkron olarak çalışır.
• Asenkron olarak çalıştığı için API call yapılacak en doğru yerdir.

useLayoutEffect:

• Senkron çalışır ve tarayıcının yeni DOM'u paint etmesini engeler.
• DOM ile igili hesaplamalarda veya işlemlerde kullanılır.

İki hook arasındaki farkları açıklamaya çalıştım. Aralarında çok ufak tefek farklar olan bu hook'lardan kodumuzda çoğunlukla useEffect'i kullanacağız. Yani ilk tercih olarak kullanacağımız hook useEffect'tir. Sadece lazım olduğu takdirde diğer hook'u kullanmak mantıklı olacaktır.