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
Видео Infinite Scrolling With React - Tutorial канала Web Dev Simplified
🚨 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
Видео Infinite Scrolling With React - Tutorial канала Web Dev Simplified
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Learn useRef in 11 MinutesLazy loading is too easy nowStop Trying To Memorize Code - Do This InsteadBeginner React.js Coding Interview (ft. Clément Mihailescu)Introduction to the Intersection Observer JavaScript APIRendering large lists with React VirtualizedReact Infinity Scroll10 React Hooks Explained // Plus Build your own from ScratchReact Hooks TutorialCode Splitting with React, React.lazy, and React Router v5What You Need To Do To Become A Great DeveloperSimple Frontend Pagination | ReactLearn CSS Units In 8 MinutesReact and Intersection ObserverImprove react Performance with React Lazy Load Image.Learn Infinite Scroll in JavaScriptReact & Infinite Scroll - IntersectionObserverLearn useCallback In 8 MinutesRendering large lists with react-virtualized or react-window