How to Fetch Data from APIs Using useEffect React Hook

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:

Modify the App.js below:

Start the application using the following command:

yarn start

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

Setting up API data for our application

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

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:

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:

Output:

I hope you enjoyed this post. Please share it.