Which technique is commonly used to implement infinite scroll in a React component?

Which technique is commonly used to implement infinite scroll in a React component?

• A. Maintaining page and limit state and fetch per page.
• B. Using document.write to append items.
• C. Using a timer to fetch data at regular intervals.
• D. Using an IntersectionObserver to detect the end of the list and load more.

Answer: (D)

Implement infinite scroll by using an IntersectionObserver to detect when the end of the list becomes visible. You place a small sentinel element at the bottom of your list and observe it with IntersectionObserver. When the sentinel enters the viewport, you trigger loading the next page of data, append it to the current items, and then continue observing so more data loads as the user keeps scrolling. This approach ties data loading directly to the user’s scrolling behavior, avoids unnecessary polling, and works smoothly with React’s rendering lifecycle. Other approaches are less suitable: polling with a timer can waste resources and fetch data even if the user isn’t near the bottom; manipulating the DOM with document.write is inappropriate in React and can break the component tree; simply maintaining page and limit state requires manual triggers or additional logic to know when to fetch, whereas IntersectionObserver provides a clean, event-driven signal based on actual visibility.

Implement infinite scroll by using an IntersectionObserver to detect when the end of the list becomes visible. You place a small sentinel element at the bottom of your list and observe it with IntersectionObserver. When the sentinel enters the viewport, you trigger loading the next page of data, append it to the current items, and then continue observing so more data loads as the user keeps scrolling. This approach ties data loading directly to the user’s scrolling behavior, avoids unnecessary polling, and works smoothly with React’s rendering lifecycle.

Other approaches are less suitable: polling with a timer can waste resources and fetch data even if the user isn’t near the bottom; manipulating the DOM with document.write is inappropriate in React and can break the component tree; simply maintaining page and limit state requires manual triggers or additional logic to know when to fetch, whereas IntersectionObserver provides a clean, event-driven signal based on actual visibility.