In this article, we will take a look at 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. useEffect 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 below: App.js 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 . 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 , we are loading data from JSONPlaceholder using . We used as this an external API call and needs to be loaded asynchronously. Once the data is loaded, we are setting it through . useEffect fetch with async-await async-await setTodo Todo.js: Output: I hope you enjoyed this post. Please share it.
