Динамическая пагинация на React JS. Подгрузка при скролле страницы React JS

В этом уроке мы сделаем динамическую пагинацию, другими словами подгрузку данных при скролле страницы на React js.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - www.qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

[@BorderInVais]

Откровенно говоря, я на этом канале встречаю то, что действительно интересно увидеть и посмотреть. Канал просто пушка. Удачи и благополучия:)

[@profidev_js]

Ох парень, ты как всегда. Ролик на 10 минут, но все четко. По делу, и с комментариями. Приятно следить!

[@pavelsh6531]

Спасибо за урок динамической пагинации на React!

[@dieu-merci]

Большое спасибо за такой контент, быстро, кратко и по делу. Надеюсь у вас в жизни все будет хорошо

[@user-sd9je7ov8o]

Как всегда полезно, сжато, но ёмко!

[@alexanderbudzko5516]

Супер-полезный канал, спасибо большое!!!

[@user-zo6gw8mz7g]

Спасибо за урок! Уже несколько раз применяю данный метод в рабочем проекте

[@vasyl_ua356]

Привет! Очень полезноє видео как и контент канала! Спасибо что уделяєш время интересным и обучающим видео!

[@happydamage2614]

Спасибо, как всегда материал огонь

[@annes1610]

лайк, ролик топ! решал проблему и тут прям все есть. автору респект!

[@DenInside]

Бро, ты супер. Спасибо тебе большое.

[@garry007gorets7]

Очень крутой контент, спасибо)

[@user-pp7cc3yf9s]

Как всегда - лучший!

[@vladyslavfx3892]

Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.

[@nelson6783]

отличный материал!!!

[@motivation_upp]

Если после добавления общего количества страниц контент при скролле не загружается, то во втором useEffect вторым аргументом нужно передать не пустой массив, а totalCount: useEffect(() => { document.addEventListener('scroll', scrollHandler); return () => { document.removeEventListener('scroll', scrollHandler) } }, [totalCount])

[@yaroslav8609]

спасибо!

[@skily4866]

Спасибо, у меня новые данные не приходили в scrollHandler, а теперь работает

[@skily4866]

и там надо не только totalCount но и те объекты что мы получаем, чтобы сравнение работало для конца скролла

[@pervertedhero7438]

Спасибо тебе ! Выручил

[@user-zt3rs8rc9j]

всем лойсы, комменты в жилу!

[@BigBigLeo]

Спасибо, отличный материал.

[@UlbiTV]

Благодарю!

[@vana__f7570]

большое спасибо ulbi tv

[@pixelwinner]

Лучшее видео в своем роде.

[@Infinity-zf8ms]

Спасибо за видео)

[@ivanbag9741]

Спасибо!!!👍

[@sergeysamius1128]

Спасибо за видео

[@disposables72]

Неплохо. Лёгкий ненапряжный урок.

[@UlbiTV]

Благодарю, стараюсь для вас)

[@feodoraxis]

Спасибо за полезное видео. Очень помогли

[@petrvictorovich]

Бомболейло! Теперь такое прикручу куда угодно!

[@alexandrelagin5490]

Просто шикарно, не большой ролик, тема хорошо раскрыта, всё чётко и понятно и нет воды. Популярна тема среди зарубежных ютуберов - разработка клона какого-то приложения, подумайте над этим вариантом. Кого можете посоветовать из англоязычных авторов ? из ютуба или юдеми. Даже не могу представить, сколько времени у вас уходит на создание видео в таком режиме, очень часто они выходят, лишь бы вы не выгорели, не забывайте отдыхать!

[@UlbiTV]

Спасибо друг!) Я сам давно уже не смотрю ролики, как то времени не хватает, только по конкретным темам, поэтому наврядли кого то посоветую) Отдыхать успеваю, хотя хотелось бы побольше!) Спасибо вам!

[@user-nm4xu4cz7j]

Интересная информация 👍

[@UlbiTV]

Благодарю!)

[@andteslenko]

Зашел поставил лайк, спс за инфу

[@UlbiTV]

Спасибо друг, ценю!)

[@mixfix86]

очень годно! очень!

[@Affrit]

Спасибо бро

[@lydiehenckes6051]

Спасибо!

[@MK-td2dt]

Спасибо помог !

[@konstantinzhirnov3013]

Спасибо. Отличное видео про динамическую пагинацию. React рулит.

[@UlbiTV]

Спасибо, Константин!

[@meristenuskeev6985]

Супер

[@saidmalikallayarov4104]

Очень помог

[@user-bd4lw9hx3s]

Бля, чел, я работаю и пользуюсь твоими видосами. Просто кайф, что можно не ебать себе мозги по поводу таких штук и сосредоточиться на других, еще не решенных задачах. Красава)) Лайк

[@artempavlenko5147]

Курто, полезно ! Благодарен. #reactjs

[@UlbiTV]

Благодарю вас!)

[@vladislav_pikiner]

в поддержку топового канала

[@user-uq7jo6tm8z]

лайк за пагинацию

[@alexalex-zh4ep]

спасибо.

[@tohirasadov689]

Best all the best

[@shiryaev585]

В самом конце у автора опечатка: в проверке scrollHandler должно быть photos.length === totalCount, а не photos.length < totalCount PS Отличный урок, огромное спасибо

[@itpro952]

Спасибо за видео. Насколько знаю у такой пагинации есть траблы с СЕО оптимизацией, особенно у яндекса, поэтому в каких то интернет магазинах лучше делать классическую постраничную пагинацию, ну это так, на случай если кому то понадобится

[@UlbiTV]

Возможно) Честно говоря с СЕО не особо знаком

[@TheProfessionalGambler]

У любом спа траблы с сео. Потому что по факту у тебя страница с одним div#root и скриптами. Это решается ssr и другими вариантами.

[@Vlad-us9xt]

top

[@littlegrownbeats]

Великолепное видео, попробовал, просто и круто, благодарность автору!)

[@user-dw8lb8lc7u]

Гигант не только мысли, но и дела

[@UlbiTV]

Ну прям гигант)) спасибо!)

[@thegulpofenglish4131]

Как всегда спасибо) единственное хотел задать вопрос: что нужно делать чтоб typescript не ругался на unexpected arrow functions ( функция onLoad по дефолту в твоем видео) ?

[@rert5575]

its cool

[@user-vg2fp8oi6x]

А что делать, если у меня в запросе на сервер помимо currentPage есть и другие запросы, например sort , который тоже меняется? И + запрос хранится в reducer(redux-thunk)

[@Asgyr]

есть ссылка на гит данного урока ?

[@ipa_stor]

Как всегда отлично преподнес информацию, спасибо, полезная штука. И тут появился вопрос - я сейчас балуюсь со switch кейсом, а именно собрал несколько вариантов для показа страницы (в зависимости от значения view меняется контент, идея в том, чтобы обернуть контент в приятную анимацию и фактически убрать переходы по страницам) и соответственно вопрос, разумно ли было бы использовать динамическую пагинацию и хранить данные на том же mongodb, а погружать при смене значения view? Это исключительно теоретический вопрос, поскольку, понятное дело запросы и ответы будут требовать времени и могут ловить лишние ошибки. Просто интересно, где еще, кроме погрузки фактического контента можно использовать этот инструмент... Мне пришло в голову только возможность догружать темы, скажем, если взять тот же проект с mern-cloud-disc, то добавлять персональные темы, а настройки хранить под ключом юзера. Сорри за большой текст:)

[@ipa_stor]

Значение view храню в state*

[@UlbiTV]

Большой текст это всегда круто, значит человеку действительно интересно) пиши столько, сколько считаешь нужным, всегда постараюсь ответить) Ну вообще, конкретно вот такая пагинация нужна только лишь для подгрузки поэтапной каких то данных, другой кейс даже придумать не могу)

[@user-ge2qk4cm1j]

+

[@user-kr9gm6pi6w]

Спасибо за видео. Тимур а сможете показать как реализовать SideBar с навигацией, с выпадающими списками, с активным роутом и т.д. , например как у ютуб)

[@ipa_stor]

Сразу оговорюсь, что я новичок, а потому сомневаюсь в своем ответе, да и не уверен, о том ли спрашивали, но в курсе про клауд диск на канале есть очень понятные объяснения как делать навигацию с роутами(при помощи react-router-dom), кстати, он же позволяет упростить создание и работу с попап(если нужен выпадающий поверх сайдбар), но если нужен сдвиг контента, то я бы описал 2 класса в CSS и использовал state, как триггер(в том же курсе, видео про loader очень понятно объясняет)... Но дождемся ответа спецов:))))

[@UlbiTV]

И вам спасибо за комментарий, Максим) есть видео про бургер меню, там та же навигация по сути) Но вообще что то связанное с грамотной навигацией я сниму наверное чуть позже)

[@UlbiTV]

@@ipa_stor да ты все правильно сказал)) спасибо!)

[@ipa_stor]

@@UlbiTV все видео с канала:))) помогают

[@UlbiTV]

@@ipa_stor Очень приятно это слышать, постараюсь сделать еще как можно больше полезных видео) Скоро будет полный курс по MobX

[@yarikpetrenko]

Интересует как подобное реализовать на Next JS. Я так понимаю данный метод не подойдет ибо рендеринг будет только на стороне клиента. А решений без перехода на другую страницу я так и не нашел.

[@user-lx4ox4vk1m]

Допустим я подгрузил несколько пользователей 20 штук , хочу удалить первых 2 , они удалятся из базы данных но не в реальном времени удалятся только после перезагрузки страницы , я не могу понять как это можно сделать

[@user-bj8rh7mb9m]

Еще вопрос, на сколько правильно в реакт приложении использовать document?

[@bigenough2122]

Привет! Крутые видео, спасибо. Ты будто чувствуешь что нужно) Хотел узнать, работал ли со styled-component?

[@UlbiTV]

Привет, спасибо большое) со styled component не работал, не приходилось)

[@bigenough2122]

@@UlbiTV понял. Было бы интересно узнать твоё мнение, как будет свободное время) Несколько раз на пед проектах пытаюсь подключить, но что-то не заходит, хотя идея интересная. Стили прям в компоненте. Но появляется проблема, когда много стилей, компонента превращается в портянку, этого конечно можно избежать создавая отдельные js файлы со стилями, но тогда смысл теряется.

[@bigenough2122]

Лол, сам ответил на свою просьбу

[@UlbiTV]

@@bigenough2122 ахах, ну да, сам и ответил, компоненты максимально уменьшать надо, выносить из них логику/состояние и уж тем более стили, особенно если проект большой, иначе это трудно поддерживать) Но в небольших можно хоть инлайн стили писать, тут уже дело удобства

[@bigenough2122]

@@UlbiTV а кст, контейнерные компоненты в приложении считается хорошим тоном?

[@alekseyr8372]

IntersectionObserver кагбы существует. Он удобнее

[@Eguar42]

добрый вечер, подскажите, а почему у меня переменные photos и totalCount внутри функции scrollHandler равны пустому массиву и нулю?! уже 3 раза пересмотрел

[@UlbiTV]

Добрый вечер, трудно сказать так, надо видеть код, можете написать мне в контакте)

[@HaDaGaRa]

useEffect для слушателя скролла должен так же срабатывать при fetching == true useEffect(() => { document.addEventListener('scroll', scrollHandler) return function () { document.removeEventListener('scroll', scrollHandler) } }, [fetching]) Иначе стейты для хэндлеров менятся не будут.

[@amelianceskymusic]

Потому, что скролХендлер замыкается с теми данными, что попали при инициализации и они там остаются навечно навсегда 😅

[@Sergey_Klimov]

Интересная тема. Только в моем случае это будет не высота всей страницы, а отдельного блока. Ну, концепцию нужно будет поменять немного, а так всё тоже самое. А если вот наперед забегать, что используется в реальности для пагинации при скролле в реальных проектах?

[@Nikitosss91]

Дай бог тебе здоровьечка на все органы!

[@TheProfessionalGambler]

Классная инфа! Почему выбрал реакт, а не вью? Недавно на вью начал проект, переходиться легко и назад не сильно хочется 😄

[@UlbiTV]

С реакта начинал, а так я и с вью тоже работаю) Одно и тоже по сути, в разной оболочке)

[@TheProfessionalGambler]

@@UlbiTV в принципе да, на вью за день два основы понял) Просто вижу что уроки только по реакту, думаю может больше нравится)

[@bigenough2122]

@@TheProfessionalGambler вью проще? что в нем нрав, и почему решил перейти?)

[@UlbiTV]

@@TheProfessionalGambler реакт роднее как то 😁

[@TheProfessionalGambler]

@@bigenough2122 мне показался проще, на я уже знал реакт. Может с 0 тоже казался сложным) Появилась работа на вью вот и изучил. Вью как более молодой взял лучшее от реакта и ангуляра. Например v-model, отделение 'модели' и разметки, автобиндинг this. Один из главных плюсов, это что вью фреймворк и централизовагный стейт с роутом очень легко встраивается + все это можно посмотреть в одном расширении хрома. Можно сказать, что реакт + мобх похож на вью.

[@rw_machine1974]

Привет. Делал также как в твоём видео, при скролле у меня почему-то загружает 3-5 страниц и после останавливается, хотя через раз работает нормально и может прогрузить все страницы. Поигрался с зависимостями в useEffect в котором добавляется обработчик скролла, добавлял туда totalCount и fetching по отдельности и вместе, но не помогло. Не знаешь в чём может быть дело? Заранее спасибо за крутые обучающие ролики!

[@user-bj8rh7mb9m]

Улби напиши плиз, зачем использовать замут с юзЭффектом если можно просто повесить на див онСкрол?

[@anaxronik]

Отлично. А как насчет скрытия / удаления уже просмтренной информации?

[@UlbiTV]

Спасибо, а зачем?

[@Acyee]

@@UlbiTV Например для оптимизации

[@artemholba3074]

Спасибо огромное за крутой контент. Есть вопросик. У меня при скролле функция Handler отрабатывает 2 раза и подгружается сразу по 2 новые страницы. Почему так может быть? UPD: оказывается, что такое происходит только c открытым окном devtools в chrome)) А вот почему??

[@aximas778]

Если же у вас не срабатывает document.addEventListener('scroll', handleScroll) то добавьте третим аргументом true и всё сработает document.addEventListener('scroll', handleScroll, true)

[@ekhuuuu]

В коде присутствует ошибка, чтобы получить общее количество элементов надо писать: response.headers.get(‘x-total-count’)

[@HaDaGaRa]

response.headers.get is not a function А код из видео вполне работает.

[@user-uu5ub4lh3y]

@Егор Леро , благодарю за информацию, пол часа искал причину почему нет доступа к значению данного заголовка, либо что-то поменялось в получении заголовков с момента выпуска видео до текущего, но вариант с видео, не работает, выдает undefined, так как заголовки обернуты в symbol и просто так к ним уже не получить доступ, а вот через get(‘x-total-count’), все отлично получает, но с другой стороны @HaDaGaRa утверждает, что все на оборот, как бы там ни было вариант от Егора у меня работает, а как на видео нет, к справке, я использовал данную пагинацию на redux, redux-saga, next.js, а автор использует простой react и хуки, хотя скорее всего это дело в axios возможно он как-то преобразует доступ к заголовкам и не только, в общем те у кого не работает, пробуйте оба варианта.

[@Zugelman]

А у меня скролл плашка остается на месте, т.е отрисовываются новые табы, и прокрутка как была < 100 так и остается. В чем может быть проблема?

[@romanmed9035]

возникает резонный вопрос, почему в реакте мы не используем родное onScroll? зачем обращаться к глобальной переменной, да еще и навешивать события?

[@petermashine1483]

функция scrollHandler - не работает как задумывалось. В ней значение page на момент создания и следовательно при прокрутке контента не меняется .

[@alexnik4710]

Чувак, спасибо конечно за видео, но где код? Или ты предлагаешь пользователям стать стеногрфистками и записывать на слух?

[@user-yn9wc2sj5f]

Привет, все круто, все обалденно, но пожалуйста кидай код, бывает не когда переписывать.

[@andrewreidn8062]

А куда пропала обычная пагинация?

[@UlbiTV]

Не совсем понял вопрос?

[@VandalorumRex]

Спасибо всё классно изложено, но у меня не useState, ни import не работают....

[@Story-J]

Сейчас такое лучше реализовывать через обзервэбл апи

[@user-np4vg9pc5o]

Есть еще такая штука как -- IntersectionObserver Насколько целесообразно использовать её?

[@suppick9990]

Лучше использовать её, автор на момент создания ролика не знал о ней

[@MySven1980]

Хорошо, но вместо скролла лучше использовать developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API

[@UlbiTV]

Не знал об этом, действительно, то что нужно, спасибо за инфу)

[@gravedigger7332]

Есть проблема при такой же пагинации при скролле вверх)

[@konstantinsnihyr3408]

У тебя в конце не правильно, scrollHandler не видит стейт переменные - The scrollHandler function in the code you provided is not directly accessing the state variables because it is a separate function and does not have direct access to the component's state.

[@barmaley9705]

Так хлопцы идея конечно хорошая но есть нюансы, этот код не совсем рабочий, длинна загруженных постов не будет изеняться в коллбеке потому что она будет браться из замыкания, соответственно проверка на загрузку всех постов не сработает никогда. Если добавить массив загруженных постов в массив зависимостей ЮЗЕффекта то начинаются баги в виде сбоя порядка и очередности загрузки страниц. Я думаю что намного проще и целесообразнее делать динамическую пагинацию с использованием IntersectionObserver API. P.S. Если я не прав то поправьте пожалуйста

[@lidijajezova2025]

В его фундаментальном курсе по реакт он как раз использует IntersectionObserver

[@atlasua2021]

Еба, обычно я вас всех на скорости х2.5 смотрю и мне медленно, но без звука кажется всё таким быстрым. А по поводу видео, спасибо за видео.

[@alexbaboy7292]

Почему так быстро все? приходится замедлять в 2 раза!

[@sergeylunyaka4315]

как избавится от скачущего экрана.. перерисовывает копоненту... вместо скролла использовал обсервер

[@siarheitkachou6006]

Я так думаю, что допустим ты долистал до 10 страницы, зачем у пользователя показывать предыдущие, если их можно убрать. А если назад отскроллился, то запрос за ними сделать. Как я понимаю, это все в оперативке находится, и ее может так не хватить

[@UlbiTV]

Для этого есть виртуальные списки

[@azaanadkins4820]

Видос топчик, продолжай снимать! Если решить попасть в тренды ютуба, юзай Вибум, а с промокодом ST1234581 будет неплохая скидка

[@UlbiTV]

Спасибо)