Просто шикарно, не большой ролик, тема хорошо раскрыта, всё чётко и понятно и нет воды. Популярна тема среди зарубежных ютуберов - разработка клона какого-то приложения, подумайте над этим вариантом. Кого можете посоветовать из англоязычных авторов ? из ютуба или юдеми. Даже не могу представить, сколько времени у вас уходит на создание видео в таком режиме, очень часто они выходят, лишь бы вы не выгорели, не забывайте отдыхать!
Спасибо друг!) Я сам давно уже не смотрю ролики, как то времени не хватает, только по конкретным темам, поэтому наврядли кого то посоветую) Отдыхать успеваю, хотя хотелось бы побольше!) Спасибо вам!
Если после добавления общего количества страниц контент при скролле не загружается, то во втором useEffect вторым аргументом нужно передать не пустой массив, а totalCount: useEffect(() => { document.addEventListener('scroll', scrollHandler); return () => { document.removeEventListener('scroll', scrollHandler) } }, [totalCount])
Бля, чел, я работаю и пользуюсь твоими видосами. Просто кайф, что можно не ебать себе мозги по поводу таких штук и сосредоточиться на других, еще не решенных задачах. Красава)) Лайк
В самом конце у автора опечатка: в проверке scrollHandler должно быть photos.length === totalCount, а не photos.length < totalCount PS Отличный урок, огромное спасибо
Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.
Спасибо за видео. Насколько знаю у такой пагинации есть траблы с СЕО оптимизацией, особенно у яндекса, поэтому в каких то интернет магазинах лучше делать классическую постраничную пагинацию, ну это так, на случай если кому то понадобится
Допустим я подгрузил несколько пользователей 20 штук , хочу удалить первых 2 , они удалятся из базы данных но не в реальном времени удалятся только после перезагрузки страницы , я не могу понять как это можно сделать
добрый вечер, подскажите, а почему у меня переменные photos и totalCount внутри функции scrollHandler равны пустому массиву и нулю?! уже 3 раза пересмотрел
useEffect для слушателя скролла должен так же срабатывать при fetching == true useEffect(() => { document.addEventListener('scroll', scrollHandler) return function () { document.removeEventListener('scroll', scrollHandler) } }, [fetching]) Иначе стейты для хэндлеров менятся не будут.
Привет. Делал также как в твоём видео, при скролле у меня почему-то загружает 3-5 страниц и после останавливается, хотя через раз работает нормально и может прогрузить все страницы. Поигрался с зависимостями в useEffect в котором добавляется обработчик скролла, добавлял туда totalCount и fetching по отдельности и вместе, но не помогло. Не знаешь в чём может быть дело? Заранее спасибо за крутые обучающие ролики!
А что делать, если у меня в запросе на сервер помимо currentPage есть и другие запросы, например sort , который тоже меняется? И + запрос хранится в reducer(redux-thunk)
Интересует как подобное реализовать на Next JS. Я так понимаю данный метод не подойдет ибо рендеринг будет только на стороне клиента. А решений без перехода на другую страницу я так и не нашел.
Спасибо за видео. Тимур а сможете показать как реализовать SideBar с навигацией, с выпадающими списками, с активным роутом и т.д. , например как у ютуб)
Сразу оговорюсь, что я новичок, а потому сомневаюсь в своем ответе, да и не уверен, о том ли спрашивали, но в курсе про клауд диск на канале есть очень понятные объяснения как делать навигацию с роутами(при помощи react-router-dom), кстати, он же позволяет упростить создание и работу с попап(если нужен выпадающий поверх сайдбар), но если нужен сдвиг контента, то я бы описал 2 класса в CSS и использовал state, как триггер(в том же курсе, видео про loader очень понятно объясняет)... Но дождемся ответа спецов:))))
И вам спасибо за комментарий, Максим) есть видео про бургер меню, там та же навигация по сути) Но вообще что то связанное с грамотной навигацией я сниму наверное чуть позже)
Как всегда отлично преподнес информацию, спасибо, полезная штука. И тут появился вопрос - я сейчас балуюсь со switch кейсом, а именно собрал несколько вариантов для показа страницы (в зависимости от значения view меняется контент, идея в том, чтобы обернуть контент в приятную анимацию и фактически убрать переходы по страницам) и соответственно вопрос, разумно ли было бы использовать динамическую пагинацию и хранить данные на том же mongodb, а погружать при смене значения view? Это исключительно теоретический вопрос, поскольку, понятное дело запросы и ответы будут требовать времени и могут ловить лишние ошибки. Просто интересно, где еще, кроме погрузки фактического контента можно использовать этот инструмент... Мне пришло в голову только возможность догружать темы, скажем, если взять тот же проект с mern-cloud-disc, то добавлять персональные темы, а настройки хранить под ключом юзера. Сорри за большой текст:)
Большой текст это всегда круто, значит человеку действительно интересно) пиши столько, сколько считаешь нужным, всегда постараюсь ответить) Ну вообще, конкретно вот такая пагинация нужна только лишь для подгрузки поэтапной каких то данных, другой кейс даже придумать не могу)
@@bigenough2122 мне показался проще, на я уже знал реакт. Может с 0 тоже казался сложным) Появилась работа на вью вот и изучил. Вью как более молодой взял лучшее от реакта и ангуляра. Например v-model, отделение 'модели' и разметки, автобиндинг this. Один из главных плюсов, это что вью фреймворк и централизовагный стейт с роутом очень легко встраивается + все это можно посмотреть в одном расширении хрома. Можно сказать, что реакт + мобх похож на вью.
Интересная тема. Только в моем случае это будет не высота всей страницы, а отдельного блока. Ну, концепцию нужно будет поменять немного, а так всё тоже самое. А если вот наперед забегать, что используется в реальности для пагинации при скролле в реальных проектах?
Как всегда спасибо) единственное хотел задать вопрос: что нужно делать чтоб typescript не ругался на unexpected arrow functions ( функция onLoad по дефолту в твоем видео) ?
Если же у вас не срабатывает document.addEventListener('scroll', handleScroll) то добавьте третим аргументом true и всё сработает document.addEventListener('scroll', handleScroll, true)
@Егор Леро , благодарю за информацию, пол часа искал причину почему нет доступа к значению данного заголовка, либо что-то поменялось в получении заголовков с момента выпуска видео до текущего, но вариант с видео, не работает, выдает undefined, так как заголовки обернуты в symbol и просто так к ним уже не получить доступ, а вот через get(‘x-total-count’), все отлично получает, но с другой стороны @HaDaGaRa утверждает, что все на оборот, как бы там ни было вариант от Егора у меня работает, а как на видео нет, к справке, я использовал данную пагинацию на redux, redux-saga, next.js, а автор использует простой react и хуки, хотя скорее всего это дело в axios возможно он как-то преобразует доступ к заголовкам и не только, в общем те у кого не работает, пробуйте оба варианта.
@@UlbiTV понял. Было бы интересно узнать твоё мнение, как будет свободное время) Несколько раз на пед проектах пытаюсь подключить, но что-то не заходит, хотя идея интересная. Стили прям в компоненте. Но появляется проблема, когда много стилей, компонента превращается в портянку, этого конечно можно избежать создавая отдельные js файлы со стилями, но тогда смысл теряется.
@@bigenough2122 ахах, ну да, сам и ответил, компоненты максимально уменьшать надо, выносить из них логику/состояние и уж тем более стили, особенно если проект большой, иначе это трудно поддерживать) Но в небольших можно хоть инлайн стили писать, тут уже дело удобства
Спасибо огромное за крутой контент. Есть вопросик. У меня при скролле функция Handler отрабатывает 2 раза и подгружается сразу по 2 новые страницы. Почему так может быть? UPD: оказывается, что такое происходит только c открытым окном devtools в chrome)) А вот почему??
У тебя в конце не правильно, 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.
Так хлопцы идея конечно хорошая но есть нюансы, этот код не совсем рабочий, длинна загруженных постов не будет изеняться в коллбеке потому что она будет браться из замыкания, соответственно проверка на загрузку всех постов не сработает никогда. Если добавить массив загруженных постов в массив зависимостей ЮЗЕффекта то начинаются баги в виде сбоя порядка и очередности загрузки страниц. Я думаю что намного проще и целесообразнее делать динамическую пагинацию с использованием IntersectionObserver API. P.S. Если я не прав то поправьте пожалуйста
Я так думаю, что допустим ты долистал до 10 страницы, зачем у пользователя показывать предыдущие, если их можно убрать. А если назад отскроллился, то запрос за ними сделать. Как я понимаю, это все в оперативке находится, и ее может так не хватить
Откровенно говоря, я на этом канале встречаю то, что действительно интересно увидеть и посмотреть. Канал просто пушка. Удачи и благополучия:)
Ох парень, ты как всегда. Ролик на 10 минут, но все четко. По делу, и с комментариями. Приятно следить!
Спасибо за урок динамической пагинации на React!
Большое спасибо за такой контент, быстро, кратко и по делу. Надеюсь у вас в жизни все будет хорошо
Неплохо. Лёгкий ненапряжный урок.
Благодарю, стараюсь для вас)
Просто шикарно, не большой ролик, тема хорошо раскрыта, всё чётко и понятно и нет воды. Популярна тема среди зарубежных ютуберов - разработка клона какого-то приложения, подумайте над этим вариантом. Кого можете посоветовать из англоязычных авторов ? из ютуба или юдеми. Даже не могу представить, сколько времени у вас уходит на создание видео в таком режиме, очень часто они выходят, лишь бы вы не выгорели, не забывайте отдыхать!
Спасибо друг!) Я сам давно уже не смотрю ролики, как то времени не хватает, только по конкретным темам, поэтому наврядли кого то посоветую) Отдыхать успеваю, хотя хотелось бы побольше!) Спасибо вам!
Если после добавления общего количества страниц контент при скролле не загружается, то во втором useEffect вторым аргументом нужно передать не пустой массив, а totalCount:
useEffect(() => {
document.addEventListener('scroll', scrollHandler);
return () => {
document.removeEventListener('scroll', scrollHandler)
}
}, [totalCount])
спасибо!
Спасибо, у меня новые данные не приходили в scrollHandler, а теперь работает
и там надо не только totalCount но и те объекты что мы получаем, чтобы сравнение работало для конца скролла
Спасибо тебе ! Выручил
всем лойсы, комменты в жилу!
Спасибо за урок! Уже несколько раз применяю данный метод в рабочем проекте
Зашел поставил лайк, спс за инфу
Спасибо друг, ценю!)
Привет! Очень полезноє видео как и контент канала! Спасибо что уделяєш время интересным и обучающим видео!
Бля, чел, я работаю и пользуюсь твоими видосами. Просто кайф, что можно не ебать себе мозги по поводу таких штук и сосредоточиться на других, еще не решенных задачах. Красава)) Лайк
Спасибо. Отличное видео про динамическую пагинацию. React рулит.
Спасибо, Константин!
Бомболейло! Теперь такое прикручу куда угодно!
лайк, ролик топ! решал проблему и тут прям все есть. автору респект!
Супер-полезный канал, спасибо большое!!!
Спасибо за полезное видео. Очень помогли
Как всегда полезно, сжато, но ёмко!
Интересная информация 👍
Благодарю!)
В самом конце у автора опечатка: в проверке scrollHandler должно быть photos.length === totalCount, а не photos.length < totalCount
PS Отличный урок, огромное спасибо
Спасибо, отличный материал.
Благодарю!
Спасибо!!!👍
Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.
Курто, полезно !
Благодарен.
#reactjs
Благодарю вас!)
Бро, ты супер. Спасибо тебе большое.
Гигант не только мысли, но и дела
Ну прям гигант)) спасибо!)
Спасибо за видео. Насколько знаю у такой пагинации есть траблы с СЕО оптимизацией, особенно у яндекса, поэтому в каких то интернет магазинах лучше делать классическую постраничную пагинацию, ну это так, на случай если кому то понадобится
Возможно) Честно говоря с СЕО не особо знаком
У любом спа траблы с сео. Потому что по факту у тебя страница с одним div#root и скриптами. Это решается ssr и другими вариантами.
Как всегда - лучший!
большое спасибо ulbi tv
Допустим я подгрузил несколько пользователей 20 штук , хочу удалить первых 2 , они удалятся из базы данных но не в реальном времени удалятся только после перезагрузки страницы , я не могу понять как это можно сделать
Спасибо, как всегда материал огонь
добрый вечер, подскажите, а почему у меня переменные photos и totalCount внутри функции scrollHandler равны пустому массиву и нулю?! уже 3 раза пересмотрел
Добрый вечер, трудно сказать так, надо видеть код, можете написать мне в контакте)
useEffect для слушателя скролла должен так же срабатывать при fetching == true
useEffect(() => {
document.addEventListener('scroll', scrollHandler)
return function () {
document.removeEventListener('scroll', scrollHandler)
}
}, [fetching])
Иначе стейты для хэндлеров менятся не будут.
Потому, что скролХендлер замыкается с теми данными, что попали при инициализации и они там остаются навечно навсегда 😅
Привет. Делал также как в твоём видео, при скролле у меня почему-то загружает 3-5 страниц и после останавливается, хотя через раз работает нормально и может прогрузить все страницы. Поигрался с зависимостями в useEffect в котором добавляется обработчик скролла, добавлял туда totalCount и fetching по отдельности и вместе, но не помогло. Не знаешь в чём может быть дело? Заранее спасибо за крутые обучающие ролики!
А что делать, если у меня в запросе на сервер помимо currentPage есть и другие запросы, например sort , который тоже меняется? И + запрос хранится в reducer(redux-thunk)
Интересует как подобное реализовать на Next JS. Я так понимаю данный метод не подойдет ибо рендеринг будет только на стороне клиента. А решений без перехода на другую страницу я так и не нашел.
отличный материал!!!
Очень крутой контент, спасибо)
есть ссылка на гит данного урока ?
Лучшее видео в своем роде.
Великолепное видео, попробовал, просто и круто, благодарность автору!)
IntersectionObserver кагбы существует. Он удобнее
Спасибо бро
Спасибо за видео
Спасибо за видео)
Спасибо за видео. Тимур а сможете показать как реализовать SideBar с навигацией, с выпадающими списками, с активным роутом и т.д. , например как у ютуб)
Сразу оговорюсь, что я новичок, а потому сомневаюсь в своем ответе, да и не уверен, о том ли спрашивали, но в курсе про клауд диск на канале есть очень понятные объяснения как делать навигацию с роутами(при помощи react-router-dom), кстати, он же позволяет упростить создание и работу с попап(если нужен выпадающий поверх сайдбар), но если нужен сдвиг контента, то я бы описал 2 класса в CSS и использовал state, как триггер(в том же курсе, видео про loader очень понятно объясняет)... Но дождемся ответа спецов:))))
И вам спасибо за комментарий, Максим) есть видео про бургер меню, там та же навигация по сути) Но вообще что то связанное с грамотной навигацией я сниму наверное чуть позже)
@@ipa_stor да ты все правильно сказал)) спасибо!)
@@UlbiTV все видео с канала:))) помогают
@@ipa_stor Очень приятно это слышать, постараюсь сделать еще как можно больше полезных видео) Скоро будет полный курс по MobX
Как всегда отлично преподнес информацию, спасибо, полезная штука. И тут появился вопрос - я сейчас балуюсь со switch кейсом, а именно собрал несколько вариантов для показа страницы (в зависимости от значения view меняется контент, идея в том, чтобы обернуть контент в приятную анимацию и фактически убрать переходы по страницам) и соответственно вопрос, разумно ли было бы использовать динамическую пагинацию и хранить данные на том же mongodb, а погружать при смене значения view? Это исключительно теоретический вопрос, поскольку, понятное дело запросы и ответы будут требовать времени и могут ловить лишние ошибки. Просто интересно, где еще, кроме погрузки фактического контента можно использовать этот инструмент... Мне пришло в голову только возможность догружать темы, скажем, если взять тот же проект с mern-cloud-disc, то добавлять персональные темы, а настройки хранить под ключом юзера. Сорри за большой текст:)
Значение view храню в state*
Большой текст это всегда круто, значит человеку действительно интересно) пиши столько, сколько считаешь нужным, всегда постараюсь ответить) Ну вообще, конкретно вот такая пагинация нужна только лишь для подгрузки поэтапной каких то данных, другой кейс даже придумать не могу)
Классная инфа!
Почему выбрал реакт, а не вью? Недавно на вью начал проект, переходиться легко и назад не сильно хочется 😄
С реакта начинал, а так я и с вью тоже работаю) Одно и тоже по сути, в разной оболочке)
@@UlbiTV в принципе да, на вью за день два основы понял) Просто вижу что уроки только по реакту, думаю может больше нравится)
@@TheProfessionalGambler вью проще? что в нем нрав, и почему решил перейти?)
@@TheProfessionalGambler реакт роднее как то 😁
@@bigenough2122 мне показался проще, на я уже знал реакт. Может с 0 тоже казался сложным) Появилась работа на вью вот и изучил. Вью как более молодой взял лучшее от реакта и ангуляра. Например v-model, отделение 'модели' и разметки, автобиндинг this. Один из главных плюсов, это что вью фреймворк и централизовагный стейт с роутом очень легко встраивается + все это можно посмотреть в одном расширении хрома. Можно сказать, что реакт + мобх похож на вью.
Best all the best
Интересная тема. Только в моем случае это будет не высота всей страницы, а отдельного блока. Ну, концепцию нужно будет поменять немного, а так всё тоже самое.
А если вот наперед забегать, что используется в реальности для пагинации при скролле в реальных проектах?
Как всегда спасибо) единственное хотел задать вопрос: что нужно делать чтоб typescript не ругался на unexpected arrow functions ( функция onLoad по дефолту в твоем видео) ?
Супер
Если же у вас не срабатывает document.addEventListener('scroll', handleScroll) то добавьте третим аргументом true и всё сработает document.addEventListener('scroll', handleScroll, true)
Улби напиши плиз, зачем использовать замут с юзЭффектом если можно просто повесить на див онСкрол?
возникает резонный вопрос, почему в реакте мы не используем родное onScroll? зачем обращаться к глобальной переменной, да еще и навешивать события?
в поддержку топового канала
В коде присутствует ошибка, чтобы получить общее количество элементов надо писать:
response.headers.get(‘x-total-count’)
response.headers.get is not a function
А код из видео вполне работает.
@Егор Леро , благодарю за информацию, пол часа искал причину почему нет доступа к значению данного заголовка, либо что-то поменялось в получении заголовков с момента выпуска видео до текущего, но вариант с видео, не работает, выдает undefined, так как заголовки обернуты в symbol и просто так к ним уже не получить доступ, а вот через get(‘x-total-count’), все отлично получает, но с другой стороны @HaDaGaRa утверждает, что все на оборот, как бы там ни было вариант от Егора у меня работает, а как на видео нет, к справке, я использовал данную пагинацию на redux, redux-saga, next.js, а автор использует простой react и хуки, хотя скорее всего это дело в axios возможно он как-то преобразует доступ к заголовкам и не только, в общем те у кого не работает, пробуйте оба варианта.
Отлично. А как насчет скрытия / удаления уже просмтренной информации?
Спасибо, а зачем?
@@UlbiTV Например для оптимизации
Спасибо!
Привет! Крутые видео, спасибо. Ты будто чувствуешь что нужно)
Хотел узнать, работал ли со styled-component?
Привет, спасибо большое) со styled component не работал, не приходилось)
@@UlbiTV понял. Было бы интересно узнать твоё мнение, как будет свободное время)
Несколько раз на пед проектах пытаюсь подключить, но что-то не заходит, хотя идея интересная. Стили прям в компоненте. Но появляется проблема, когда много стилей, компонента превращается в портянку, этого конечно можно избежать создавая отдельные js файлы со стилями, но тогда смысл теряется.
Лол, сам ответил на свою просьбу
@@bigenough2122 ахах, ну да, сам и ответил, компоненты максимально уменьшать надо, выносить из них логику/состояние и уж тем более стили, особенно если проект большой, иначе это трудно поддерживать) Но в небольших можно хоть инлайн стили писать, тут уже дело удобства
@@UlbiTV а кст, контейнерные компоненты в приложении считается хорошим тоном?
Еще вопрос, на сколько правильно в реакт приложении использовать document?
Чувак, спасибо конечно за видео, но где код? Или ты предлагаешь пользователям стать стеногрфистками и записывать на слух?
А у меня скролл плашка остается на месте, т.е отрисовываются новые табы, и прокрутка как была < 100 так и остается. В чем может быть проблема?
лайк
за пагинацию
функция scrollHandler - не работает как задумывалось. В ней значение page на момент создания и следовательно при прокрутке контента не меняется .
Спасибо огромное за крутой контент. Есть вопросик. У меня при скролле функция Handler отрабатывает 2 раза и подгружается сразу по 2 новые страницы. Почему так может быть?
UPD: оказывается, что такое происходит только c открытым окном devtools в chrome)) А вот почему??
Очень помог
Дай бог тебе здоровьечка на все органы!
Спасибо помог !
очень годно! очень!
спасибо.
Спасибо всё классно изложено, но у меня не useState, ни import не работают....
top
У тебя в конце не правильно, 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.5 смотрю и мне медленно, но без звука кажется всё таким быстрым.
А по поводу видео, спасибо за видео.
Есть еще такая штука как -- IntersectionObserver Насколько целесообразно использовать её?
Лучше использовать её, автор на момент создания ролика не знал о ней
Так хлопцы идея конечно хорошая но есть нюансы, этот код не совсем рабочий, длинна загруженных постов не будет изеняться в коллбеке потому что она будет браться из замыкания, соответственно проверка на загрузку всех постов не сработает никогда. Если добавить массив загруженных постов в массив зависимостей ЮЗЕффекта то начинаются баги в виде сбоя порядка и очередности загрузки страниц. Я думаю что намного проще и целесообразнее делать динамическую пагинацию с использованием IntersectionObserver API.
P.S. Если я не прав то поправьте пожалуйста
В его фундаментальном курсе по реакт он как раз использует IntersectionObserver
Сейчас такое лучше реализовывать через обзервэбл апи
Есть проблема при такой же пагинации при скролле вверх)
Я так думаю, что допустим ты долистал до 10 страницы, зачем у пользователя показывать предыдущие, если их можно убрать. А если назад отскроллился, то запрос за ними сделать. Как я понимаю, это все в оперативке находится, и ее может так не хватить
Для этого есть виртуальные списки
как избавится от скачущего экрана.. перерисовывает копоненту... вместо скролла использовал обсервер
Почему так быстро все? приходится замедлять в 2 раза!
Хорошо, но вместо скролла лучше использовать developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API
Не знал об этом, действительно, то что нужно, спасибо за инфу)
+
its cool
Видос топчик, продолжай снимать! Если решить попасть в тренды ютуба, юзай Вибум, а с промокодом ST1234581 будет неплохая скидка
Спасибо)