Most apps you’ll develop will manage data; as programs continue to scale, there can be an increasingly vast amount of it. When applications fail to manage large amounts of data effectively, they perform poorly.
Pagination and infinite scrolling are two popular techniques you may use to optimize app performance. They can help you handle data rendering more efficiently and enhance the overall user experience.
Pagination and Infinite Scrolling Using TanStack Query
TanStack Query—an adaptation of React Query—is a robust state management library for JavaScript applications. It offers an efficient solution for managing application state, among other functionalities, including data-related tasks such as caching.
Pagination involves dividing a large dataset into smaller pages, allowing users to navigate the content in manageable chunks using navigation buttons. In contrast, infinite scrolling provides a more dynamic browsing experience. As the user scrolls, new data loads and displays automatically, eliminating the need for explicit navigation.
Pagination and infinite scrolling aim to efficiently manage and present large amounts of data. The choice between the two depends on the application’s data requirements.
You can find this project’s code in thisGitHubrepository.
Setting Up a Next.js Project
To get started, create a Next.js project. Install thelatest version of Next.js 13 which uses the App directory.
Next, install the TanStack package in your project usingnpm, the Node package manager.
Integrate TanStack Query in the Next.js Application
To integrate TanStack Query in your Next.js project, you need to create and initialize a new instance of TanStack Query in the root of the application—thelayout.jsfile. To do that, importQueryClientandQueryClientProviderfrom TanStack Query. Then, wrap the children’s prop withQueryClientProvideras follows:
This setup ensures that TanStack Query has complete access to the application’s state.
Implement Pagination Using the useQuery Hook
TheuseQueryhook streamlines data fetching and management. By providing pagination parameters, such as page numbers, you can easily retrieve specific subsets of data.
Additionally, the hook provides various options and configurations to customize your data-fetching functionality, including setting cache options, as well as handling loading states efficiently. With these features, you may effortlessly create a seamless pagination experience.
Now, to implement pagination in the Next.js app, create aPagination/page.jsfile in thesrc/appdirectory. Inside this file, make the following imports:
Then, define a React functional component. Inside this component, you need to define a function that will fetch data from an external API. In this case, use theJSONPlaceholder APIto fetch a set of posts.
Now, define the useQuery hook, and specify the following parameters as objects:
ThekeepPreviousDatavalue istrue, which ensures that, while fetching new data, the app preserves the previous data. ThequeryKeyparameter is an array containing the key for the query, in this case, the endpoint and the current page you want to fetch data for. Lastly, thequeryFnparameter,fetchPosts, triggers the function call to fetch data.
As mentioned earlier, the hook provides several states that you can unpack, similar to how you woulddestructure arrays and objects,and utilize them to improve the user experience (rendering appropriate UIs) during the data fetching process. These states includeisLoading, isError, and more.
To do that, include the following code to render different message screens based on the current state of the ongoing process:
Finally, include the code for the JSX elements that will render on the browser page. This code also serves two other functions:
Lastly, start the development server.
Then, head over tohttp://localhost:3000/Paginationin a browser.
Since you included thePaginationfolder in theappdirectory, Next.js treats it as a route, allowing you to access the page at that URL.
Infinite Scrolling Using the useInfiniteQuery Hook
Infinite scrolling provides a seamless browsing experience. A good example is YouTube, which fetches new videos automatically and displays them as you scroll down.
TheuseInfiniteQueryhook allows you to implement infinite scrolling by fetching data from a server in pages and automatically fetching and rendering the next page of data as the user scrolls down.
To implement infinite scrolling, add anInfiniteScroll/page.jsfile in thesrc/appdirectory. Then, make the following imports:
Next, create a React functional component. Inside this component, similar to the pagination implementation, create a function that will fetch the posts' data.
Unlike the pagination implementation, this code introduces a two-second delay when fetching data to allow a user to explore the current data while they scroll to trigger a refetch of a new set of data.
Now, define the useInfiniteQuery hook. When the component initially mounts, the hook will fetch the first page of data from the server. As the user scrolls down, the hook will automatically fetch the next page of data and render it in the component.
Thepostsvariable combines all the posts from different pages into a single array, resulting in a flattened version of thedatavariable. This allows you to easily map over and render the individual posts.
To track user scrolls and load more data when the user is close to the bottom of the list, you may define a function that utilizes the Intersection Observer API to detect when elements intersect with the viewport.
Lastly, include the JSX elements for the posts that render in the browser.
Once you have made all the changes, visithttp://localhost:3000/InfiniteScrollto see them in action.
TanStack Query: More Than Just Data Fetching
Pagination and infinite scrolling are good examples that highlight the capabilities of TanStack Query. Simply put, it’s an all-around data management library.
With its extensive set of features, you can streamline your app’s data management processes, including efficient handling of state. Alongside other data-related tasks, you can improve the overall performance of your web applications, as well as the user experience.
