Düzen Karmaşasını ve Görsel Titreşimi Önleme

JavaScript, bir döngü içinde DOM özelliklerini okumakla DOM'a yazmak arasında sürekli gidip geldiğinde yerleşim karmaşası oluşur. Bir yazma işleminden sonraki her okuma, doğru bir değer döndürmek için tarayıcıyı yerleşimi eşzamanlı olarak yeniden hesaplamaya zorlar. Bu durum, tek bir yerleşim hesaplaması olması gereken işi onlarca hesaplamaya dönüştürerek performansı ciddi biçimde düşürebilir.

React, olay işleyicileri ve etkiler içindeki tüm setState çağrılarını tek bir yeniden oluşturmada toplu olarak işler. Bu doğal toplu işleme, tek bir oluşturma döngüsü içindeki karmaşaya neden olan okuma-yazma-okuma örüntüsünü önler. React 18'de toplu işleme eşzamansız geri çağrılara ve vaatlere de genişletilerek eşzamanlı durum güncellemelerinden kaynaklanan yerleşim karmaşasını azaltır.

Bir useEffect DOM'u okuduğunda, durumu güncellediğinde, yeniden oluşturmayı tetiklediğinde ve tarayıcı iki kez boyama yaptığında titreme meydana gelir: ilk olarak başlangıç durumuyla, ardından düzeltilmiş durumla. İlk boyama, yerini düzeltilmiş boyamaya bırakmadan önce kısa süreliğine görünür. Bu durum özellikle yükseklik, genişlik veya konum gibi yerleşim özelliklerini ayarlayan efektlerde belirgindir.

Chrome DevTools'u açın, Rendering sekmesine gidin (More tools altındaki üç nokta menüsünden) ve "Paint flashing" seçeneğini etkinleştirin. Yeniden boyanan alanlar yeşil renkle vurgulanır. İlk oluşturma sırasında bir bileşenin yanıp söndüğünü ve hemen ardından farklı bir yerleşimle yeniden boyandığını görürseniz bu, useEffect kaynaklı bir durum güncellemesinin neden olduğu iki kez boyamayı doğrular.

DOM okumalarını ve bunların sonucunda oluşan durum güncellemelerini useEffect yerine useLayoutEffect içine taşıyın. Aynı ölçüm ve durum güncellemesi artık boyamadan önce eşzamanlı olarak gerçekleşir; React aynı blok içinde yeniden oluşturur ve değişiklikleri uygular, tarayıcı da yalnızca son ve doğru durumu boyar. DevTools'taki yeşil yanıp sönme kaybolur.

Titremesiz desen şöyledir: DOM'u useLayoutEffect içinde okuyun, ölçümü setState ile gönderin, React eşzamanlı olarak yeniden oluştursun, düzeltilmiş DOM'u uygulasın ve tarayıcı son sonuçla bir kez boyama yapsın. Bu, araç ipucu konumlandırması, sabit başlık kaydırma değerleri ve animasyon kurulumu için standart desendir.

Efektlerin büyük çoğunluğu useEffect içinde yer almalıdır: veri çekme (yüklenme sırasında görülen kısa görüntü değişimi kabul edilebilir ve beklenir), olaylara veya akışlara abonelikler, günlük kaydı ve analiz, zamanlayıcılar ve görünür yerleşimi hemen etkilemeyen tüm efektler. useEffect işe yarayacakken useLayoutEffect'i gereğinden fazla kullanmak, performansı olumsuz etkileyen yanlış bir kullanım desenidir.

useLayoutEffect'i, görsel çıktıyı etkileyen DOM ölçümleri için kullanın: araç ipucu konumları, öğe boyutuna dayalı mantık, kaydırma konumunu geri yükleme ve başlangıç boyutlarını okuyan animasyon kurulumu. İlk oluşturmada yanlış yerleşimin bir kare boyunca görünür şekilde yanıp sönmesi, geçiş yapmanız gerektiğini gösteren açık bir belirtidir.

İki kancanın imzaları aynıdır: useLayoutEffect(callback, deps) ve useEffect(callback, deps). Tek fark, geri çağırmanın çalıştığı zamanlamadır. Kodda tek kelimelik bir değişiklik yaparak aralarında geçiş yapabilirsiniz. useEffect ile başlayın ve yalnızca titremeyi doğrularsanız useLayoutEffect'e geçin.

Farklı sorumluluklar için aynı bileşende iki kancayı da kullanmak geçerli ve yaygın bir yaklaşımdır. Örneğin bir grafik bileşeni, kapsayıcısının genişliğini ölçmek ve SVG viewBox'ını eşzamanlı olarak ayarlamak için useLayoutEffect'i, ardından grafik verilerini eşzamansız olarak almak için useEffect'i kullanabilir. Her kanca, zamanlamanın önemli olduğu sorumluluğu üstlenir.

DevTools'taki boyama yanıp sönmesine ek olarak, oluşturma sayısını hesaplamak için bileşeninizin içine bir konsol sayacı ekleyebilirsiniz. Bir bileşen ilk kez bağlandığında, bir kez başlangıç durumuyla ve bir kez düzeltilmiş ölçümle olmak üzere "oluşturma" ifadesini iki kez günlüğe kaydediyorsa iki kez boyama durumu söz konusudur. Ölçümü useLayoutEffect'e taşımak, Strict Mode'daki iki kez çalıştırma durumu dışında, bağlamadan sonra günlüğe kaydedilen oluşturma sayısını bire indirmelidir.

useEffect yerine useLayoutEffect kullanmak için doğru neden hangi senaryodur?

Yerleşim karmaşası, DOM okumalarıyla yazmalarının art arda dönüşümlü yapılmasından kaynaklanır. React'in toplu güncelleme işlemi, oluşturma sırasında bunun çoğunu önler. useEffect DOM'u ölçüp durumu güncellediğinde iki kez boyama yapıldığı için titreme meydana gelir. DOM ölçümlerini useLayoutEffect'e taşıyarak titremeyi giderin. Diğer her şey için varsayılan olarak useEffect'i kullanın: veri alma, abonelikler, günlük kaydı ve zamanlayıcılar.