React’te Sonsuz Kayd\u0131rma: Intersection Observer ile Uygulama<\/p>\n
Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in \u00e7e\u015fitli teknikler kullan\u0131r. Bunlardan biri de **sonsuz kayd\u0131rma** (infinite scroll) olarak bilinen tekniktir. Bu teknik, kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a daha fazla i\u00e7erik y\u00fcklemeyi sa\u011flar, b\u00f6ylece kullan\u0131c\u0131 sayfay\u0131 yeniden y\u00fcklemek zorunda kalmadan t\u00fcm i\u00e7eri\u011fe eri\u015febilir. React’te sonsuz kayd\u0131rma uygulaman\u0131n en yayg\u0131n yolu **Intersection Observer API’sini** kullanmakt\u0131r.<\/p>\n
Intersection Observer API’si, bir HTML eleman\u0131n\u0131n, belirli bir ebeveyn veya pencere g\u00f6r\u00fcn\u00fcm b\u00f6lgesi i\u00e7inde olup olmad\u0131\u011f\u0131n\u0131 ve varsa ne kadar g\u00f6r\u00fcn\u00fcr oldu\u011funu g\u00f6zlemlemek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu API, sonsuz kayd\u0131rma uygulamalar\u0131 i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r \u00e7\u00fcnk\u00fc bir eleman\u0131n g\u00f6r\u00fcn\u00fcr olup olmad\u0131\u011f\u0131n\u0131 belirlemek ve daha fazla i\u00e7erik y\u00fcklemek i\u00e7in kullan\u0131labilir.<\/p>\n
React’te sonsuz kayd\u0131rma uygulamas\u0131, temel olarak a\u015fa\u011f\u0131daki ad\u0131mlardan olu\u015fur:<\/p>\n
1. **Veri Y\u00fckleme:** \u0130\u00e7eri\u011finizi bir API veya ba\u015fka bir kaynaktan y\u00fcklemek i\u00e7in bir fonksiyon olu\u015fturun.
\n2. **G\u00f6r\u00fcn\u00fcm Alan\u0131n\u0131 G\u00f6zlemleme:** Intersection Observer API’sini kullanarak, daha fazla i\u00e7erik y\u00fcklemek i\u00e7in bir eleman\u0131n g\u00f6r\u00fcn\u00fcr olup olmad\u0131\u011f\u0131n\u0131 g\u00f6zlemleyin.
\n3. **Yeni \u0130\u00e7erik Y\u00fckleme:** Eleman g\u00f6r\u00fcn\u00fcr oldu\u011funda, yeni i\u00e7erikleri API’den veya kaynaktan y\u00fckleyin ve mevcut listeye ekleyin.<\/p>\n
\u0130\u015fte basit bir sonsuz kayd\u0131rma uygulamas\u0131 \u00f6rne\u011fi:<\/p>\n
“`jsx
\nimport React, { useState, useEffect, useRef } from ‘react’;<\/p>\n
const App = () => {
\n const [items, setItems] = useState([]);
\n const [isLoading, setIsLoading] = useState(false);
\n const [hasMore, setHasMore] = useState(true);<\/p>\n
const observerRef = useRef(null);<\/p>\n
useEffect(() => {
\n const fetchMoreData = async () => {
\n setIsLoading(true);
\n const response = await fetch(‘\/api\/items’);
\n const data = await response.json();
\n setItems([…items, …data]);
\n setHasMore(data.length > 0);
\n setIsLoading(false);
\n };<\/p>\n
const handleObserver = (entries) => {
\n const target = entries[0];
\n if (target.isIntersecting) {
\n fetchMoreData();
\n }
\n };<\/p>\n
observerRef.current = new IntersectionObserver(handleObserver, { threshold: 1 });<\/p>\n
return () => {
\n if (observerRef.current) {
\n observerRef.current.disconnect();
\n }
\n };
\n }, [items]);<\/p>\n
useEffect(() => {
\n const target = document.querySelector(‘.list-item-last’);
\n if (target) {
\n observerRef.current.observe(target);
\n }
\n }, [items]);<\/p>\n
return (<\/p>\n
))}
\n {hasMore && (<\/p>\n
)}\n <\/ul>\n<\/p><\/div>\n
);
\n};<\/p>\n
export default App;
\n“`<\/p>\n
Bu \u00f6rnekte:<\/p>\n
* `items` durum de\u011fi\u015fkeni, mevcut i\u00e7erik listesini depolar.
\n* `isLoading` durum de\u011fi\u015fkeni, yeni i\u00e7erik y\u00fckleme i\u015fleminin devam edip etmedi\u011fini belirtir.
\n* `hasMore` durum de\u011fi\u015fkeni, daha fazla i\u00e7erik olup olmad\u0131\u011f\u0131n\u0131 belirtir.
\n* `observerRef` bir referanst\u0131r ve Intersection Observer nesnesini tutar.
\n* `useEffect` hook’u, ilk veriyi y\u00fckler ve g\u00f6zlemciyi ayarlar.
\n* `handleObserver` fonksiyonu, bir eleman\u0131n g\u00f6r\u00fcn\u00fcp g\u00f6r\u00fcnmedi\u011fini kontrol eder ve gerekirse yeni i\u00e7erik y\u00fckler.
\n* `list-item-last` s\u0131n\u0131f\u0131na sahip son liste eleman\u0131, g\u00f6zlemcinin hedefidir.<\/p>\n
Bu kod, kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a yeni i\u00e7eriklerin y\u00fcklenmesini sa\u011flar. Intersection Observer API’si, son liste eleman\u0131n\u0131n g\u00f6r\u00fcn\u00fcr olup olmad\u0131\u011f\u0131n\u0131 kontrol eder ve g\u00f6r\u00fcn\u00fcr oldu\u011funda, daha fazla i\u00e7erik y\u00fcklemek i\u00e7in `fetchMoreData` fonksiyonunu \u00e7a\u011f\u0131r\u0131r.<\/p>\n
* Intersection Observer API’si, kullan\u0131c\u0131n\u0131n internet ba\u011flant\u0131s\u0131 yava\u015fsa veya sunucudan daha fazla i\u00e7erik y\u00fcklenirken, performans sorunlar\u0131na neden olabilir.
\n* Sonsuz kayd\u0131rma uygularken, sayfay\u0131 do\u011fru bir \u015fekilde kayd\u0131rma deneyimi sunmak i\u00e7in kullan\u0131c\u0131n\u0131n kayd\u0131rma h\u0131z\u0131n\u0131 ve sayfan\u0131n y\u00fcklenme h\u0131z\u0131n\u0131 da dikkate almak \u00f6nemlidir.
\n* **[fatihsoysal.com](https:\/\/fatihsoysal.com\/)** sitesinden daha fazla React \u00f6\u011freticisine ve ipu\u00e7lar\u0131na eri\u015febilirsiniz.<\/p>\n
Intersection Observer API’si, React uygulamalar\u0131nda sonsuz kayd\u0131rma uygulamak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Kullan\u0131m\u0131 kolay ve performans a\u00e7\u0131s\u0131ndan verimlidir. Bu makalede, Intersection Observer API’sini kullanarak React’te sonsuz kayd\u0131rma nas\u0131l uygulanaca\u011f\u0131n\u0131 a\u00e7\u0131klad\u0131k. \u00d6rnek kod ve ek bilgilerle birlikte, kendi sonsuz kayd\u0131rma uygulamalar\u0131n\u0131z\u0131 geli\u015ftirebilirsiniz.<\/p>\n
#Etiketler: React, Sonsuz Kayd\u0131rma, Intersection Observer, API, Web Geli\u015ftirme, Kullan\u0131c\u0131 Deneyimi<\/p>\n","protected":false},"excerpt":{"rendered":"React’te Sonsuz Kayd\u0131rma: Intersection Observer ile Uygulama Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in \u00e7e\u015fitli teknikler kullan\u0131r. Bunlardan…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3796","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n