Fetching API using useEffect hook in React.js

Introduction

Hello fellow readers! In this tutorial we will see how we can perform API calls using inside React.js application.
For this we will use the useEffect() hook, and Axios library.

Prerequisites

As always we need to have Node and NPM or Yarn installed. My versions for NPM -v (6.14.11) and Node -v (14.16.0)

Having said this we can create fresh React application.
npx create-react-app “your-app-name”. Now let’s start our fresh application with npm start. We should see this:

We are all set, now let’s dig in. We will install previously mentioned Axios library with:

npm install axios

We are now ready to create a React component and use our Hook in it.
Create folder called Components and inside it file Posts.js, like so:

Very basic component with just simple h1, so we can be sure that we are on the right track!
We will have to insert our Posts component into App.js file.
This is what we have. We got rid of all starter code in App.js and we now have only Posts component.

Get back to the browser and sure enough we get our Posts heading.

Okay now we are ready to move on. I will use Posts api from jsonplaceholder, now exact same thing will work if you work with your own api.
We will start by making get request to `https://jsonplaceholder.typicode.com/posts`, and we’ll log results to see what we got.

Simple function which returns axios get request, and afterwards we are just calling the function itself, just so we can see the results. Since I have this logic in separate function, you can guess that this will come from separate file like service or something similar. :)
Sure enough, we see 100 posts in our console.

Since we don’t like calling function, we will take advantage of useEffect() hook and make a http request that way.

We first imported useEffect from react and then we are using it inside our component. Like I said before, the only reason I left getPosts() function inside is that I am trying to simulate having service inside of our application.
Anyhow, we are calling the function inside useEffect and we are leaving the Dependency list array empty, cause at the moment we are not depending on anything.
This particular situation is basically the same exact thing as componentDidMount() method, if we were using class based component.

And of course, we do have our posts the same as before.

Now let’s just show them on screen, so we can get the whole picture.
I will save posts in a variable, and then map trough and show ’em on screen.

For this, we will use the hook we learned in previous post and that is useState() hook. This is what we will have:

And how it looks on page:

Nothing fancy, we did not use any css library or wrote custom css as it was not the purpose of this article.

This is it guys, we’ve seen how to make a component and use useEffect() hook to load some data, combined with Axios http requests and useState() hook so we can store data inside our component. Next we mapped trough the data and rendered it to the page.

Hope you liked it and be sure to check out my previous articles:

.Net with JWT Authentication and React SPA with .NET Core 5

and to share and leave a comment.
You can always support me with a cup of ☕

LinkedIn: www.linkedin.com/in/filip-tonic
Email: tonicfilip@outlook.com