Infinite Scrolling With React - Tutorial
Why Stack Overflow recommends it
Stack Overflow users link it when someone needs a from-scratch React infinite scroll or lazy-loading implementation without a third-party library.
Recommended by 2 people across 2 different months, 2020 to 2022.
What it is
A 25-minute React tutorial from Web Dev Simplified that builds infinite scrolling from scratch. It treats infinite scroll as pagination triggered by scrolling, and uses the IntersectionObserver API with the useEffect, useState, useRef and useCallback hooks instead of a scroll event listener.
What people said
Recommends Ashwin Rao K · 2020-05 · Stack Overflow · on “How to start rendering before json response is completed react native”
You can use infinite scrolling like you see in the youtube or facebook they load certain number of documents and then as you scroll it loads more data here is an link to that [this video] its in react so it will be helpful
Recommends Mohamed Ashraf · 2022-10 · Stack Overflow · on “Lazy Loading Implementation In HTML Table in React JS”
There're two ways that we can use in this situation : 1- React-Window library : [LINK] 2- Create lazy loading behaviour from scratch, but this will need some changes in the backend, as we will divide the data into pages and send a page ( which will contain n records ) at a time, you can see how to implement it here : [this video]
Cites Code freshman · 2021-03 · Stack Overflow · on “How to use InfiniteScroll in React”
My idea is : when I click into the page, the page will send a axios request for the top 30 data and show them in the InfoCard. After that, when I scroll to the end of the page it will send a new axios request for the next 30 data and show them in the InfoCard. I watched this tutorial and tried it myself but I still not sure how it works. [this video] //TestScreen3.js function TestScreen3() { const [topNdata, setTopNdata] = useState(30) const [skipNdata, setSkipNdata] = useState(0) const { loading, ScenicSpot, hasMore } = RequestTest(topNdata, skipNdata) return ( <div className="App"> <header className="App-header"> <Navbar NavbarTitle="Scenic Spots" /> <CityList /> {ScenicSpot.map((infoCard) => (
Cites wuku · 2021-07 · Stack Overflow · on “reset new array reactjs infinite scroll”
I have tried infinite scroll for reactjs from this link [this video] and work perfectly. But I want to improve with my condition. I have make infite scroll for case products, the product has sub_category and sub_category has one category. For example I have one page showing all products by category (it's showing all sub_category). The user can choose the product base sub_category (the page showing just what user choose for sub_category). And my problem is I don't know to reset product variable as new array to fullfill products from sub_category. I have two component ListInfiteTwo.jsx and UseProductSearch.jsx ListInfiteTwo.jsx import React, { useEffect, useState, useRef, useCallback } from 'react'
Cites Kedar K · 2022-06 · Stack Overflow · on “How to Implement Infinite Scrolling with Infinite Data in React?”
1 . Use react-infinite-scroll-component [LINK] . Follow instructions in documentation. You can see basic example here [LINK] . Here initially array have 20 elements and fetchMoreData function concatinate 20 more elements to it. Basically you are concatinating, next elements in in array and adding them over, this is the concept of infinite-scroll. For furthur references, link1 [LINK] , link2 [this video] . Or 2 . You can implement you custom scrolling as well, like this [LINK]