Добрый день, я пытаюсь добавить что-то похожее на infinite scroll к

списку элементов с pagination. надо чтобы дойдя до последнего элемента, оно перешло на следующую "страницу".
<div className={cn("w-col w-col-4", styles.info_container)} >
<div className={styles.property_container} onScroll={()=> {
console.log('scrolling!');
}}>
{pagedListings.map((property) => (
<Property
key={property.id}
id={property.id}
price={property.original_price}
imgUrl={property.medium_photo_url}
address={property.address}
permalink={property.permalink}
bedRooms={property.total_bedrooms}
bathRooms={property.total_full_baths}
acre={property.acre}
handleClick={handleClick}
/>
))}
{!pagedListings.length && (
<h2 className={styles.no_result}>No Result</h2>
)}
</div>
<ReactPaginate
previousLabel={previousSVG}
nextLabel={nextSVG}
breakLabel="..."
breakClassName="break-me"
pageCount={pageCount}
marginPagesDisplayed={1}
pageRangeDisplayed={4}
containerClassName="pagination"
subContainerClassName="pages pagination"
activeClassName="active"
initialPage={0}
onPageChange={handlePageClick}
/>
</div>

подключил console.log() к onScroll. дальше не понятно что делать. мне нужны refs и react-dom или можно что-то поумнее придумать?

(Сорри, код сложно в сообщении читать с телефона) Я бы сделал так: Повесил бы ref на лист контейнер На скролл бы бы повесил коллбек с троттлом на animationframe а лучше миллисекунд на 200 Внутри коллбека брал бы boundingClientRect у последнего элемента, который ты можешь найти в контейнере. Дальше на основе данных смотрел бы грузить или нет

Делается просто и умно если использовать rxjs) впринципе без него тоже не очень геморно Если ожидается, что лист очень большой будет то лучше посмотреть на virtual table/list компонент какой нить опенсорсный, там конечно со всем этим будет посложнее Если хочется обойтись без reflow от geboundingclientrect, то можно записывать на обновление листа положение последнего элемента и без троттла (но лучше все же с троттлом) обновлять его используя ивент скролла (там всякие дельты должны быть) (только вне стейта компонента обновлять, пожалуйста) и производить дальнейшие действия уже с готовым значением.