Комментарии 11
Бесконечный скролл ограниченный 100 элементами, мдам. Почему-то решили, что 7 элементов подойдут для любого размера экрана. Капитально сломали инерциальный скролл. Плюс в браузерах без поддержки привязки скролла (привет Сафари) будут постоянные скачки контента.
Почему нужно делать вот так
useEffect(()=>{...} )
а не просто прописать свойство onScroll
Пожалуйста изучи все хуки реакта, это очень важно. useEffect с пустым массивом зависимостей выполнится только один раз — при первом рендеринге. Без использования useEffect event listener будет перезаписывать я при каждом рендеринге. Так же обрати внимание что в колбэке useEffect возвращается функция. Она выполняется перед новым выполнением хука и при размонтировании компонента (когда он больше не используется). В данном примере автор очищает event listener, который больше не нужен.
Почему "infinity scroll", а не "infinite scroll"? Infinity - существительное.
Я не просто доколупываюсь, у меня повод есть. Как-то в ревью нашему синьору написал похожий вопрос (про Infinity loader), а он проигнорил. Вот у меня с тех пор сомнение, может, я что-то отчаянно глупое спросил?
Также бесконечный скролл + виртуализация является достойной альтернативой пагинации и другим технологиям, которые предполагают выдачу информации порциями.
Надеюсь для изобретателей бесконечного скролла в аду предусмотрен отдельный котел с бесконечным ростом температуры.
Советую вам почитать про keyset пагинацию, идеальное решение для бесконечной прокрутки. Особенно для базы данных, да и на фронте ее проще имплементировать.
А почему не стал использовать Intersection observer?
Хотел продемонстрировать работу без этой технологии. С IO дела, кончено же, обстоят лучше.
Более подробно вы можете ознакомиться, например, в этой статье: https://www.google.com/amp/s/habr.com/ru/amp/publications/316136/
Infinite scroll (бесконечный скролл) +Virtualization (виртуализация) на примере ReactJS+ RTK Query