How to Fetch Data in React from API | How to Fetch Data from API in React JS Asynchronously

welcome to F Star Plus how to fetch data from an API using react.js fetching data from an API is a common task in web development and react.js makes it easy to do so but there are certain steps involved to do it properly we can use Fetch with async await to get the data store it in state and show a loader before data is displayed on the page in this video we will look into that but before that give this video a like subscribe to the channel if you haven't already because I am bringing similar content on this topic okay first we will need to import use State and use effect hooks from react use statehook allows us to store data in state use effect hook allows us to perform side effects such as fetching data after the component has rendered in the component declares State variables using the use State hook learning to display loading when data is being fetched and records a state variable will hold the data that we will fetch from the API note that loading state has Boolean value that is true it will be true or false records state has empty array value initially this will be array because then we will be able to map this array or manipulate data from this array we can manipulate data from array using array methods there are plenty of array methods available before return this is use effect hook inside the user effect hook use the fetch API to fetch data from the API endpoint this is dummy Avi for testing purpose Json placeholder they have this method to show how fetch is used the fetch function returns a promise that resolves to the response object which we then convert to Json using the Json method let's copy this save console and this is one record that we've got now this is working I want to display to-do list from API to those copy the URL Place URL inspect console ID title ID and title we've got the data records 200 records so we changed the end point this is end point API endpoint comment the console log then data set records data set records populate fetched data for this date records update State variable records with the first data using the setter function returned by the use State hook this is Center function set records for records State variable components app and here we've got the data instead let's remove this console log so data is there now we have to render the fetched data in component but before that let's handle loading before fetching data set loading to true after data has been stored in state set loading to false in state now this is ternary operator or conditional if loading is true loading text just this string otherwise show something else that's something else is our data return div records from State if we have records in state map records and let's say end records item is single record use unique ID item dot ID as key and display the title from each item in record item dot title save and we've got the records data is being displayed so we used the use statehook to declare the state variables for loading and Records two states records State initially contained an empty array inside the use effect hook we used fetch API to fetch data from the API endpoint this is end point for API URL and then we updated the state variable records by using set records Setter function with the first data and then we rendered the First Data in component by mapping our the records array and rendering each item as a div element containing title this here can be used to mention dependencies for use effect we can add dependencies here when this dependency will change use effect will be recalled so the data is being displayed but we are not done yet this code can be improved we can use Fetch with asyncavate and this code can use a separate function because we want to keep use effect clean for that declare a separate function with async keyword set loading to true and files at start and the end of function in the middle use Fetch with a weight keyword then use response dot Json with a weight keyword and then if data is present update state now we can call this function here instead of all this just like this and it's working only function call in use effect this is clean right now if we have to fetch more data we can Define more functions like this outside the fuse effect and then we can fetch more data and use function calls in use effect like this to keep the code clean and easy to understand and you can also use try catch like this and I have used Arrow function here if you don't want to use Arrow function you can declare this function like this function fetch API use async keyword before the function keyword it will also work foreign what is its benefit async or weight is a way to write asynchronous code in a more readable way in traditional asynchronous programming callbacks or promises are used to handle the execution of code that takes some time to complete such as Network requests or file operations this can lead to code that is difficult to read and the reason about as callbacks can be nested and hard to follow with async await you can write a synchronous code that is more readable the async keyword is used to declare a function as asynchronous and the await keyword is used to pass the execution of the function until A promise is resolved here defense API function is declared as asynchronous using the async keyword and the await keyword is used to pass the execution of the function until the promise returned by a fetch is resolved the code is more readable and easier to understand as the flow of control is clear and the error handling is centralized this is what async and await is all about the code is clean we used Fetch with async await and try catch we used loading State we fast the data and displayed it using array map method that's all for this I hope I explained it in detail okay I hope it helped like share subscribe and I will see you in the next video

Channel: WebStylePress

Views: 2,683

Keywords: react, reactjs, react js, js, javascript, fetch, fetch api, Fetch Data from API Using React JS, Fetch Data from API, Fetch API React JS, Fetch Data React JS, Fetch Data React, fetch async await, fetch data with loading, react tutorial, try catch javascript, async await, async, await, async await javascript, fetch api javascript, fetch api in react js, how to fetch data in react from api, How to Fetch Data from API in React JS Asynchronously, how to fetch data from api in react

Id: doFgVhklPC0

Length: 11min 8sec (668 seconds)

Published: Thu Feb 23 2023