React Infinite Scroll like YouTube, Instagram | with Animation

Подписаться 14 тыс.

Просмотров 26 тыс.

50% 1

🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: forms.gle/8m9X... 🚀
🤩Access the Full React Course - www.udemy.com/...
🗒️MY FAVORITE TOOLS & GEARS
Height Adjustable Desk - amzn.to/42qPZkb
Old Desk in Budget - amzn.to/3UlaFbm
Favorite Laptop - amzn.to/3OrqmKa
LG Monitor for Productivity - amzn.to/3uqA5tv
Silent Keyboard(Loved It) - amzn.to/3UjagGv
Mouse & Keyboard Combo - amzn.to/3Sq50hs
Extra Large Mouse Pad - amzn.to/48Nhcjv
Sony Headphones - amzn.to/3HHjYed
Cheap Earphones for Editing - amzn.to/48eBykN
Daily Use Laptop Stand - amzn.to/3Uj8JQL
Mini Speakers for Consuming Content - amzn.to/48YgAaK
Mport X Connector - amzn.to/3UoHsML
Mic - amzn.to/48eCrtD
3 Color Lightbar - amzn.to/42qgaaW
Dual Monitor Stand - amzn.to/48Nixa1
Stop Watch for Productivity - amzn.to/3Un1RBW
Dotted Diary - amzn.to/3vYBWq1
🚀Access REDUX Course:- www.udemy.com/...
How to apply infinite scroll in ReactJS or you can say endless scroll in React. Infinite scrolling is the most common feature to hook user attention on website content and user will spent more time on our website. You will learn How to add infinite scroll in react with loading animation very fast.
IMPORTANT LINKS
API LINK : api.coingecko....
Source Code : github.com/Cod...
UseEffect Tutorial : • useEffect React Hook |...
Axios Tutorial : • Axios in React JS // C...
CSS Loader Tutorial: • 100+ Stunning CSS Load...
Social Media Links:
🚀COURSES : www.udemy.com/...
🤩INSTAGRAM : / code_blessyou
💙FACEBOOK : / 100077716056158
🐦TWITTER : / code_blessyou
😎LINKEDIN : / code-bless-you-5b76822b
COPYRIGHT FOOTAGE LINKS
Video by Anna Tarazevich: www.pexels.com...
Video by cottonbro: www.pexels.com...
Timer icons created by Pixel perfect - www.flaticon.c...
TAGS
react pagination,lazy loading,react infinite scroll,infinite scroll react,infinite scroll,endless scroll react,react unlimited scroll,infinite scroll tutorial,react infinite scrolling,endless scrolling react,infinite scroll react tutorial,react infinite scroll component,react infinite scroll functional component,infinite scrolling with react,infinite scrolling,reactjs infinite scroll,infinite scroll reactjs,react,react infinite,react js
Infinite Scrolling With React - Tutorial Infinite Scroll React Example Using React-Infinite-Scroll-Component Infinite Scrolling in React | JavaScript Infinite Scrolling | Pagination in React JS in Hindi How to Code an Infinite Scroller with React Hooks

Опубликовано:

15 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 94

@CodeBlessYou Год назад

In this scrolling condition, at the bottom we by mistake sending multiple requests. So you can replace that logic with this, This will call our function only one time: useEffect(() => { window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const handleScroll = () => { const { scrollTop, clientHeight, scrollHeight } = document.documentElement; if (scrollTop + clientHeight >= scrollHeight) { setPage((prev) => prev + 1); } }; 🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: forms.gle/8m9XA7kmc17nHfhz8 🚀

@canklc5772 Год назад

For infinite scroll, I have watched several videos. This one is the best. No rocket science. Simple and on point. Thanks a lot Mate.

@CodeBlessYou Год назад

Thanks for this comment😇❤

@devworks8787 9 месяцев назад

wow... very clean explanation and straight to the code. Subbed!

@CodeBlessYou 9 месяцев назад

Thank you so much❤❤❤

@abdelhakmehda 2 года назад

all your explanation are so clear ... you are amazing , keep going bro❤

@CodeBlessYou 2 года назад

Thanks brother😀

@thesankharoy Год назад

All of your videos are really helpful to me. I learn a lot in very short time.

@CodeBlessYou Год назад

Thanks for your support. Grateful for that❤❤

@fullycodedtech 4 месяца назад

I have seen many videos of more then 30 minutes to explain the same concept but you explained 1000 times better in just 7 minutes ❤

@CodeBlessYou 4 месяца назад

Glad to here that❤❤❤

@sravanstg234 8 месяцев назад

Thank you for such simple explanation.

@CodeBlessYou 8 месяцев назад

❤❤❤

@athulgeorge4873 2 года назад

Great Tutorial, just wondering if we were to use a our own rest api, would we limit and offset to get the next data be ideal? Also how do we keep the loading animation for longer, setting the loading state to false within a setTimeout is not working for me.

@CodeBlessYou 2 года назад

Check setTimeout function if there are some error

@growwithdesign Год назад

I have my own API file created in my react project, where I am manually maintaining records. How to use your own API file instead of using an external url?

@CodeBlessYou Год назад

Sorry I don't have clear understanding about that

@r.vamsi-1657 3 месяца назад

when the scroll is in subcontainer of whole window, and if we want implement scroll in that container will this work?

@CodeBlessYou 3 месяца назад

For that you have to track scroll for that container

@omarbarra3456 Год назад

Thank very useful. question, why do not you use a Intersection Observer API? when shold we use eventListener or Intersection Observer API?

@CodeBlessYou Год назад

You can use both for infinite scrolling. This is the easy way to do that

@LaFragas Год назад

super fast and perfect, thank you!

@CodeBlessYou Год назад

Thank you so much for this comment❤

@francoagustin765 Год назад

Good tutorial, I haven't seen one like it. others had a lot of logic that when applying it I forgot everything. One thing that I would need is to verify that it does not look for more data if there is no next page.

@CodeBlessYou Год назад

For that you need to get total number of posts from your backend and after that you can do - ( totalPosts/postsPerPage ) This will return total number of page and then in codition, you have to put page

@quanhw Год назад

Simple and on point. Tks a lot bro keep doing

@CodeBlessYou Год назад

Thanks for your support❤❤

@mauriciochambi2508 5 месяцев назад

How can I avoid data duplication in the first API call? I'm using Next.js

@CodeBlessYou 5 месяцев назад

You have to work with page number

@simple-stack-by-ed 4 месяца назад

Straighter than an heterosexual alpha silverback man. Thx man!

@CodeBlessYou 4 месяца назад

😅😅❤❤

@vishnumurthyjadi4704 Год назад

I have watched several videos.your explanation excellent.thanks a lot . please do more videos on React.

@CodeBlessYou Год назад

Actually I am creating Complete React JS course, If you are interested then you can register for that. For first 100 Students it will completely FREE. Fill This Form:- forms.gle/aBtV1aRdcbztDwF3A

@pelumioye4196 Год назад

hey man, wonderful tutorial but what do i do if i'm using my own server/backend and not a link that has "per_page and page=" ?

@CodeBlessYou Год назад

Then you have to create API which send posts by page number. When user reach to bottom of page, then you have to call API for that.

@khathambhaibhai6334 25 дней назад

when we reach last page and their is no data but it calling next page so how to stop it

@CodeBlessYou 24 дня назад

You can put condition for that. For that you need the total number of data or page from the backend.

@anikbarua5483 Год назад

Suppose i have my own json data that doesn't come from any api so how to add page number in this data?

@CodeBlessYou Год назад

In that case, you have to set two variables: currentPage=1 and postsPerPage=8, Now when you reach to bottom, then currentPage will 2 and you have to skip (currentPage - 1)*postsPerPage which is 8, so you have to skip 8 posts from your json data. If your currentPage is 3 then you have to skip first 16 posts from your json data. If you already have data offline in your application, then you don't need to add pagination or infinite scrolling. They are just for reducing the data load to server.

@KevinDivinagracia-s5g 2 месяца назад

can you make the like facebook remove recent videos,post, when keep scrolling

@CodeBlessYou 2 месяца назад

We can create that, but for that we need to change in the backend. Because the data we want to show, i coming from backend.

@KevinDivinagracia-s5g 2 месяца назад

@@CodeBlessYou Im so excited for v2 of this . keep it up

@CodeBlessYou 2 месяца назад

@@KevinDivinagracia-s5g ❤❤❤

@sauravkhanal 5 месяцев назад

Really cool man, may the code bless you🖖

@CodeBlessYou 5 месяцев назад

Thanks, Same to you❤❤❤

@guesswho4633 Год назад

i really love your videos. helps a lot

@CodeBlessYou Год назад

Grateful for your support 😇❤

@rezafirouzabadi176 Год назад

thanks for the short and useful video brother

@CodeBlessYou Год назад

😇❤

@muhammadfaizantariq7841 7 месяцев назад

Amazing Tutorial for infinite scroll with loading Really helpful

@CodeBlessYou 6 месяцев назад

❤❤❤

@muhammadfaizantariq7841 6 месяцев назад

@@CodeBlessYou , I'm facing issue when I reach the last product then api call is invoke and loading is keeping going so How I can avoid it, and one last thing on scroll event api call multiple time

@CodeBlessYou 6 месяцев назад

@@muhammadfaizantariq7841 Put condition, if isLoading is true then don't update page state

@jritzeku Год назад

Any examples with Redux ? Also isn''t it bad to be making multiple network requests as you are here every 500ms?

@CodeBlessYou Год назад

I find that in this scrolling condition, at the bottom we by mistake sending multiple requests. So you can replace this logic with this, This will call our function only one time: useEffect(() => { window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const handleScroll = () => { const { scrollTop, clientHeight, scrollHeight } = document.documentElement; if (scrollTop + clientHeight >= scrollHeight) { setPage((prev) => prev + 1); } };

@immanuelrajmohan830 2 года назад

thank u bruh very short and simple

@CodeBlessYou 2 года назад

You're welcome!

@sandhyaginare857 Год назад

Can we do the same if we are getting the data from dummy json file?????

@CodeBlessYou Год назад

In that case, we don't want Infinite scrolling, we can simply display the data. Because Infinite scrolling essentially for reducing load to server for not sending 100posts in one request.