Reactで下までスクロールしたら次の分を取得して表示するのを <a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank">IntersectionObserver</a> を使ってやってみました。

IntersectionObserverに関する説明はこちらの記事がわかりやすかったです。  
<a href="https://ics.media/entry/190902/" target="_blank">JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA</a>

<iframe src="https://codesandbox.io/embed/infinite-scroll-react-intersectionobserver-lazy-load-n61ts0?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="infinite-scroll-react-IntersectionObserver(lazy load)"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>