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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо!!!👍

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

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

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

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

Спасибо бро

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

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

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

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

Супер

Очень помог

Спасибо!

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

Best all the best

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

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

top

спасибо.

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

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

its cool

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У тебя в конце не правильно, 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.

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

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

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

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

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