Infinite scrolling is incredibly common especially in social media applications, but it is intimidating to setup. In this video I will be breaking down exactly how to setup infinite scrolling and why it is much easier than it appears. Infinite scrolling is really just a fancy type of pagination that will paginate without the user needing to click a button. This means that we can setup simple pagination, but instead of hooking it up to a button we need to hook it up to scrolling. Setting up a JavaScript event on scroll is not very performant, though, so we will be using the amazing InteresectionObserver API to efficiently check for when the last element of our list is loaded.
🚨 IMPORTANT:
If you want to learn React in depth checkout my full modern React course.
[ Ссылка ]
📚 Materials/References:
GitHub Code: [ Ссылка ]
🧠 Concepts Covered:
- How to use React hooks
- useEffect, useState, useRef, useCallback hooks
- IntersectionObserver with React
🌎 Find Me Here:
My Courses: [ Ссылка ]
Patreon: [ Ссылка ]
Twitter: [ Ссылка ]
Discord: [ Ссылка ]
GitHub: [ Ссылка ]
CodePen: [ Ссылка ]
#React #WDS #InfiniteScrolling
Infinite Scrolling With React - Tutorial
Теги
webdevsimplifiedinfinite scrollinginfinite scrollinfinite scrolling reactinfinite scrolling jsinfinite scroll reactinfinite scroll jsinfinite scroll javascriptinfinite scrolling javascriptinfinite scrolling with reactinfinite scroll tutorialinfinite scroll react tutorialreact hooks projectreact projectreact tutorialreact paginationintersection observerintersection observer tutorialintersection observer reactintersection observer apireact