Hackernoon logoHow to Fetch Data from APIs Using useEffect React Hook by@muhammadhasan

How to Fetch Data from APIs Using useEffect React Hook

image
Muhammad Hasan Hacker Noon profile picture

@muhammadhasanMuhammad Hasan

15 years old. To be full stack serverless.

In this article, we will take a look at useEffect React hook to fetch data from an API. We will create a sample React application to pull data from the provider and use it in our application.

Setting up a basic React app

Let’s create a new React application using the following command:

npx create-react-app react-useeffect-demo

Open the application in the code editor:

image

Modify the App.js below:

image

Start the application using the following command:

yarn start

Once the application starts, the following screen will be displayed in the browser:

image

Setting up API data for our application

In order to fetch API data, we will be using Todos data provided by JSONPlaceholder.

Building the Application

In this section, we will be building the application. At first, we will enhance the App.js to fetch data from JSONPlaceholder and then we will write a small Todo component to display each todo.

Fetching data from the API

In order to fetch data, We have to enhanced App.js:

image

In App.js, our initial state is an empty array of todo. In useEffect, we are loading data from JSONPlaceholder using fetch with async-await. We used async-await as this an external API call and needs to be loaded asynchronously. Once the data is loaded, we are setting it through setTodo.

Todo.js:

image

Output:

image

I hope you enjoyed this post. Please share it.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.