React’te Sonsuz Kaydırma: Intersection Observer ile Uygulama

React’te Sonsuz Kaydırma: Intersection Observer ile Uygulama

Modern web uygulamaları, kullanıcı deneyimini iyileştirmek için çeşitli teknikler kullanır. Bunlardan biri de **sonsuz kaydırma** (infinite scroll) olarak bilinen tekniktir. Bu teknik, kullanıcı sayfayı aşağı kaydırdıkça daha fazla içerik yüklemeyi sağlar, böylece kullanıcı sayfayı yeniden yüklemek zorunda kalmadan tüm içeriğe erişebilir. React’te sonsuz kaydırma uygulamanın en yaygın yolu **Intersection Observer API’sini** kullanmaktır.

Intersection Observer API’si Nedir?

Intersection Observer API’si, bir HTML elemanının, belirli bir ebeveyn veya pencere görünüm bölgesi içinde olup olmadığını ve varsa ne kadar görünür olduğunu gözlemlemek için tasarlanmıştır. Bu API, sonsuz kaydırma uygulamaları için çok kullanışlıdır çünkü bir elemanın görünür olup olmadığını belirlemek ve daha fazla içerik yüklemek için kullanılabilir.

React’te Sonsuz Kaydırma Uygulaması

React’te sonsuz kaydırma uygulaması, temel olarak aşağıdaki adımlardan oluşur:

1. **Veri Yükleme:** İçeriğinizi bir API veya başka bir kaynaktan yüklemek için bir fonksiyon oluşturun.
2. **Görünüm Alanını Gözlemleme:** Intersection Observer API’sini kullanarak, daha fazla içerik yüklemek için bir elemanın görünür olup olmadığını gözlemleyin.
3. **Yeni İçerik Yükleme:** Eleman görünür olduğunda, yeni içerikleri API’den veya kaynaktan yükleyin ve mevcut listeye ekleyin.

Örnek Uygulama

İşte basit bir sonsuz kaydırma uygulaması örneği:

“`jsx
import React, { useState, useEffect, useRef } from ‘react’;

const App = () => {
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);

const observerRef = useRef(null);

useEffect(() => {
const fetchMoreData = async () => {
setIsLoading(true);
const response = await fetch(‘/api/items’);
const data = await response.json();
setItems([…items, …data]);
setHasMore(data.length > 0);
setIsLoading(false);
};

const handleObserver = (entries) => {
const target = entries[0];
if (target.isIntersecting) {
fetchMoreData();
}
};

observerRef.current = new IntersectionObserver(handleObserver, { threshold: 1 });

return () => {
if (observerRef.current) {
observerRef.current.disconnect();
}
};
}, [items]);

useEffect(() => {
const target = document.querySelector(‘.list-item-last’);
if (target) {
observerRef.current.observe(target);
}
}, [items]);

return (

);
};

export default App;
“`

Bu örnekte:

* `items` durum değişkeni, mevcut içerik listesini depolar.
* `isLoading` durum değişkeni, yeni içerik yükleme işleminin devam edip etmediğini belirtir.
* `hasMore` durum değişkeni, daha fazla içerik olup olmadığını belirtir.
* `observerRef` bir referanstır ve Intersection Observer nesnesini tutar.
* `useEffect` hook’u, ilk veriyi yükler ve gözlemciyi ayarlar.
* `handleObserver` fonksiyonu, bir elemanın görünüp görünmediğini kontrol eder ve gerekirse yeni içerik yükler.
* `list-item-last` sınıfına sahip son liste elemanı, gözlemcinin hedefidir.

Bu kod, kullanıcı sayfayı aşağı kaydırdıkça yeni içeriklerin yüklenmesini sağlar. Intersection Observer API’si, son liste elemanının görünür olup olmadığını kontrol eder ve görünür olduğunda, daha fazla içerik yüklemek için `fetchMoreData` fonksiyonunu çağırır.

Ek Bilgiler

* Intersection Observer API’si, kullanıcının internet bağlantısı yavaşsa veya sunucudan daha fazla içerik yüklenirken, performans sorunlarına neden olabilir.
* Sonsuz kaydırma uygularken, sayfayı doğru bir şekilde kaydırma deneyimi sunmak için kullanıcının kaydırma hızını ve sayfanın yüklenme hızını da dikkate almak önemlidir.
* **[fatihsoysal.com](https://fatihsoysal.com/)** sitesinden daha fazla React öğreticisine ve ipuçlarına erişebilirsiniz.

Özet

Intersection Observer API’si, React uygulamalarında sonsuz kaydırma uygulamak için güçlü bir araçtır. Kullanımı kolay ve performans açısından verimlidir. Bu makalede, Intersection Observer API’sini kullanarak React’te sonsuz kaydırma nasıl uygulanacağını açıkladık. Örnek kod ve ek bilgilerle birlikte, kendi sonsuz kaydırma uygulamalarınızı geliştirebilirsiniz.

#Etiketler: React, Sonsuz Kaydırma, Intersection Observer, API, Web Geliştirme, Kullanıcı Deneyimi