Pagination and Infinite Scrolling with React Hooks
In the world of web development, making long lists of items like posts, products, or comments easy to navigate is super important. Two common ways to do this are Pagination and Infinite Scrolling. In this guide, we’ll walk through how to implement both of these techniques using React Hooks. Don’t worry if you’re new to React or programming – we’ll take it step by step!
Prerequisite:
Approach to Implement Pagination and Infinite Scrolling with React Hooks
Pagination Approach:
- useState: Utilize the useState hook to manage state variables such as
posts
,loading
, andcurrentPage
. - useEffect: Fetch data from the API when the
currentPage
changes, using the useEffect hook with a dependency oncurrentPage
. - Fetch Data: Fetch posts from the API based on the current page using
fetchPosts
function, which updates theposts
state and toggles theloading
state. - Handle Page Change: Implement a
handlePageChange
function to update thecurrentPage
state when the user navigates between pages. - Render: Render the fetched posts and display a loading indicator while data is being fetched.
Infinite Scroll Approach:
- useState: Similar to pagination, use the useState hook to manage state variables such as
posts
,loading
,page
, andhasMore
. - useEffect: Fetch data from the API when the
page
changes, using the useEffect hook with a dependency onpage
. - Fetch Data: Fetch posts from the API based on the current page using
fetchPosts
function, which appends new posts to the existing list and updates thehasMore
state. - Handle Scroll: Implement a
handleScroll
function that triggers when the user scrolls to the bottom of the page. If conditions are met (not loading, more posts available, scrolled to the bottom), increment thepage
state. - Render: Render the fetched posts and display a loading indicator while data is being fetched. Also, add a scroll event listener in useEffect to detect scrolling.
Steps to Build a Pagination and Infinite Scrolling With React Hooks
Step 1: Setup a new React App.
npx create-react-app project
Step 2: Navigate to the root directory of your project using the below command.
cd project
Step 3: Check `src` folder.
Inside src folder make changes for Pagination and then for Infinite Scroll. Replace the code inside the App.js.
First we will create Pagination then Infinitescroll. You just have to replace the code of App.js for both.
Pagination
Example: Below is an example of Pagination with React Hooks:
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.pagination {
display: flex;
justify-content: center;
}
h3 {
margin: 10px;
}
h1 {
background-color: green;
color: aliceblue;
padding: 10px 20px;
}
import React, {
useState,
useEffect
} from 'react';
import './App.css';
const Pagination = () => {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
fetchPosts();
}, [currentPage]);
const fetchPosts = async () => {
setLoading(true);
try {
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts?_page=${currentPage}&_limit=10`);
const data = await response.json();
setPosts(data);
} catch (error) {
console.error('Error fetching posts:', error);
} finally {
setLoading(false);
}
};
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
};
return (
<div>
<h1>Pagination</h1>
<div className="posts">
{posts.map(post => (
<div key={post.id} className="post">
<h2>{post.title}</h2>
<p>{post.body}</p>
</div>
))}
{loading && <div>Loading...</div>}
</div>
<div className="pagination" >
<button onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}>
Previous
</button>
<h3>
{currentPage}
</h3>
<button onClick={() => handlePageChange(currentPage + 1)}>
Next
</button>
</div>
</div>
);
};
export default Pagination;
Start your application using the following command.
npm start
Output:
Infinite Scrolling
Example: Below is an example of Infinite Scrolling With React Hooks:
/* Write CSS Here */
h1 {
text-align: center;
background-color: green;
color: white;
padding: 10px 20px;
}
h2 {
color: red;
}
import React, {
useState,
useEffect
} from 'react';
import './App.css';
const InfiniteScroll = () => {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
useEffect(() => {
fetchPosts();
}, [page]);
const fetchPosts = async () => {
setLoading(true);
try {
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`);
const data = await response.json();
setPosts(prevPosts => [...prevPosts, ...data]);
setHasMore(data.length > 0);
} catch (error) {
console.error('Error fetching posts:', error);
} finally {
setLoading(false);
}
};
const handleScroll = () => {
if (!loading && hasMore &&
window.innerHeight + document.documentElement.scrollTop >=
document.documentElement.scrollHeight - 20) {
setPage(prevPage => prevPage + 1);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [loading, hasMore]);
return (
<div>
<h1>Infinite Scroll</h1>
<div className="posts">
{posts.map(post => (
<div key={post.id} className="post">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
))}
<h2>
{loading && <div>Loading...</div>}
</h2>
</div>
</div>
);
};
export default InfiniteScroll;
Output :
Conclusion
And that’s it! You’ve now learned how to implement pagination and infinite scrolling using React Hooks. These techniques are essential for creating user-friendly interfaces for long lists of data. Feel free to experiment with the code and customize it to fit your needs. Happy coding!