Build Infinite Scroll with IntersectionObserver & Skeleton

Question

Accepted Answer

**Requirements**
- Fetch pages (`/api/feed?page=n&limit=20` mock) and append; show skeleton loaders while fetching.
- Sentinel div at bottom observed via `IntersectionObserver` (rootMargin 200px) triggers next fetch.
- Guards: don’t fetch if already loading or no more pages; handle error with Retry.
- Bonus: virtualize after 200 items; scroll restoration.

**Architecture**
- `page` + `items` + `hasMore` + `loading` refs. `observer = new IntersectionObserver(([e])=> e.isIntersecting && !loading && hasMore && loadNext(), {rootMargin:"200px"})`.
- `loading` as ref to avoid stale closure; disconnect on unmount.
- Skeleton: shimmer blocks matching card height to prevent CLS.

**What interviewers look for:** IntersectionObserver vs scroll event, sentinel pattern, in-flight guard, cleanup, error/retry, no duplicate fetch on fast scroll.

**Reference implementation**
```jsx
function useInfinite(fetchPage) {
  const [items, setItems] = React.useState([]);
  const [page, setPage] = React.useStat

Build Infinite Scroll with IntersectionObserver & Skeleton

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.