React Infinite Scroll like YouTube, Instagram | with Animation

🗒️MY FAVORITE TOOLS & GEARS

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

Social Media Links:

COPYRIGHT FOOTAGE LINKS

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

[canklc]

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

[dannyng]

Yours is straightforward and didn't waste my time like the others, really appreciate.

[devworks]

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

[abdelhakmehda]

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

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

[thesankharoy]

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

[quanganh]

Simple and on point. Tks a lot bro keep doing <3

[francoagustin]

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.

[guesswho]

i really love your videos. helps a lot

[athulgeorge]

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.

[rezafirouzabadi]

thanks for the short and useful video brother

[simple-stack-by-ed]

Straighter than an heterosexual alpha silverback man. Thx man!

[vishnumurthyjadi]

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

[sravanstg]

Thank you for such simple explanation.

[sauravkhanal]

Really cool man, may the code bless you🖖

[omarbarra]

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

[pelumioye]

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=" ?

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

[keerthanamalisetty]

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