useLayoutEffect

useLayoutEffect(setup, dependencies?)

• Referans
  • useLayoutEffect(setup, dependencies?)
• Kullanım
  • Tarayıcı ekrana çizmeden önce yerleşimi ölçmek
• Sorun giderme
  • “useLayoutEffect does nothing on the server” hatası alıyorum

Referans

useLayoutEffect(setup, dependencies?)

Yerleşim (layout) ölçümlerini gerçekleştirmek için, useLayoutEffect’i tarayıcının ekrana yeniden çizme işleminden (repainting) önce çağırın:

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

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
  }, []);
  // ...

Daha fazla örnek için aşağıya bakın.

Parametreler

• setup: Effect mantığınızı içeren fonksiyon. setup fonksiyonunuz isteğe bağlı olarak bir cleanup fonksiyonu da döndürebilir. Component’iniz DOM’a commit ettikten sonra ve browser ekranı yeniden paint etmeden önce, React setup fonksiyonunuzu çalıştırır. Değişen dependency’lerle gerçekleşen her commit’ten sonra React önce eski değerlerle cleanup fonksiyonunu çalıştırır (eğer sağladıysanız), ardından yeni değerlerle setup fonksiyonunuzu çalıştırır. Component’iniz DOM’dan kaldırılmadan önce React cleanup fonksiyonunuzu çalıştırır.

• opsiyonel dependencies: setup kodu içinde referans verilen tüm reactive value’ların listesidir. Reactive value’lar; props, state ve bileşen gövdesi içinde doğrudan tanımlanan tüm değişkenler ve fonksiyonları kapsar. Eğer linter’ınız React için yapılandırılmışsa, her reactive value’nun dependency olarak doğru şekilde belirtildiğini doğrular. Dependency listesi sabit sayıda öğe içermeli ve [dep1, dep2, dep3] şeklinde inline olarak yazılmalıdır. React, her bir dependency’yi önceki değeriyle Object.is karşılaştırması kullanarak kıyaslar. Bu argümanı atladığınızda, Effect’iniz bileşenin her commit’inden sonra yeniden çalışır.

Dönüş değeri

useLayoutEffect, undefined döndürür.

Dikkat edilmesi gerekenler

• useLayoutEffect bir Hook olduğundan, yalnızca bileşeninizin en üst kapsamında ya da kendi Hook’larınızda çağırabilirsiniz. Döngülerin ve koşulların içinde çağıramazsınız. Eğer çağırmak zorunda kaldıysanız yeni bir bileşene çıkarın ve efekti oraya taşıyın.

• Katı Mod (Strict Mode) açık olduğunda React, ilk kurulumdan önce yalnızca geliştirme ortamında olmak üzere ekstra bir kurulum+temizleme döngüsü çalıştırır. Bu, temizleme mantığının kurulum mantığını “yansıtmasını” ve kurulumun yaptığı her şeyi durdurmasını veya geri almasını sağlayan bir stres testidir. Eğer bir probleme neden olursa temizleme fonksiyonunu implemente edin.

• Bileşen içerisinde tanımlanıp bağımlılıklarınıza eklenmiş bazı nesneler ve fonksiyonlar, efektin gereksiz yere yeniden çalışmasına neden olabilir. Bu sorunu çözmek için gereksiz nesne ve fonksiyon bağımlılıklarını kaldırabilirsiniz. Ayrıca state güncellemelerini ve reaktif olmayan kodları efekt dışına çıkarabilirsiniz.

• Efektler yalnızca istemcide (client) çalışır. Sunucu taraflı renderlama (server-side rendering) esnasında çalışmaz.

• useLayoutEffect fonksiyonunun kodu ve içerisinde planlanan state güncellemeleri, tarayıcının ekrana yeniden çizme işlemini bloklar. Aynı zamanda gereğinden fazla kullanılması durumunda uygulamanızı yavaşlatabilir. Mümkün olduğunca useEffect’i tercih edin.

• If you trigger a state update inside useLayoutEffect, React will execute all remaining Effects immediately including useEffect.

Kullanım

Tarayıcı ekrana çizmeden önce yerleşimi ölçmek

Çoğu bileşen, render edeceği elementlere karar vermek için ekrandaki konumlarını ve boyutlarını bilmeye ihtiyaç duymaz. Sadece JSX döndürürler. Sonrasında tarayıcı, yerleşimlerini (konum ve boyut) hesaplar ve ekrana çizer.

Bazen bu yeterli olmaz. Bir elementin üzerine gelindiğinde yanında görünen bir ipucu kutusunu (tooltip) düşünün. Yeterli alan mevcutsa öğenin üstünde, yoksa altında görünmelidir. Doğru konumda render edilmesi için kutunun yüksekliğini bilmeye ihtiyacınız (üstteki boşluğa sığdığından emin olmak adına) vardır.

Bunu yapmak için çift dikiş renderlamaya ihtiyacınız vardır:

1. İpucunu herhangi bir yerde render edin (konumu farketmez).
2. Yüksekliğini ölçün ve ipucunu yerleştireceğiniz yere karar verin.
3. İpucunu doğru yerde yeniden render edin.

Tüm bunlar tarayıcı ekrana yeniden çizmeden önce yaşanmalıdır. Kullanıcının kutunun konum değiştirme hareketini görmesini istemezsiniz. Yerleşim ölçümlerini yapmak için useLayoutEffect’i çağırın:

function Tooltip() {