useInfiniteScroll
بارگذاری تدریجی با IntersectionObserver — بدون scroll event listener
معرفی
هوک useInfiniteScroll یک sentinelRef ارائه میدهد که وقتی المان مرجع وارد viewport میشود، تابع onLoadMore را فراخوانی میکند. از IntersectionObserver استفاده میکند و عملکرد بهینهای نسبت به scroll event دارد.
چه زمانی استفاده کنیم
- لیستهای طولانی با pagination (اینفلوئنسرها، پستها، نظرات)
- جدولهای داده با بارگذاری تدریجی
- گالری تصاویر یا کارتها
چه زمانی استفاده نکنیم
- لیستهای کوتاه (کمتر از ۵۰ آیتم) — pagination معمولی کافی است
- وقتی کاربر باید بتواند مستقیماً به صفحه خاصی برود → از PaginationControlled استفاده کنید
استفاده
import { useInfiniteScroll } from '@parto-system-design/ui'
function InfluencerList() {
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(...)
const { sentinelRef } = useInfiniteScroll({
onLoadMore: () => fetchNextPage(),
hasMore: hasNextPage,
isLoading: isFetchingNextPage,
})
return (
<div className="space-y-4">
{data.pages.flat().map((item) => (
<ProfileCard key={item.id} {...item} />
))}
{/* المان sentinel — وقتی وارد viewport شود، صفحه بعدی بارگذاری میشود */}
<div ref={sentinelRef} />
{isFetchingNextPage && <Spinner className="mx-auto" />}
</div>
)
}پارامترها
| پارامتر | نوع | پیشفرض | توضیح |
|---|---|---|---|
onLoadMore | () => void | — | تابعی که هنگام رسیدن به sentinel فراخوانی میشود |
hasMore | boolean | — | آیا داده بیشتری برای بارگذاری وجود دارد |
isLoading | boolean | false | جلوگیری از فراخوانی مجدد هنگام بارگذاری |
rootMargin | string | "200px" | فاصله پیشبارگذاری قبل از رسیدن به sentinel |
threshold | number | 0 | درصد نمایان بودن sentinel برای فعالسازی |
مقدار بازگشتی
| فیلد | نوع | توضیح |
|---|---|---|
sentinelRef | React.RefCallback<HTMLElement> | ref برای اتصال به المان sentinel |
هوکهای مرتبط
- برای debounce کردن جستجو قبل از بارگذاری → useDebounce
- برای قفل اسکرول هنگام باز بودن modal → useScrollLock