Prerequisites<\/h2>\n
Before we dive into the implementation, make sure you have:<\/p>\n
- \n
- A basic understanding of React.<\/li>\n
- Node.js installed on your machine.<\/li>\n
- A simple React application set up using Create React App<\/strong> or similar.<\/li>\n<\/ul>\n
Setting Up the Project<\/h2>\n
Let\u2019s start by setting up a basic React application using Create React App<\/strong>. If you haven’t set up your project yet, you can do so with the following command:<\/p>\n
npx create-react-app infinite-scroll-demo<\/code><\/pre>\nNavigate into your project directory:<\/p>\n
cd infinite-scroll-demo<\/code><\/pre>\nThe Basic Structure<\/h2>\n
In this example, we’ll create a component called ImageList<\/strong> that fetches and displays images from an API. For demonstration purposes, we will use the JSONPlaceholder photo API<\/a>, which returns a set of images for free.<\/p>\n
Install Axios<\/h3>\n
To perform HTTP requests easily, let’s install Axios:<\/p>\n
npm install axios<\/code><\/pre>\nCreate ImageList Component<\/h3>\n
Create a new file called ImageList.js<\/strong> in the src<\/strong> folder:<\/p>\n
touch src\/ImageList.js<\/code><\/pre>\nOpen ImageList.js<\/strong> and set up a basic functional component:<\/p>\n
\nimport React, { useEffect, useState, useRef } from 'react';\nimport axios from 'axios';\n\nconst ImageList = () => {\n const [images, setImages] = useState([]);\n const [page, setPage] = useState(1);\n const [loading, setLoading] = useState(false);\n const observer = useRef();\n\n \/\/ Fetch images when the component mounts or page changes\n useEffect(() => {\n const fetchImages = async () => {\n setLoading(true);\n const response = await axios.get(`https:\/\/jsonplaceholder.typicode.com\/photos?_page=${page}&_limit=10`);\n setImages(prev => [...prev, ...response.data]);\n setLoading(false);\n };\n fetchImages();\n }, [page]);\n\n \/\/ Observer for infinite scroll\n const lastImageRef = useRef();\n useEffect(() => {\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: 1.0\n };\n\n const callback = (entries) => {\n if (entries[0].isIntersecting && !loading) {\n setPage(prevPage => prevPage + 1);\n }\n };\n\n observer.current = new IntersectionObserver(callback, options);\n if (lastImageRef.current) {\n observer.current.observe(lastImageRef.current);\n }\n\n return () => {\n if (lastImageRef.current) {\n observer.current.unobserve(lastImageRef.current);\n }\n };\n }, [lastImageRef, loading]);\n\n return (\n\nInfinite Scroll Images<\/h1>\n
\n {images.map((image, index) => (\n\n ))}\n <\/div>\n {loading &&
Loading more images...<\/p>}\n <\/div>\n );\n};\n\nexport default ImageList;\n<\/code><\/pre>\n
Understanding the Code<\/h2>\n
Let’s break down the key concepts in the ImageList<\/strong> component:<\/p>\n
1. State Management<\/h3>\n
We\u2019re using three pieces of state:<\/p>\n
- \n
- images:<\/strong> Stores the list of fetched images.<\/li>\n
- page:<\/strong> Controls the pagination of images being fetched.<\/li>\n
- loading:<\/strong> Manages the loading state when fetching more data.<\/li>\n<\/ul>\n
2. Fetching Data<\/h3>\n
We use the useEffect<\/strong> hook to fetch images whenever the component mounts or the page state changes. We append new images to the existing array using the spread operator:<\/p>\n
setImages(prev => [...prev, ...response.data]);<\/code><\/pre>\n3. Intersection Observer API<\/h3>\n
The Intersection Observer API allows us to detect when the last image comes into view. When the last image is visible, we increment the page number, triggering a new data fetch.<\/p>\n
Setting Up the Intersection Observer<\/h4>\n
Inside another useEffect<\/strong> hook, we create and configure an intersection observer:<\/p>\n
\nconst options = {\n root: null,\n rootMargin: '0px',\n threshold: 1.0\n};\n<\/code><\/pre>\nWith this setup, we observe the last image in the image list. When it is in view, we increase the page number.<\/p>\n
4. Cleanup<\/h3>\n
To prevent memory leaks, we unobserve the last image in the cleanup function of the effect:<\/p>\n
\nreturn () => {\n if (lastImageRef.current) {\n observer.current.unobserve(lastImageRef.current);\n }\n};\n<\/code><\/pre>\nStyling the Component<\/h2>\n
Let\u2019s add some basic styles for the image list. Create a new CSS file named ImageList.css<\/strong> and add the following CSS:<\/p>\n
\n.image-list {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.image-list img {\n width: 100px;\n height: auto;\n border-radius: 5px;\n}\n<\/code><\/pre>\nBe sure to import your CSS file in ImageList.js<\/strong>:<\/p>\n
import '.\/ImageList.css';<\/code><\/pre>\nIntegrating the Component<\/h2>\n
Finally, we need to integrate the ImageList<\/strong> component into our main application file. Open App.js<\/strong> and add the following code:<\/p>\n
\nimport React from 'react';\nimport ImageList from '.\/ImageList';\n\nfunction App() {\n return (\n\n \n <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\nTesting the Implementation<\/h2>\n
Run your application using the command:<\/p>\n
npm start<\/code><\/pre>\nOnce your app is running, you should see images being loaded seamlessly as you scroll down. The loading message will display while more images are being fetched.<\/p>\n
Conclusion<\/h2>\n
In this article, we explored how to implement an infinite scroll feature in a React application using the Intersection Observer API. This is a powerful technique that can significantly enhance user experience when dealing with large lists of data. Feel free to experiment with different APIs or datasets, and customize the implementation based on your app’s needs.<\/p>\n
Happy coding!<\/p>\n
Further Reading<\/h2>\n
- \n
- MDN Web Docs – Intersection Observer API<\/a><\/li>\n
- React Hooks Documentation<\/a><\/li>\n
- Axios – Promise based HTTP client for the browser and Node.js<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Implementing Infinite Scroll in React Infinite scrolling is a user interface pattern that allows users to load more content as they scroll down a page. This technique is particularly useful for applications displaying large sets of data, such as photo galleries or list views, providing a seamless experience without the need for pagination. In this<\/p>\n","protected":false},"author":98,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":["post-7603","post","type-post","status-publish","format-standard","category-react","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/98"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7603"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7603\/revisions"}],"predecessor-version":[{"id":7604,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7603\/revisions\/7604"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- React Hooks Documentation<\/a><\/li>\n
- page:<\/strong> Controls the pagination of images being fetched.<\/li>\n
- images:<\/strong> Stores the list of fetched images.<\/li>\n