React’ta Intersection Observer API Kullanımı: Elementlerin Görünürlüğünü İzleme

Bu makalede, kendi deneyimlerimden yola çıkarak, Intersection Observer API‘nin ne olduğunu ve nasıl etkin bir şekilde kullanabileceğinizi anlatacağım.

Çalıştığım şirketimde, uygulamamızda sunduğumuz anlık raporlama hizmetinde kullanıcı ilgil sayfada ise her 10 saniyede bir otomatik olarak veri isteği gönderen bir yapı bulunuyordu. Kullanıcılar, tarayıcının viewport kısmında ilgili componenti görmese bile bu istekler devam ediyor ve gereksiz yük oluşturuyordu.

Bu sorunu çözmek için araştırma yaparken, İntersection Observer API‘sini keşfettim. Bu API sayesinde, kullanıcılar sayfanın viewport kısmında bulundukları sürece istekler devam ediyor, sayfa viewport dışında kaldığında ise istekler durduruluyor.  Bu basit optimizasyon, hem kullanıcı deneyimini artırmamıza hem de sistem kaynaklarını daha etkin kullanmamıza olanak sağlamaktadır.

React’ta Intersection Observer Kullanımı

Intersection Observer API, bir elementin viewport veya belirli bir elementle kesişip kesişmediğini izlememizi sağlar.

Intersection Observer API’ı kullanmak için öncelikle bir Intersection Observer oluşturmanız gerekir. Bu, bir callback ve bir options (zorunlu değil) objesi alır.

const observer = new IntersectionObserver(callback, options);

Callback, hedef element viewport ile kesiştiğinde veya kesişme durumu değiştiğinde tetiklenir. Options objesi ise üç ana parametre alır: root, rootMargin ve threshold

1. root: Intersection Observer’ın hangi elemente göre kesişme kontrolü yapacağını belirtir. null değeri, viewport’un kullanılacağını belirtir.
2. rootMargin: root elementinin etrafında margin belirtmek için kullanılır. Elementin görünür alanı, belirtilen margin değerinin kapsamına geldiğinde de kesişim olduğu kabul edilir.
3. threshold: Bir kesişimin ne zaman tetikleneceğini belirtmek için kullanılır. Bu değer,  0.0 ile 1.0 arasında bir sayı veya bu sayılardan oluşan bir dizi olabilir. Örneğin, threshold: [0, 0.5, 1] değeri, hedef element görünmezken, yarısı görünürken ve tamamen görünürken callback’in tetiklenmesini sağlar.

const ref = useRef();

 useEffect(() => {
  const observer = new IntersectionObserver(
    ([entry]) => {
      setIsVisibleComponent(entry.isIntersecting);
    }
  );
  if (ref.current) {
    observer.observe(ref.current);
  }
  return () => {
    if (ref.current) {
      observer.unobserve(ref.current);
    }
  };
}, []);

Bir Intersection Observer oluşturulur. Intersection Observer, bir callback fonksiyonu alır. Bu callback, izlenen elementin görünürlük durumunu kontrol eder. entry.isIntersecting değeri, izlenen elementin viewport ile kesişip kesişmediğini belirtir.

Eğer element görünürse, entry.isIntersecting true olur, setIsVisibleComponent fonksiyonu true değeri ile çağrılır.

Eğer izlenen element viewport ile kesişmiyorsa, yani görünür değilse, entry.isIntersecting değeri false olur. Bu durumda, setIsVisibleComponent(entry.isIntersecting); satırı setIsVisibleComponent(false); olarak çalışır ve isVisibleComponent state değeri false olarak setlenir.

if (ref.current) {
  observer.observe(ref.current);
}
return () => {
  if (ref.current) {
    observer.unobserve(ref.current);
  }
};

Bu satırlar ise, ref kullanarak bir elementi izlemeyi ve izlemeyi durdurmayı yönetir.

if blogu; ref.current değerinin var olup olmadığını kontrol eder. ref.current, ref’in bağlı olduğu elementi temsil eder. Eğer ref.current bir elemente bağlıysa, bu element observer.observe(ref.current); satırı ile izlenmeye başlar.

return kısmı ise, useEffect hook’unun bir cleanup fonksiyonu döndürdüğü yerdir. cleanup fonksiyonu, component unmount olduğunda veya depency değiştiğinde çalışır. Bu durumda, cleanup fonksiyonu observer.unobserve(ref.current); satırı ile izlemenin durdurulmasını sağlar.

Bu örnekte, isVisibleComponent state değeri, izlenen element görünür olduğunda true olarak setlenir, görünür olmadığında false olarak setlenir.

return <div ref={ref}>Intersection Observer 😍</div>;