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:
Modify the App.js below:
Start the application using the following command:
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 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:
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.
I hope you enjoyed this post. Please share it.