React useLayoutEffect: Senkronize DOM Ölçümü ve Güncellemeleri

React, bileşenlerinizdeki yan etkileri yönetmek için güçlü hook'lar sunar. Çoğu asenkron yan etki için useEffect temel araç iken, senkronize DOM ölçümleri ve güncellemeleri yapmanız gerektiğinde useLayoutEffect devreye girer. Bu kılavuz, useLayoutEffect'i derinlemesine inceler; amacını, kullanım senaryolarını ve nasıl etkili bir şekilde kullanılacağını açıklar.

Senkronize DOM Güncellemelerine Duyulan İhtiyacı Anlamak

useLayoutEffect'in özelliklerine dalmadan önce, senkronize DOM güncellemelerinin neden bazen gerekli olduğunu anlamak çok önemlidir. Tarayıcının render (işleme) hattı, aşağıdakiler de dahil olmak üzere birkaç aşamadan oluşur:

• HTML Ayrıştırma: HTML belgesini bir DOM ağacına dönüştürme.
• Render Etme: DOM'daki her bir öğenin stillerini ve düzenini hesaplama.
• Boyama (Painting): Öğeleri ekrana çizme.

React'in useEffect hook'u, tarayıcı ekranı boyadıktan sonra asenkron olarak çalışır. Bu genellikle performans nedenleriyle istenir, çünkü ana iş parçacığını engellemeyi önler ve tarayıcının yanıt vermeye devam etmesini sağlar. Ancak, tarayıcı boyama yapmadan önce DOM'u ölçmeniz ve ardından bu ölçümlere dayanarak DOM'u kullanıcı ilk render'ı görmeden önce güncellemeniz gereken durumlar vardır. Örnekler şunları içerir:

• Bir araç ipucunun konumunu, içeriğinin boyutuna ve mevcut ekran alanına göre ayarlama.
• Bir öğenin bir kap içine sığdığından emin olmak için yüksekliğini hesaplama.
• Kaydırma veya yeniden boyutlandırma sırasında öğelerin konumunu senkronize etme.

Bu tür işlemler için useEffect kullanırsanız, tarayıcı useEffect çalışıp DOM'u güncellemeden önce başlangıç durumunu boyadığı için görsel bir titreme veya aksaklık yaşayabilirsiniz. İşte bu noktada useLayoutEffect devreye girer.

useLayoutEffect ile Tanışma

useLayoutEffect, useEffect'e benzeyen bir React hook'udur, ancak tarayıcı tüm DOM mutasyonlarını gerçekleştirdikten sonra fakat ekranı boyamadan önce senkronize olarak çalışır. Bu, görsel bir titremeye neden olmadan DOM ölçümlerini okumanıza ve DOM'u güncellemenize olanak tanır. İşte temel sözdizimi:

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // DOM mutasyonlarından sonra ancak boyamadan önce çalışacak kod

    // İsteğe bağlı olarak bir temizleme fonksiyonu döndürün
    return () => {
      // Bileşen kaldırıldığında veya yeniden render edildiğinde çalışacak kod
    };
  }, [dependencies]);

  return (
    

      {/* Bileşen içeriği */}
    
  );
}

useEffect gibi, useLayoutEffect de iki argüman kabul eder:

1. Yan etki mantığını içeren bir fonksiyon.
2. İsteğe bağlı bir bağımlılık dizisi. Etki, yalnızca bağımlılıklardan biri değişirse yeniden çalışır. Bağımlılık dizisi boşsa ([]), etki yalnızca bir kez, ilk render'dan sonra çalışır. Bağımlılık dizisi sağlanmazsa, etki her render'dan sonra çalışır.

useLayoutEffect Ne Zaman Kullanılır?

useLayoutEffect'i ne zaman kullanacağınızı anlamanın anahtarı, tarayıcı boyama yapmadan önce senkronize olarak DOM ölçümleri ve güncellemeleri yapmanız gereken durumları belirlemektir. İşte bazı yaygın kullanım senaryoları:

1. Öğe Boyutlarını Ölçme

Diğer öğelerin düzenini hesaplamak için bir öğenin genişliğini, yüksekliğini veya konumunu ölçmeniz gerekebilir. Örneğin, bir araç ipucunun her zaman görüntü alanı içinde konumlandırıldığından emin olmak için useLayoutEffect kullanabilirsiniz.

import React, { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const [isVisible, setIsVisible] = useState(false);
  const tooltipRef = useRef(null);
  const buttonRef = useRef(null);

  useLayoutEffect(() => {
    if (isVisible && tooltipRef.current && buttonRef.current) {
      const buttonRect = buttonRef.current.getBoundingClientRect();
      const tooltipWidth = tooltipRef.current.offsetWidth;
      const windowWidth = window.innerWidth;

      // Araç ipucu için ideal konumu hesapla
      let left = buttonRect.left + (buttonRect.width / 2) - (tooltipWidth / 2);

      // Araç ipucu görüntü alanından taşacaksa konumu ayarla
      if (left < 0) {
        left = 10; // Sol kenardan minimum boşluk
      } else if (left + tooltipWidth > windowWidth) {
        left = windowWidth - tooltipWidth - 10; // Sağ kenardan minimum boşluk
      }

      tooltipRef.current.style.left = `${left}px`;
      tooltipRef.current.style.top = `${buttonRect.bottom + 5}px`;
    }
  }, [isVisible]);

  return (
    

       setIsVisible(!isVisible)}>Araç İpucunu Göster/Gizle
      {isVisible && (
        

          Bu bir araç ipucu mesajıdır.
        
      )}
    
  );
}

Bu örnekte, useLayoutEffect, düğmenin konumuna ve görüntü alanı boyutlarına göre araç ipucunun konumunu hesaplamak için kullanılır. Bu, araç ipucunun her zaman görünür olmasını ve ekrandan taşmamasını sağlar. getBoundingClientRect metodu, düğmenin boyutlarını ve görüntü alanına göre konumunu almak için kullanılır.

2. Öğe Konumlarını Senkronize Etme

Bir öğenin konumunu, kullanıcı kaydırdıkça onu takip eden yapışkan bir başlık gibi başka bir öğeyle senkronize etmeniz gerekebilir. Yine, useLayoutEffect, öğelerin tarayıcı boyama yapmadan önce doğru şekilde hizalanmasını sağlayarak herhangi bir görsel aksaklığı önleyebilir.

import React, { useState, useRef, useLayoutEffect } from 'react';

function StickyHeader() {
  const [isSticky, setIsSticky] = useState(false);
  const headerRef = useRef(null);
  const placeholderRef = useRef(null);

  useLayoutEffect(() => {
    const handleScroll = () => {
      if (headerRef.current && placeholderRef.current) {
        const headerHeight = headerRef.current.offsetHeight;
        const headerTop = headerRef.current.offsetTop;
        const scrollPosition = window.pageYOffset;

        if (scrollPosition > headerTop) {
          setIsSticky(true);
          placeholderRef.current.style.height = `${headerHeight}px`;
        } else {
          setIsSticky(false);
          placeholderRef.current.style.height = '0px';
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    

      

      

        
Yapışkan Başlık
      
      
{/* Kaydırılacak içerik */}
    
  );
}

Bu örnek, kullanıcı kaydırdıkça görüntü alanının en üstünde kalan yapışkan bir başlığın nasıl oluşturulacağını gösterir. useLayoutEffect, başlığın yüksekliğini hesaplamak ve başlık yapışkan hale geldiğinde içeriğin zıplamasını önlemek için bir yer tutucu öğenin yüksekliğini ayarlamak için kullanılır. offsetTop özelliği, başlığın belgeye göre başlangıç konumunu belirlemek için kullanılır.

3. Yazı Tipi Yüklenirken Metin Sıçramalarını Önleme

Web yazı tipleri yüklenirken, tarayıcılar başlangıçta yedek yazı tiplerini görüntüleyebilir, bu da özel yazı tipleri yüklendiğinde metnin yeniden akmasına neden olur. useLayoutEffect, yedek yazı tipiyle metnin yüksekliğini hesaplamak ve kap için minimum bir yükseklik ayarlayarak sıçramayı önlemek için kullanılabilir.

import React, { useRef, useLayoutEffect, useState } from 'react';

function FontLoadingComponent() {
  const textRef = useRef(null);
  const [minHeight, setMinHeight] = useState(0);

  useLayoutEffect(() => {
    if (textRef.current) {
      // Yedek font ile yüksekliği ölç
      const height = textRef.current.offsetHeight;
      setMinHeight(height);
    }
  }, []);

  return (
    

      
Bu, özel bir yazı tipi kullanan bir metindir.
    
  );
}

Bu örnekte, useLayoutEffect, paragraf öğesinin yüksekliğini yedek yazı tipini kullanarak ölçer. Ardından, özel yazı tipi yüklendiğinde metnin zıplamasını önlemek için ana div'in minHeight stil özelliğini ayarlar. "MyCustomFont" yerine kendi özel yazı tipinizin gerçek adını yazın.

useLayoutEffect vs. useEffect: Temel Farklılıklar

useLayoutEffect ve useEffect arasındaki en önemli ayrım, yürütme zamanlamalarıdır:

• useLayoutEffect: DOM mutasyonlarından sonra ancak tarayıcı boyama yapmadan önce senkronize olarak çalışır. Bu, etki yürütmeyi bitirene kadar tarayıcının boyama yapmasını engeller.
• useEffect: Tarayıcı ekranı boyadıktan sonra asenkron olarak çalışır. Bu, tarayıcının boyama yapmasını engellemez.

useLayoutEffect tarayıcının boyama yapmasını engellediği için idareli kullanılmalıdır. useLayoutEffect'in aşırı kullanımı, özellikle etki karmaşık veya zaman alıcı hesaplamalar içeriyorsa performans sorunlarına yol açabilir.

İşte temel farklılıkları özetleyen bir tablo:

Özellik	useLayoutEffect	useEffect
Çalışma Zamanlaması	Senkronize (boyamadan önce)	Asenkron (boyamadan sonra)
Engelleme	Tarayıcı boyamasını engeller	Engellemez
Kullanım Alanları	Senkronize yürütme gerektiren DOM ölçümleri ve güncellemeleri	Diğer çoğu yan etki (API çağrıları, zamanlayıcılar vb.)
Performans Etkisi	Potansiyel olarak daha yüksek (engelleme nedeniyle)	Daha düşük

useLayoutEffect Kullanımı İçin En İyi Pratikler

useLayoutEffect'i etkili bir şekilde kullanmak ve performans sorunlarından kaçınmak için bu en iyi pratikleri izleyin:

1. İdareli Kullanın

useLayoutEffect'i yalnızca kesinlikle senkronize DOM ölçümleri ve güncellemeleri yapmanız gerektiğinde kullanın. Diğer çoğu yan etki için useEffect daha iyi bir seçimdir.

2. Etki Fonksiyonunu Kısa ve Verimli Tutun

useLayoutEffect içindeki etki fonksiyonu, engelleme süresini en aza indirmek için mümkün olduğunca kısa ve verimli olmalıdır. Etki fonksiyonu içinde karmaşık hesaplamalardan veya zaman alıcı işlemlerden kaçının.

3. Bağımlılıkları Akıllıca Kullanın

useLayoutEffect'e her zaman bir bağımlılık dizisi sağlayın. Bu, etkinin yalnızca gerektiğinde yeniden çalışmasını sağlar. Bağımlılık dizisine hangi değişkenlerin dahil edilmesi gerektiğini dikkatlice düşünün. Gereksiz bağımlılıkları dahil etmek, gereksiz yeniden render'lara ve performans sorunlarına yol açabilir.

4. Sonsuz Döngülerden Kaçının

useLayoutEffect içinde aynı zamanda etkinin bir bağımlılığı olan bir state değişkenini güncelleyerek sonsuz döngüler oluşturmamaya dikkat edin. Bu, etkinin tekrar tekrar çalışmasına neden olarak tarayıcının donmasına yol açabilir. DOM ölçümlerine dayalı bir state değişkenini güncellemeniz gerekiyorsa, ölçülen değeri saklamak için bir ref kullanmayı ve state'i güncellemeden önce önceki değerle karşılaştırmayı düşünün.

5. Alternatifleri Değerlendirin

useLayoutEffect kullanmadan önce, senkronize DOM güncellemeleri gerektirmeyen alternatif çözümler olup olmadığını düşünün. Örneğin, istenen düzeni JavaScript müdahalesi olmadan elde etmek için CSS kullanabilirsiniz. CSS geçişleri ve animasyonları da useLayoutEffect'e ihtiyaç duymadan akıcı görsel efektler sağlayabilir.

useLayoutEffect ve Sunucu Taraflı Render (SSR)

useLayoutEffect tarayıcının DOM'una dayandığı için, sunucu taraflı render (SSR) sırasında kullanıldığında bir uyarı tetikleyecektir. Bunun nedeni, sunucuda bir DOM'un mevcut olmamasıdır. Bu uyarıdan kaçınmak için, useLayoutEffect'in yalnızca istemci tarafında çalışmasını sağlamak için koşullu bir kontrol kullanabilirsiniz.

import React, { useLayoutEffect, useEffect, useState } from 'react';

function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  useLayoutEffect(() => {
    if (isClient) {
      // DOM'a bağlı olan kod
      console.log('useLayoutEffect istemcide çalışıyor');
    }
  }, [isClient]);

  return (
    

      {/* Bileşen içeriği */}
    
  );
}

Bu örnekte, bir useEffect hook'u, bileşen istemci tarafında bağlandıktan sonra isClient state değişkenini true olarak ayarlamak için kullanılır. useLayoutEffect hook'u daha sonra yalnızca isClient true ise çalışır ve sunucuda çalışmasını engeller.

Başka bir yaklaşım, SSR sırasında useEffect'e geri dönen özel bir hook kullanmaktır:

import { useLayoutEffect, useEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

Ardından, doğrudan useLayoutEffect veya useEffect kullanmak yerine useIsomorphicLayoutEffect kullanabilirsiniz. Bu özel hook, kodun bir tarayıcı ortamında çalışıp çalışmadığını kontrol eder (yani, typeof window !== 'undefined'). Eğer öyleyse, useLayoutEffect kullanır; aksi takdirde, useEffect kullanır. Bu şekilde, istemci tarafında useLayoutEffect'in senkronize davranışından yararlanmaya devam ederken SSR sırasında uyarıdan kaçınırsınız.

Global Hususlar ve Örnekler

useLayoutEffect'i küresel bir kitleye yönelik uygulamalarda kullanırken aşağıdakileri göz önünde bulundurun:

• Farklı Yazı Tipi İşlemesi: Yazı tipi işlemesi farklı işletim sistemleri ve tarayıcılar arasında değişiklik gösterebilir. Düzen ayarlamalarınızın platformlar arasında tutarlı çalıştığından emin olun. Herhangi bir tutarsızlığı belirlemek ve gidermek için uygulamanızı çeşitli cihazlarda ve işletim sistemlerinde test etmeyi düşünün.
• Sağdan Sola (RTL) Diller: Uygulamanız RTL dillerini (ör. Arapça, İbranice) destekliyorsa, DOM ölçümlerinin ve güncellemelerinin RTL modundaki düzeni nasıl etkilediğine dikkat edin. Doğru düzen adaptasyonunu sağlamak için fiziksel özellikler (ör. margin-left, margin-right) yerine CSS mantıksal özelliklerini (ör. margin-inline-start, margin-inline-end) kullanın.
• Uluslararasılaştırma (i18n): Metin uzunluğu diller arasında önemli ölçüde değişebilir. Metin içeriğine göre düzeni ayarlarken, farklı dillerde daha uzun veya daha kısa metin dizeleri olasılığını göz önünde bulundurun. Değişen metin uzunluklarına uyum sağlamak için esnek düzen teknikleri (ör. CSS flexbox, grid) kullanın.
• Erişilebilirlik (a11y): Düzen ayarlamalarınızın erişilebilirliği olumsuz etkilemediğinden emin olun. JavaScript devre dışı bırakılmışsa veya kullanıcı yardımcı teknolojiler kullanıyorsa içeriğe erişmek için alternatif yollar sağlayın. Düzen ayarlamalarınızın yapısı ve amacı hakkında anlamsal bilgi sağlamak için ARIA niteliklerini kullanın.

Örnek: Çok Dilli Bir Bağlamda Dinamik İçerik Yükleme ve Düzen Ayarlaması

Farklı dillerde makaleleri dinamik olarak yükleyen bir haber web sitesi hayal edin. Her makalenin düzeninin, içeriğin uzunluğuna ve kullanıcının tercih ettiği yazı tipi ayarlarına göre ayarlanması gerekir. İşte useLayoutEffect'in bu senaryoda nasıl kullanılabileceği:

1. Makale İçeriğini Ölçme: Makale içeriği yüklendikten ve render edildikten sonra (ancak görüntülenmeden önce), makalenin kapsayıcısının yüksekliğini ölçmek için useLayoutEffect kullanın.
2. Mevcut Alanı Hesaplama: Başlık, altbilgi ve diğer kullanıcı arayüzü öğelerini dikkate alarak makale için ekranda mevcut olan alanı belirleyin.
3. Düzeni Ayarlama: Makalenin yüksekliğine ve mevcut alana bağlı olarak, en iyi okunabilirliği sağlamak için düzeni ayarlayın. Örneğin, yazı tipi boyutunu, satır yüksekliğini veya sütun genişliğini ayarlayabilirsiniz.
4. Dile Özgü Ayarlamaları Uygulama: Makale daha uzun metin dizelerine sahip bir dilde ise, artan metin uzunluğuna uyum sağlamak için ek ayarlamalar yapmanız gerekebilir.

Bu senaryoda useLayoutEffect kullanarak, makalenin düzeninin kullanıcı görmeden önce doğru şekilde ayarlandığından emin olabilir, görsel aksaklıkları önleyebilir ve daha iyi bir okuma deneyimi sağlayabilirsiniz.

Sonuç

useLayoutEffect, React'te senkronize DOM ölçümleri ve güncellemeleri yapmak için güçlü bir hook'tur. Ancak, potansiyel performans etkisi nedeniyle akıllıca kullanılmalıdır. useLayoutEffect ve useEffect arasındaki farkları anlayarak, en iyi pratikleri izleyerek ve küresel etkileri göz önünde bulundurarak, akıcı ve görsel olarak çekici kullanıcı arayüzleri oluşturmak için useLayoutEffect'ten yararlanabilirsiniz.

useLayoutEffect kullanırken performansa ve erişilebilirliğe öncelik vermeyi unutmayın. Her zaman senkronize DOM güncellemeleri gerektirmeyen alternatif çözümleri düşünün ve küresel kitleniz için tutarlı ve keyifli bir kullanıcı deneyimi sağlamak üzere uygulamanızı çeşitli cihazlarda ve tarayıcılarda kapsamlı bir şekilde test edin.