Description

Often times when making social media like apps you will want a feed that the user can scroll through forever. This can be done paired with the Virtualized lists and Intersection Observer API
?

Reach for when

You want the user to have an infinite never ending scroll experience

Visualization

Pseudocode

Virtual List
	SentinelDiv - IntersectionObserver
		When div->viewport fetchNext()
	Append
		Item
		Item
		Item

Code

useEffect(() => {
  const observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting && hasMore && !isLoading) fetchNextPage();
  }, { rootMargin: '500px' });
  
  if (sentinelRef.current) observer.observe(sentinelRef.current);
  
  return () => observer.disconnect();
}, [hasMore, isLoading]);