UseEffect vs UseLayoutEffect

Herkese Merhaba,

Bu yazımda mülakatlarda bazen denk geldiğim bir soru olan useEffect ve useLayoutEffect arasındaki farklara değinmek istedim.

İkisi de temelde aynı şeyi yapmak için kullanılmakta, ancak kullanım durumları farklı. Çoğu durumda useEffect kullanıyoruz. Ancak hangi durumlarda useLayoutEffect kullanılmalı bunu da bilmekte fayda var.

Aralarındaki farkı öncelikle hazırladığım bir görsele yansıtacağım:

Görsel üzerinde görüldüğü üzere componentımız oluşur. Daha sonra state değişir ve component render/re-render olur. İşte fark burada başlıyor.

useEffect

useEffect component render olup değişiklikler ekrana yansıdıktan sonra asenkron olarak çalışır. Yani kullanıcı UI’da en son değişiklikleri gördükten sonra çalışır. Bir başka deyişle kullanıcının UI’da meydana gelen değişiklikleri görmesini engellemez. Bu, tarayıcının önce değişiklikleri gösterdiği ve sonra state’i güncellediği anlamına gelir.

useLayoutEffect

useLayoutEffect ise component render olduktan sonra ancak değişiklikler ekrana yansımadan önce ve senkron olarak çalışır. Yani UI işlem tamamlanana kadar güncellenmeyecektir. Bu ise, önce state’in güncellendiği ve sonra tarayıcının değişiklikleri gösterdiği anlamına gelir.

Aralarındaki farkı öğrendiğimize göre bu durumda useLayoutEffect hangi durumlarda kullanılmalı ?

Eğer Dom ölçümleri yapacaksak ( dom elementlerini & scroll pozisyonunu ölçmek gibi ) ya da state değiştiğinde senkron bir re-render işlemi tetiklemek istiyorsak ya da state’in en son haline ihtiyacımız varsa useLayoutEffect kullanmak daha mantıklıdır.

Şimdi daha iyi görebilmek adına birkaç örnek üzerinden de bakalım:

Yukarıda görüldüğü gibi ikisi de aynı yapıya sahip. Ama console çıktısına bakarsak useLayoutEffect daha önce geliyor. Çünkü useLayoutEffect dom güncellendikten hemen sonra ancak tarayıcı bunu ekrana yansıtmadan önce çalışıyor.

Çoğu durumda, uygulamamızın daha hızlı ve daha performanslı olması için ve DOM güncellendikten sonra asenkron yapısı gereği tarayıcıda block sorunlarını önlediği için, useEffect kullanılması önerilir. %99 oranında kullanmamız gereken hook useEffect olmalıdır. React dokümanına göre de useLayoutEffect’in senkron yapısı sebebiyle performans sorunlarına yol açtığı ve mümkün olduğunca useEffect kullanılmasını önerdiği görülüyor.

Ancak, DOM layoutuna dayalı bir şeyler yapmamız gerektiğinde ve useEffect bazen görsel tutarsızlıklara yol açtığından dolayı bu gibi durumlarda useLayoutEffect kullanmak daha mantıklıdır.

Bir örnek daha yapalım. Mesela Hide&Show özelliği olan bir butonumuz olsun.

Burada ekranımızda bir kare gösterip saklıyoruz. Karenin rengi kırmızı. Biz bir ref aracılığı ile rengini yeşil yapmak istiyoruz. Ve Toggle butonundan 20px aşağıya yerleştirmek istiyoruz. Burada bu işlemi useEffect ile yaptığımızda aşağıdaki gibi bize bir salise gibi çok kısa bir sürede kareyi önce kırmızı sonra yeşil & 20px aşağıda gösterecek. Çünkü useEffect bizim bunu görmemizi engellemiyor. Önce var olanı gösterip sonra state’i güncelliyor. Bu yüzden kırmızıyı da yeşili de görüyoruz. Bunu lütfen kendiniz deneyin ve butona basarak neler olduğunu gözlemleyin.

Ancak useEffect yerine useLayoutEffect kullanırsak böyle bir sorunla karşılaşmayacağız. Çünkü useLayoutEffect senkron olarak çalıştığı için değişiklik tamamlanana kadar UI güncellenmeyecek ve bize sadece yeşil olan kareyi gösterecek, kırmızı kareyi hiç görmeyeceğiz. Bununla ilgili olarak daha iyi anlaşılır olması açısından bir video da ekliyorum buraya.

useEffect & useLayoutEffect ile ilgili yazacaklarım bu kadar. Eklemek istediğiniz şeyler varsa bana yazabilir veya yorum yapabilirsiniz. Okuduğunuz için teşekkür ederim :)