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

Показать описание

How to fetch data in react from API? 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.

This video addresses how can we fetch data from API in React JS.

First we will need to import useState and useEffect hooks from react. The useState hook allows us to store data in state. The useEffect hook allows us to perform side effects, such as fetching data, after the component has rendered. In the component, declare state variable using the useState hook. loading to display loading when data is being fetched and records state variable will hold the data that we will fetch from the API.

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 in array. We can manipulate data from array using array methods. There are plenty of array methods available.

Use useEffect hook. Inside the useEffect hook, use the fetch API to fetch data from the API endpoint. Use dummy API like JSONPlaceholder. The fetch function returns a promise that resolves to the response object, which we then convert to JSON using the json method.

Update the state variable 'records' with the fetched data using the setter function returned by the useState hook. Render the fetched data in component. Before fetching data, set loading to true. After data has been stored in state, set loading to false in state.

Use ternary operator or conditional. If loading is true, show loading text, otherwise show something else. That something else is our data. if we have records in state, map records. And let's say in records, item is a single record. Use unique id as key and display the title from each item in records.

So, we used the useState hook to declare state variables for loading and records. The 'records' state initially contained an empty array. Inside the useEffect hook, we used the fetch API to fetch data from the API endpoint and updated the state variable with the fetched data using the setRecords setter function.

We rendered the fetched data in the component by mapping over the records array and rendering each item as a div element containing title. Data is being displayed.

We can use fetch with async await. And it can use a separate function. Because we want to keep useEffect clean.

Now if we have to fetch more data, we can define more functions, fetch more data and use function calls in useEffect to keep the code clean and easy to understand. And you can also use try catch.

I have used arrow function for this function, if you don't want to use arrow function, you can do so. Just use async keyword before function keyword. It will all work.

What is async and await? Async/await 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 reason about, as callbacks can be nested and hard to follow.

With async/await, you can write asynchronous code that is more readable. The async keyword is used to declare a function as asynchronous, and the await keyword is used to pause the execution of the function until a promise is resolved. Here, the fetchAPI function is declared as asynchronous using the async keyword, and the await keyword is used to pause the execution of the function until the promise returned by 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.

If you want to know how to fetch data from api in react or how to fetch data from api in react typescript or how to fetch data from rest api in react js, just let me know in comments.

Code:

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#WebStylePress #WebDevelopment #trycatch #async #asyncawait #await #js #javascript #react #reactjs #fetch #fetchapi #api