Thu Dec 2019 3 years ago

Infinite Scrolling With React - Tutorial

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.
https://courses.webdevsimplified.com/learn-react-today


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/React-Infinite-Scrolling


🧠 Concepts Covered:

- How to use React hooks
- useEffect, useState, useRef, useCallback hooks
- IntersectionObserver with React


🌎 Find Me Here:

My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#React #WDS #InfiniteScrolling