Master Infinite Scrolling in Easy Steps

WBOY
Release: 2024-08-18 07:04:35
Original
904 people have browsed it

Master Infinite Scrolling in Easy Steps

Infinite Scrolling

We can implement infinite scrolling using the IntersectionObserver API given by browser.
To implement we can simply follow these steps :-

  1. We can use a mock API for our infinite scrolling and then create a custom hook
  2. This custom hook with take the parameters of the API as its own parameter of function.
  3. Then we can implement simply the API call, using useEffect and axios, passing in the parameters from the functional parameters.
  4. We can have loading, error, hasMore and data as state
  5. We can then also use setTimeout so that we can properly check for loading as well as infinte scrolling
  6. hasMore will be equivalent to the length of array of data we are showing currently in page compared with what we get from api call
  7. This hasmore is there to avoid calls even when we reached end of our data.
  8. Once the custom hook is present in our main page we will create state of the parameters that we were passing
  9. Then we will pass the parameters to our custom hooks and reterieve the data
  10. The list of data that we get we will render it using map and then display it
  11. Now we need to apply infinte scroll once we reach end so for the last element data of the array we receive we will simply add a ref
  12. This ref will be equivalent to a useCallback function, whose parameter will be this last element.
  13. Next we will create a useRef whose value will be by default null
  14. Now we will check if we are in loading state or not. If yes we will simply return
  15. Next we will check if this useRef current value is null or not. If not null we will simply disconnect this observer. The idea here being that the observer should be new each time,since each time we will have new data
  16. Now we will assign this new observer.current value of callback function by new IntersectionObserver.The IntersectionObserver API will return a callback function, with entries as parameter.
  17. These entries are basically the value of our last element when it is in the page.We want the condition when we will interact with these entries in page
  18. So we have a boolean value for each entries. isIntersecting
  19. When this is true we will make the parameters of the custom hook to change. This will inturn call the api again and render also again
  20. Lastly we need to observe the element we have passed in callback, so if we have the element we will simply observe it.

Code

CustomHook.jsx

import axios from "axios"; import { useEffect, useState } from "react"; import { API_URL } from "../common/constants"; export const useAuthorList = (limit, page) => { const [isLoading, setIsLoading] = useState(false); const [authorList, setAuthorList] = useState([]); const [error, setError] = useState(""); const [hasMore, setHasMore] = useState(true); useEffect(() => { setIsLoading(true); setTimeout(() => { axios({ method: "GET", url: API_URL, params: { limit: limit, page: page }, }) .then((res) => { setAuthorList(res.data.data); setHasMore(res.data.data.length === limit); setIsLoading(false); }) .catch((e) => setError(e)); }, 500); }, [limit, page]); return [isLoading, authorList, error, hasMore]; };
Copy after login

App.jsx

import React, { useCallback, useRef, useState } from "react"; import { useAuthorList } from "./hooks/useAuthorList"; import { AuthorQuotes } from "./components/AuthorQuotes"; const App = () => { const [limit, setLimit] = useState(10); const [page, setPage] = useState(1); const [isLoading, authorList, error, hasMore] = useAuthorList(limit, page); const observer = useRef(null); const infiniteReference = useCallback( (element) => { if (isLoading) return; if (observer.current) { observer.current.disconnect(); } observer.current = new IntersectionObserver((entries) => { if (entries[0].isIntersecting && hasMore) { setLimit((prev) => prev + 10); } }); if (element) { observer.current.observe(element); } }, [isLoading, hasMore] ); return ( 
{authorList.length > 0 && authorList.map((authorQuotes, index) => { if (index + 1 === authorList.length) { return ( ); } return ; })} {isLoading && <>Loading...}
); }; export default App;
Copy after login

constants.js

export const API_URL = "https://api.javascripttutorial.net/v1/quotes/"
Copy after login

The above is the detailed content of Master Infinite Scrolling in Easy Steps. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!