useLayoutEffect ile DOM Ögelerini Ölçme

element.getBoundingClientRect(), öğenin görüntü alanına göre boyutunu ve konumunu içeren bir DOMRect nesnesi döndürür: top, right, bottom, left, width ve height. Doğru değerleri döndürmek için tarayıcıyı yerleşim hesaplaması yapmaya zorladığından, bunu ölçülü kullanın.

getBoundingClientRect() değerini bir useEffect içinde okursanız tarayıcı ekrana çizimi zaten tamamlamış olur. Ardından ölçüme göre durumu ayarlarsanız React yeniden oluşturur ve tarayıcı yeniden ekrana çizer. Düzeltme ikinci çizimde görünmeden önce kullanıcılar öğeyi kısa süreliğine yanlış konumda veya yanlış boyutta görebilir.

Ölçümleri useLayoutEffect içinde okumak, DOM değişikliklerinden sonra ancak ekrana çizimden önce gerçekleşir. Ölçümün tetiklediği herhangi bir durum güncellemesi React'in eşzamanlı olarak yeniden oluşturmasına ve düzeltilmiş DOM'u uygulamasına neden olur; bunların tamamı tarayıcı herhangi bir şeyi ekrana çizmeden önce gerçekleşir. Kullanıcı tek bir çizim döngüsünde yalnızca nihai ve doğru sonucu görür.

Bir araç ipucunun tetikleyici öğesinin yakınında görünmesi gerekir. getBoundingClientRect() kullanarak tetikleyici öğenin konumunu useLayoutEffect içinde ölçün, araç ipucunun mutlak konumunu hesaplayın ve bu konumu durumda ayarlayın. Araç ipucu, yanlış bir başlangıç konumundan kaynaklanan görünür bir sıçrama olmadan ilk ekrana çizimde doğru konumda oluşturulur.

Bir öğeyi doğal (kısıtlanmamış) boyutundan sabit bir boyuta canlandırmak için kısıtlama uygulanmadan önce doğal boyutu bilmeniz gerekir. Herhangi bir canlandırma stili uygulanmadan önce öğenin yüksekliğini useLayoutEffect içinde okuyun, bu değeri durumda saklayın ve ardından CSS geçişinizin başlangıç ana kare değeri olarak kullanın.

Bir sayfada sabitlenen bir üst bilgi varsa gövde içeriğinin, üst bilginin arkasında gizlenmemesi için üst iç boşluğunun üst bilgi yüksekliğine eşit olması gerekir. Üst bilgi yüksekliğini bir referans kullanarak useLayoutEffect içinde ölçün: headerRef.current.getBoundingClientRect().height. Bunu içerik kapsayıcısında paddingTop olarak ayarlayın. Yerleşim ilk oluşturmadan itibaren doğru olur.

useLayoutEffect içinde setState çağırdığınızda React aynı eşzamanlı iş bloğunda hemen başka bir oluşturma ve uygulama döngüsü çalıştırır. Bu yeniden oluşturma, kendi useLayoutEffect'ini de çalıştırır. Sonsuz döngü oluşturmamaya dikkat edin: durumu yalnızca yeni ölçüm geçerli durum değerinden farklıysa güncelleyin.

Sunucuda DOM öğeleri mevcut olmadığından getBoundingClientRect() bir hata verir veya sıfırlar döndürür. useLayoutEffect için bir kontrol kullanın: if (typeof window === 'undefined') return;. SSR uygulamalarında yer tutucu bir boyutla hidrasyon yapmanız ve istemcide hidrasyondan sonra ölçüm almanız gerekebilir.

useLayoutEffect ile yapılan tek seferlik ölçüm, bağlanma anındaki boyutu verir. Öğe yeniden boyutlandırılırken boyut değişikliklerini (pencerenin yeniden boyutlandırılması, dinamik içerik veya CSS değişiklikleri nedeniyle) izlemek için bunun yerine ResizeObserver kullanın. Öğe boyutu her değiştiğinde bir geri çağırma çalıştırır; bu da onu duyarlı bileşenler için daha uygun hale getirir.

Birden fazla etkinin aynı ölçüme ihtiyacı varsa ölçümü bir kez hesaplayıp bağlam aracılığıyla paylaşın veya özellik olarak aşağı aktarın. Aynı getBoundingClientRect() değerini birden fazla useLayoutEffect çağrısında hesaplamak, birden fazla eşzamanlı yerleşim okumasını tetikler ve bunların her biri görece maliyetlidir. Mümkün olduğunda ölçümleri birleştirin.

Etkiler çalışmadan önce referanslar doldurulur. useLayoutEffect çalıştığında ref.current değerinin DOM öğesini göstermesi garanti edilir. Örüntünün işe yaramasının nedeni budur: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). Oluşturulmuş bir bileşenin yerleşim etkisi içinde referans hiçbir zaman null olmaz.

getBoundingClientRect() çağrısını useEffect yerine useLayoutEffect içinde yapmak neden daha iyidir?

DOM ölçümlerini değişikliklerden sonra, ancak ekrana çizimden önce okumak için getBoundingClientRect() değerini useLayoutEffect içinde kullanın. Bu ölçümlerden kaynaklanan durum güncellemeleri aynı çizime dahil edilen eşzamanlı bir yeniden oluşturmaya yol açarak titremeyi önler. SSR'ye karşı typeof window kontrolüyle koruma sağlayın. Sürekli boyut izleme için ResizeObserver'ı tercih edin.