Infinite Scroll & Virtualization
Why it matters
Rendering every feed item to the DOM at once sends scroll performance into the ground once a user accumulates a few hundred posts — main-thread jank on scroll, layout thrash on image loads, and memory spikes on mobile that trigger tab kills. A Load More button solves the data problem but still leaves the old DOM nodes parked in memory, and a naive infinite scroll without windowing just accelerates the collapse. Engagement metrics track directly to feed responsiveness.
Severity rationale
Low because the feed still functions — degradation is felt only on long sessions with heavy feeds, not on first load.
Remediation
Wire an Intersection Observer sentinel to fetchNextPage from useInfiniteQuery, and wrap the rendered list in a windowing component like react-virtual or FixedSizeList so only the viewport-visible rows live in the DOM. This keeps scroll at 60fps regardless of feed length. See components/Feed.tsx:
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({ queryKey: ['feed'], queryFn, getNextPageParam: p => p.nextCursor })
const { ref } = useInView({ onChange: v => v && hasNextPage && fetchNextPage() })
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Social Features & Engagement Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from community-social-engagement·automated