Web Geliştirmede `ResizeObserver` API ile Dinamik ve Performanslı Arayüzler Oluşturma Rehberi 🎯

// 1. Gözlemciyi oluşturuyoruz
const myObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    // entry.target -> Boyutu değişen element
    // entry.contentRect -> Yeni boyut bilgileri (width, height, x, y vb.)
    console.log(`${entry.target.id} yeniden boyutlandı!`);
    console.log(`Yeni Genişlik: ${entry.contentRect.width}px`);
    console.log(`Yeni Yükseklik: ${entry.contentRect.height}px`);

    // Burada istediğiniz mantığı çalıştırabilirsiniz.
    // Örneğin, bir grafiği yeniden çizmek, layout'u güncellemek...
  }
});

// 2. Gözlemlemek istediğimiz elementi seçiyoruz
const myElement = document.getElementById('dinamikKutu');

// 3. Gözlemciyi elementi izlemek için başlatıyoruz
myObserver.observe(myElement);

// 4. İzlemeyi durdurmak istediğinizde (component unmount olduğunda unutmayın!)
// myObserver.unobserve(myElement);
// veya tüm gözlemleri durdurmak için:
// myObserver.disconnect();

import { useEffect, useRef } from 'react';

function useResizeObserver(callback) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;

    const observer = new ResizeObserver(callback);
    observer.observe(ref.current);

    // Cleanup
    return () => {
      observer.disconnect();
    };
  }, [callback]);

  return ref;
}

// Kullanımı:
function MyComponent() {
  const handleResize = (entries) => {
    const width = entries[0].contentRect.width;
    if (width < 400) {
      // Dar mod için state güncelle
    } else {
      // Geniş mod için state güncelle
    }
  };

  const containerRef = useResizeObserver(handleResize);

  return <div ref={containerRef}>İçerik buraya...</div>;
}