How to Fetch data from API's in 1 min?

Photo by Luca Bravo on Unsplash

You have already heard about APIS and we need to integrate APIs with a frontend to call data from servers.

In modern react we use the useEffect hook to fetch data from API.

useEffect hook is used to fetch data, or manually changing the DOM in React components.

In the above example, we are changing in DOM after clicking on the count button by changing variable by count+1

Inside teh useEffect hook we call a function called fetch(url) with parameter of the api link we want to fetch data from

Here we are fetching articles from the local DB I have created on port 8000 you can have any link you want in place of that.

As we are getting a promise as return here we need to call .then function and return response.json and again call .then function to set data

Now understand How it works in 3 simple step

Step 1

Call fetch function with url as parameter in useEffect Hook.

Step 2

Call .then function and return response as res,json function

Step 3

Again to handle promise as we have now data as an object setState to object data

Below is the code attached to give you insight over above three steps

These 3 steps will be universal for calling any apis data in modern Reactjs .

Follow me on Instagram to learn more about React js fundamentals

Website and Mobile App developer (React JS) l Portfolio: www.thebrandwick.com