Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To build infinite scroll in React, place a sentinel after the loaded items and use an IntersectionObserver to detect when it enters the viewport or a scrollable container. When it intersects, request the next page—provided there is more data and no request is already in flight. The observer detects visibility; your data layer still needs to fetch and paginate results.
How the component works
- Keep the accumulated items, page number or cursor, loading state, and whether more data is available in the component or data-fetching layer.
- Render a small sentinel element after the list and attach a ref to it. A dedicated, stable DOM node avoids tying observation to a changing item index.
- In an effect, create an
IntersectionObserverand observe the sentinel. Request another page only when its entry is intersecting, more data is available, and no request is pending. - Merge the response into the existing items and update the page or cursor and the “has more” state using the data source’s response.
- Disconnect the observer in the effect cleanup, and stop observing when the feed is exhausted.
The Intersection Observer API asynchronously reports changes in a target’s intersection with a root, which can be the viewport or a specified element. It is a visibility trigger, not a pagination or fetching mechanism. React’s effect lifecycle is the place to synchronize with this browser API and clean it up.
Choose the observer root and when to trigger
For a page that scrolls normally
Omit the observer’s root option or set it to null to measure intersection against the document viewport.
For a scrollable panel
Set root to the panel’s scrollable element. The sentinel must be a descendant of that root; otherwise, it cannot be observed relative to the panel.
#1 Best Overall
For earlier or later loading
Use rootMargin to expand or shrink the effective root bounds. A positive bottom margin can start loading before the sentinel reaches the visible edge, giving a request more time to complete. The default threshold is zero, so intersection or contact with the root boundary can trigger a callback; a threshold of 1.0 requires the entire target to be visible. For a small sentinel, a full-visibility threshold may delay loading unnecessarily.
The observer callback receives entries. Check the entry for your sentinel and its isIntersecting value before requesting data. Disconnect the observer or unobserve the target when it is no longer needed.
Prevent duplicate requests and handle failures
A sentinel can remain visible across renders, and the observer may invoke its callback again while a request is pending. Guard the request itself, not just the visibility callback, so overlapping requests cannot append duplicate pages or advance pagination inconsistently. Keep the guard in sync with the request lifecycle; a state value alone may not prevent two callbacks from starting work before React commits an update.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Represent loading, error, and end-of-feed states explicitly. If a request fails, provide a retry path rather than leaving the sentinel unable to trigger another attempt. When there is no more data, stop observing or otherwise ensure the callback cannot continue requesting pages.
If an effect depends on pagination state or a request callback, make sure the observer uses current values. Update or recreate it as needed, and ensure prior observers are disconnected so stale callbacks do not remain attached.
Keep fetching separate from rendering performance
Pagination limits how much data is fetched at a time; it does not limit how many accumulated rows remain rendered. As the feed grows, every loaded item may still occupy the DOM and participate in rendering work.
React’s performance guide recommends “windowing” for long lists of data—hundreds or thousands of rows—by rendering only a subset at a time. That range is an example, not a universal threshold. Measure the application and consider a compatible windowing approach if rendering the accumulated list becomes costly. Windowing and pagination solve different problems: one limits rendered rows, the other fetches data in pages.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11React’s current Fragment documentation also describes sharing one IntersectionObserver per configuration as a performance optimization when observing many targets. A single end sentinel usually needs just one observer; avoid creating an unbounded number for a feed.
Best Value
When a scroll listener makes sense
A manual scroll listener can suit cases where the trigger depends on custom scroll calculations, but scroll events may fire at high rates. Avoid expensive work in the handler. MDN recommends IntersectionObserver when threshold-based detection fits; wrapping a scroll handler in requestAnimationFrame alone does not meaningfully throttle it. If a listener is genuinely necessary, use measured timeout-based throttling and clean up the listener with the component lifecycle.
Preserve keyboard access and provide meaningful loading, error, and end-of-feed feedback in line with your application’s accessibility requirements. The cited React and MDN references do not establish a specific announcement pattern for this component.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
