Overview
Learn how to implement pagination in React with this comprehensive tutorial. Explore two full examples using React hooks and React Query to display pages of query data, create numbered buttons, and implement navigation functions for next, previous, first, and last pages. Dive into practical implementations using Axios for API calls and discover how to leverage React Query's features like useQuery, isPreviousData, and keepPreviousData. Follow along as the instructor guides you through creating reusable components, handling API data, and testing functionality. By the end of this tutorial, gain the skills to efficiently manage and display large datasets in your React applications.
Syllabus
Intro
Welcome
Installing dependencies
Tutorial Pace
Begin Example #1: Axios
React hooks only, Basic API
Post component
useEffect
Complete Example1 component
Check Example #1 functionality
Begin Example #2
User component
More useful API data
Axios instance #2
Example #2 imports
React Query: useQuery
React Query: isPreviousData and keepPreviousData
More Example2 component
PageButton component
Example2 JSX
Example #2 functionality
Change next & previous to first & last
Test the new functions
Taught by
Dave Gray