Paginating Your React Application Using Hooks

Here we will go into steps on building fully function simple paginated react application with the use of hooks.

Setup and installation

The data source for this project can also be served from anywhere you can find the sources where you can get the data from here. But we will be using a simple resource for our data called JsonPlaceholder. We will be getting the list of all the post we have and later move towards paginating it.

Gist Link

Fetching all data

We will move towards writing our code to fetch all the data we can receive from our endpoint. For that we will make the use of useEffect hook. Also we need to add an empty [] to the last so that it don’t evoke when the DOM updates every time.

Gist Link

Adding desired list in UI

We will show only the desired list into our interface and the rest we will later add pagination to reflect it into our UI. For this we need to add bit of logic into our app. We will add posts of the current page into our new state we define.

Gist Link
Gist Link

Adding pagination

Now, here in the last step we can get into sending down the props to our Paginate component which is the current page number we are at, which we have already logic for that function.

Gist Link
Gist Link

Written by

Product Designer and Frontend Developer | https://twitter.com/ishan02016

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store