How to Fetch Data from API with React Hooks | Example

If you haven't one already, you can create react application using create-react-app by running this command.

create-react-app

After successfully created app, create a file fetchData in /src/fetchData.js.

About useEffect() :

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. You should check out the docs.

Note –
Inside the component where you want to fetch a data, you must need to add a useEffect hook i.e.

import React, { useEffect } from "react"

export default () => {

    useEffect(() => {
        // Fetch data right here!
    }, [])

    return (
        <>
            <h1>You are welcome!</h1>
        </>
    )
}

As an Example, to load countries –

You should check out the Example