"use client" import React, { useState, useCallback, useEffect, useRef } from 'react' import InfiniteScrollingComponent from './component/InfiniteScrollingComponent' import './style.css' interface DataItem { id: number; content: string; } // Mock API function to simulate data fetching const fetchMoreData = async (page: number, pageSize: number = 10): Promise => { // Simulate API delay await new Promise(resolve => setTimeout(resolve, 1000)); const startId = (page - 1) * pageSize + 1; return Array.from({ length: pageSize }, (_, index) => ({ id: startId + index, content: `Item ${startId + index}` })); } const Skeleton = () => (

); const EmptyState = () => (

No more items to load

); const InfiniteScrollingDemo = () => { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const [hasMore, setHasMore] = useState(true); const [page, setPage] = useState(1); const maxItems = 100; const loadMoreData = useCallback(async () => { if (loading || !hasMore) return; setLoading(true); try { const newData = await fetchMoreData(page); if (data.length + newData.length >= maxItems) { setHasMore(false); } setData(prev => [...prev, ...newData]); setPage(prev => prev + 1); } catch (error) { console.error('Error loading more data:', error); } finally { setLoading(false); } }, [data.length, loading, hasMore, page]); // Load initial data, exactly once. // // `loadMoreData` is rebuilt whenever page/data/loading change, so listing it // as a dependency would fetch the next page forever. An empty array silenced // that but had its own flaw: StrictMode invokes mount effects twice, and both // runs read `loading === false` before either commits, so page 1 was fetched // twice in development. The ref settles both — the dependency is honest and // the body still runs once. const didLoadInitial = useRef(false); useEffect(() => { if (didLoadInitial.current) return; didLoadInitial.current = true; loadMoreData(); }, [loadMoreData]); return (

} endMessage={} > {data.map(item => (

{item.content}

))}

) } export default InfiniteScrollingDemo;