React Infinite Scroll like YouTube, Instagram | with Animation

🤩Access the Full React Course - www.udemy.com/course/the-ulti...
🗒️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/course/the-ulti...
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.com/api/v3/coin...
Source Code : github.com/CodeBlessYou/Infin...
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/user/code-bless...
🤩INSTAGRAM : / code_blessyou
💙FACEBOOK : / 100077716056158
🐦TWITTER : / code_blessyou
😎LINKEDIN : / code-bless-you-5b76822b
COPYRIGHT FOOTAGE LINKS
Video by Anna Tarazevich: www.pexels.com/video/stressed...
Video by cottonbro: www.pexels.com/video/hands-ip...
Timer icons created by Pixel perfect - www.flaticon.com/free-icons/t...
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); } };

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

[@dannyng48]

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

[@CodeBlessYou]

Thank you man, I am grateful for this comment😇❤

[@canklc5772]

agree

[@devworks8787]

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

[@CodeBlessYou]

Thank you so much❤❤❤

[@LaFragas]

super fast and perfect, thank you!

[@CodeBlessYou]

Thank you so much for this comment❤

[@abdelhakmehda]

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

[@CodeBlessYou]

Thanks brother😀

[@quanganh2849]

Simple and on point. Tks a lot bro keep doing

[@CodeBlessYou]

Thanks for your support❤❤

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

[@guesswho4633]

i really love your videos. helps a lot

[@CodeBlessYou]

Grateful for your support 😇❤

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

[@rezafirouzabadi176]

thanks for the short and useful video brother

[@CodeBlessYou]

😇❤

[@simple-stack-by-ed]

Straighter than an heterosexual alpha silverback man. Thx man!

[@CodeBlessYou]

😅😅❤❤

[@immanuelrajmohan830]

thank u bruh very short and simple

[@CodeBlessYou]

You're welcome!

[@sauravkhanal]

Really cool man, may the code bless you🖖

[@CodeBlessYou]

Thanks, Same to you❤❤❤

[@antrikshsingh2503]

Well Explained :)

[@CodeBlessYou]

Thanks for Feedback😀

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

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

[@dhruvkaravadiya3645]

amazing video bhai

[@CodeBlessYou]

Thank you brother❤

[@sakibcoder]

great man

[@CodeBlessYou]

❤❤❤

[@giovankoulits8602]

Very helpful vid

[@CodeBlessYou]

❤❤❤❤

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

[@mylow_____]

yeeeeessssss

[@weverton.santiago]

Thanks new subs here

[@CodeBlessYou]

Thanks for subscribing😇❤

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

[@Its_Abhi_Thakur]

Thanks bro

[@CodeBlessYou]

Thanks for Feedback😀

[@charankumarbasam5866]

Good video.

[@CodeBlessYou]

Thanks😃

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

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

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

[@roycechriston5389]

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

[@CodeBlessYou]

Sure, All the best❤❤❤

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

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

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

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

[@Chavaka_cheap]

❤

[@CodeBlessYou]

❤❤❤

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

[@alpalasaul]

What is that theme you use?

[@CodeBlessYou]

AYU Dark❤❤

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

[@charankumarbasam5866]

make a video on intersection observer

[@CodeBlessYou]

Sure😀

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

[@anjalii1102]

are you gujarati

[@CodeBlessYou]

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