Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Infinite Scrolling With React - Tutorial
Play lesson

React - Infinite Scrolling With React - Tutorial

Discover React Mastery: From Essential Concepts to Advanced Hooks, Master React Development with Real-World Projects and Boost Your Skills in Record Time!

4.0 (0)
12 learners

What you'll learn

Understand the fundamental concepts of React, including components and hooks.
Differentiate between React state and props and their respective uses.
Build and enhance web applications using React, including implementing features like infinite scrolling and currency conversion.
Apply React best practices to optimize application performance and debugging processes.

This course includes

  • 43.3 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

FAQs

Course Hive
Download CourseHive
Keep learning anywhere