Fetching Data on Scroll with useEffect and useState
Demonstrate fetching data incrementally on scroll events in a React component using useEffect for side effects and useState to store the fetched data.
import React, { useEffect, useState } from 'react';
Imports react, useEffect, and useState from the 'react' library.
const InfiniteScrollComponent = () => {
Defines the functional component for infinite scroll.
const [data, setData] = useState([]);
Defines state 'data' to store fetched items, initially an empty array.
const fetchData = async () => {
Defines the fetchData asynchronous function to fetch data.
// simulate fetching data from an API
Comments indicating the simulation of a data fetch.
const newData = await fetch('https://example.com/api/items').then(res => res.json());
Fetches data from an example API and awaits its JSON response.
setData(prevData => [...prevData, ...newData]);
Updates the 'data' state by appending new data to previous data.
};
Closes the fetchData function.
useEffect(() => {
Uses the useEffect hook for side effects.
const handleScroll = () => {
Defines the scroll event handler function.
if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
Checks if the user has scrolled to the bottom of the document.
fetchData();
Calls fetchData function to load more data.
}
Closes the if condition.
};
Closes the handleScroll function.
window.addEventListener('scroll', handleScroll);
Adds a 'scroll' event listener to the window object to trigger handleScroll.
return () => window.removeEventListener('scroll', handleScroll);
Removes the event listener on component unmount to prevent memory leaks.
}, []); // Dependency array is empty, so this useEffect runs only once, akin to componentDidMount
Closes the useEffect block.
return ( <div>{data.map(item => <p key={item.id}>{item.title}</p>)}</div> );
Returns the JSX to render, mapping each item in data to a paragraph.
};
Closes the InfiniteScrollComponent functional component.
export default InfiniteScrollComponent;
Exports the InfiniteScrollComponent for use in other parts of the application.