Ölçüm yapma

ref ile bir elemanın boyutunu ölçmeyi öğrenirsin.

Ölçüm yapma

useRef ile DOM düğümlerine erişip ölçüm yapabilirsin. Bir ref özniteliği ile düğümü yakalar, ref.current.offsetWidth gibi özelliklerle boyut okursun.

Ölçüm genellikle useEffect içinde yapılır; çizim bittikten sonra DOM hazır olur. Ölçüm sonucunu state'e yazarsan bileşen yeniden çizilir ve ölçüm ekrana yansır.

Ölçüm maliyetlidir; her çizimde yapmak yerine yalnızca gerektiğinde yap. ResizeObserver ile boyut değişimini izlemek yaygındır.

useLayoutEffect vs useEffect

Ölçüm için iki seçenek var: useEffect ve useLayoutEffect. useLayoutEffect çizim öncelesi senkron çalışır; tarayıcı boyama yapmadan önce. Bu, yer sıçramasını önler.

useEffect ise çizim sonrası asenkron çalışır; tarayıcı önce çizer, sonra ölçüm yapılır. Kısa bir titreme görülebilir.

Ölçüm sonucuna göre still değiştiriyorsan useLayoutEffect tercih edilir; yalnızca veri okuyorsan useEffect yeterlidir.

Uygulama Genişlik ölçümü

Aşağıdaki iskeleti tamamla. MeasureBox bileşeni yaz; useRef(null) ile boxRef al, useEffect içinde boxRef.current.offsetWidth oku ve setWidth ile state'e yaz, <div ref={boxRef}> çiz. Dışa aktar.

Örnek çözümü göster

import { useRef, useEffect, useState } from "react";

function MeasureBox() {
  const boxRef = useRef(null);
  const [width, setWidth] = useState(0);
  useEffect(() => {
    if (boxRef.current) setWidth(boxRef.current.offsetWidth);
  }, []);
  return <div ref={boxRef}>Genişlik: {width}px</div>;
}

export default MeasureBox;

Kendini test et

Ölçüm hangi hook içinde yapılır?
- useMemo
- useState
- useEffect
- useCallback
Cevabı göster

useEffect — Ölçüm useEffect içinde yapılır; DOM hazır olur.

offsetWidth okuma

useEffect(() => {
  if (boxRef.current) {
    setWidth(boxRef.current.____);
  }
}, []);

Cevabı göster

useEffect(() => {
  if (boxRef.current) {
    setWidth(boxRef.current.offsetWidth);
  }
}, []);

Ölçüm yapma: kavramları eşleştir

useRef

DOM düğümü
offsetWidth

Genişlik ölçümü
useEffect

Çizim sonrası
useLayoutEffect

Çizim öncelesi

Sıradaki ders: forwardRef

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler