useLayoutEffect ile useEffect Ne Zaman Çalışır

useLayoutEffect, React DOM değişikliklerini uyguladıktan hemen sonra, ancak tarayıcı bu değişiklikleri ekrana çizme fırsatı bulamadan önce eşzamanlı olarak çalışır. Tarayıcı açısından yerleşim etkisi ve DOM değişiklikleri, kesintiye uğramayan aynı iş bloğunun parçasıdır.

useEffect, tarayıcı ekrana çizimi tamamladıktan sonra eşzamansız olarak çalışır. Kullanıcı önce güncellenmiş arayüzü görür, ardından etki çalışır. Bu durum useEffect'i oluşturma performansını daha az etkileyen bir seçenek haline getirir; ancak etkinin neden olduğu görünür değişikliklerin ikinci bir çizim döngüsüne yol açacağı anlamına gelir.

Her iki etkide zaman damgalarının günlük kaydını oluşturarak zamanlama farkını doğrulayabilirsiniz: console.log('layout', Date.now()) ifadesini useLayoutEffect içine, console.log('passive', Date.now()) ifadesini de useEffect içine ekleyin. Konsolda yerleşim etkisinin zaman damgası her zaman pasif etkinin zaman damgasından daha erken olacaktır; bu da yürütme sırasını doğrular.

Bir useEffect, görsel çıktıyı etkileyen durumu güncellerse kullanıcı iki oluşturma görür: önce güncel olmayan durumla ilk oluşturma, ardından etki çalıştıktan sonra düzeltilmiş oluşturma. Bu durum görünür bir titreme veya yeniden akış olarak ortaya çıkar. useLayoutEffect bunu önler; çünkü durum güncellemeleri tarayıcı herhangi bir şeyi ekrana çizmeden önce uygulanır.

useLayoutEffect içinde setState çağırırsanız React, ekrana çizimden önce hemen başka bir oluşturma ve uygulama döngüsü çalıştırır. Tarayıcı yalnızca son sonucu ekrana çizer; kullanıcı ara durumu hiçbir zaman görmez. useLayoutEffect'in temel kullanım amacı budur: DOM'u ölçmek, yeni bir değer hesaplamak, durumu ayarlamak ve tek, temiz bir çizimi garanti etmek.

useLayoutEffect ekrana çizimden önce eşzamanlı olarak çalıştığı ve ek oluşturmalara yol açabildiği için aşırı kullanımı performansı olumsuz etkileyebilir. Eşzamanlı iş ağırsa tarayıcının ekrana çizim yapmasını engeller ve görünür takılmalara neden olur. Yalnızca görsel bir titremeyi önlemeniz gerektiğinde kullanın; diğer her şey için useEffect kullanın.

React Katı Modunda (yalnızca geliştirme sırasında) hem useLayoutEffect hem de useEffect, her etkinleştirmede iki kez çağrılır. Sıra şöyledir: etkinleştirme, temizleme, yeniden etkinleştirme. Bu, düzgün biçimde temizlenmeyen etkileri belirlemeye yardımcı olur. İki kez çağırma üretim derlemelerinde gerçekleşmez.

Varsayılan seçim her zaman useEffect olmalıdır. useLayoutEffect'e yalnızca görsel titremeyi veya yanlış yerleşim sorununu gözlemleyip yeniden oluşturabildiğinizde geçin. useLayoutEffect'in gereğinden fazla kullanılması tarayıcının çizim işlem hattını gereksiz yere engelleyebilir ve algılanan performansı düşürebilir.

useLayoutEffect, sunucu ortamında DOM veya tarayıcının ekrana çizim döngüsü bulunmadığı için sunucuda çalışamaz. Sunucuda oluşturulan bir bileşende kullanılırsa React bir uyarı verir. Çözüm, etkiyi koşullu olarak atlamaktır: typeof window !== 'undefined' kontrolünü yapın veya SSR ile uyumlu kod için useEffect'e geçin.

Kendinize şu soruyu sorun: "Bu etki, kullanıcının ilk ekrana çizim sırasında göreceği bir şeyi değiştiriyor mu?" Yanıt evetse titremeyi önlemek için useLayoutEffect kullanın. Yanıt hayırsa veri getirme, abonelikler, analiz, günlük kaydı ve diğer yan etkilerin çoğu için useEffect kullanın. Bu karar çerçevesi, gerçek hayattaki durumların çoğunu kapsar.

useLayoutEffect, DOM değişiklikleriyle aynı eşzamanlı iş bloğunda çalışır. React, bir useLayoutEffect çalışırken başka işleri (kullanıcı olaylarına yanıt vermek gibi) işleyemez. Bu nedenle hızlı ve odaklı olmalıdır. useLayoutEffect içindeki uzun süren eşzamanlı kod, tarayıcının ekrana oluşturma yapmasını doğrudan geciktirir.

useLayoutEffect, DOM değişikliklerine ve tarayıcının ekrana çizimine göre tam olarak ne zaman çalışır?

useLayoutEffect eşzamanlıdır ve tarayıcının ekrana çiziminden önce çalışır; bu nedenle DOM ölçümü ve görsel düzeltmeler için uygundur. useEffect ekrana çizimden sonra çalışır ve veri getirme, abonelikler ve çoğu yan etki için doğru seçimdir. Varsayılan olarak useEffect'i kullanın; yalnızca görsel titreme useLayoutEffect'in gerekli olduğunu doğruladığında geçiş yapın. Koruyucu kontroller olmadan SSR'de kullanmaktan kaçının.