+ Get unlimited access to the best of Medium for less than $1/week. Become amember x How to implement scroll pagination in MERN application A Usama Sattar - Follow Y 3mintead - Nov 10,2023 Se Q n © GPagination plays a vital role in optimizing user experience by breaking down extensive data into manageable portions. In the realm of MERN (MongoDB, Express, React, Node.js) applications, the integration of pagination enhances the efficiency of handling large datasets, such as blog posts, products, or user-generated content. This comprehensive guide will explore the seamless implementation of pagination within a MERN stack, using front-end React components that interact with back-end Express APIs. We'll use MongoDB’s powerful querying capabilities, alongside Node.js for server-side logic, to create a smooth pagination system. By the end, you'll have a solid understanding of how to structure and implement pagination. Backend (Node js and Mongo db) To enable pagination in a MERN application, the first step is defining an Express route to fetch paginated user data. This route triggers a controller method responsible for interacting with the database and retrieving the specific subset of users. router.get("/users", getAllUsers) ; Now, create controller function to fetch paginated users. The controller function receives page from query, calls service function and sends resposne. //controUler static asyne getAllsers(req, res) { let page = req.query.page //starts from 0let users= await UserService.getUsersPaginated (page) ‘if (users && users.length > 6) { res. json(users) } else { res.json("users not found") } The service function uses limit, sort, and skip functions of mongo db to facilitates the extraction of a specified subset of data. /{service const getUsersPaginated = async (page) => { let resultsPerPage = 10 return await UserModel. Find ({}) ssort({ createdAt: ‘descending’ }) sTean() - Limit (resultsPerPage) -skip(page * resultsPerPage) Now, our backend is ready, we need to implement frontend using React. Frontend (React js) We will create states to deal with users and page number. Below code gets initial data inside useEffect hook. Whenever user changes page number, the index state triggers useEffect to fetch more data and append it the previous users state, const [users, setUsers] = useState([]); const [index, setIndex] = useState(9) ;useEffect(() => { const getUsers= async (index) => { const response = await axios.get(” /users?page=0") 5 setNot’ fications (response. data) ; % getUsers(a); +, 15 useEffect(() => { if Gindex t== 0) { appendData() ; Openinapp 7 Q Search Awe O | const temp = [...users]; const loadedbata = response.data; const appended = temp.concat (loadedData) ; setUsers appended) ; a const fetchData = async () => { setIndex((prev) => prev + 1); oH In this example we are using scroll pagination, so we need to install react- infinite-scroll-component library using npm or yarn. npn i react~infinite-scroll-component Now everything is ready we need to make component UI.