React Infinite Scroll like YouTube, Instagram | with Animation

🎓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

[@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]

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

[@CodeBlessYou]

Thank you so much❤❤❤

[@abdelhakmehda]

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

[@CodeBlessYou]

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]

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]

Glad to here that❤❤❤

[@sravanstg234]

Thank you for such simple explanation.

[@CodeBlessYou]

❤❤❤

[@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

[@roycechriston5389]

Thank you soo much If a get a job because of this you will be treated 😍😇

[@CodeBlessYou]

Sure, All the best❤❤❤

[@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

[@r.vamsi-1657]

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

[@CodeBlessYou]

For that you have to track scroll for that container

[@user-tu2vp4ww5b]

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

[@CodeBlessYou]

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.

[@user-tu2vp4ww5b]

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

[@CodeBlessYou]

@@user-tu2vp4ww5b ❤❤❤

[@quanganh2849]

Simple and on point. Tks a lot bro keep doing

[@CodeBlessYou]

Thanks for your support❤❤

[@sauravkhanal]

Really cool man, may the code bless you🖖

[@CodeBlessYou]

Thanks, Same to you❤❤❤

[@muhammadfaizantariq7841]

Amazing Tutorial for infinite scroll with loading
Really helpful

[@CodeBlessYou]

❤❤❤

[@muhammadfaizantariq7841]

@@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]

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

[@LaFragas]

super fast and perfect, thank you!

[@CodeBlessYou]

Thank you so much for this comment❤

[@mauriciochambi2508]

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

[@CodeBlessYou]

You have to work with page number

[@simple-stack-by-ed]

Straighter than an heterosexual alpha silverback man. Thx man!

[@CodeBlessYou]

😅😅❤❤

[@guesswho4633]

i really love your videos. helps a lot

[@CodeBlessYou]

Grateful for your support 😇❤

[@rezafirouzabadi176]

thanks for the short and useful video brother

[@CodeBlessYou]

😇❤

[@shubhamrathod5933]

Which VS code theme are you using ?

[@CodeBlessYou]

AYU MIRAGE BORDER

[@athulgeorge4873]

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]

Check setTimeout function if there are some error

[@immanuelrajmohan830]

thank u bruh very short and simple

[@CodeBlessYou]

You're welcome!

[@keerthanamalisetty7487]

It would help if u show us how to do this with backend also with nodejs and mongodb

[@CodeBlessYou]

I will upload tutorial on that, If you want to try Right now then...
Use limit and skip function in find method of mongoDB...

[@vaibhavsingh6668]

Yes bro I have doubt in infinite loading in the couse i have purchase from udemy. React js 2024.

[@CodeBlessYou]

Whats you doubt?

[@vaibhavsingh6668]

@@CodeBlessYou can't implement infinite loading i am following your code along

[@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

[@sakibcoder]

great man

[@CodeBlessYou]

❤❤❤

[@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.

[@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

[@dhruvkaravadiya3645]

amazing video bhai

[@CodeBlessYou]

Thank you brother❤

[@antrikshsingh2503]

Well Explained :)

[@CodeBlessYou]

Thanks for Feedback😀

[@Chavaka_cheap]

❤

[@CodeBlessYou]

❤❤❤

[@alpalasaul]

What is that theme you use?

[@CodeBlessYou]

AYU Dark❤❤

[@giovankoulits8602]

Very helpful vid

[@CodeBlessYou]

❤❤❤❤

[@weverton.santiago]

Thanks new subs here

[@CodeBlessYou]

Thanks for subscribing😇❤

[@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.

[@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);
}
};

[@Its_Abhi_Thakur]

Thanks bro

[@CodeBlessYou]

Thanks for Feedback😀

[@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.

[@AdityaSharan811]

U cannot make callback inside useEffect as async !!

[@CodeBlessYou]

Yes, You can declare async function outside of the useEffects and then call that function in useEffect

[@charankumarbasam5866]

make a video on intersection observer

[@CodeBlessYou]

Sure😀

[@charankumarbasam5866]

Good video.

[@CodeBlessYou]

Thanks😃

[@mylow_____]

yeeeeessssss

[@anjalii1102]

are you gujarati

[@CodeBlessYou]

Yes😄😄 Did you notice that? You are good observer