Mastering the application of useEffect in React hooks

Do you remember when componentDidMount was so popular? Honestly I didn’t know much about it back then(😁 even till this day…shh). You had to mount components, unmount components, check if it updated or not, 🤯 gosh just a lot going on………then came useEffect 😎.

useEffect has been in existence for quite a while now. I personally love it and make use of it. It couldn’t be easier without the try-catch block(might change in the nearest future). Wait, you don’t know about try-catch 🧐? Read about it here

Let’s start coding, and I will explain as we go. For this session, we will be creating a weather app by calling our API(Application Programming Interface) from OpenWeather, sign-up there to get your API key and the gist of the data flow.

Get your code editor running, and let’s begin.

For the recent React, you do not need to import react from “react” again, just the components needed.

We will be needing Fragment, useState and useEffect for now, in your App.js file.

Install axios either using yarn or npm

import { Fragment, useState, useEffect } from “react”;

import axios from “axios”;

Now this how we will build it. Inside the App.js file, we will have a function(useApi) that handles the API logic(fetching data and error, knowing the load state-isLoading…), and another (App) that handles the form inputs and data display. Do you get that? Yes. Let’s continue, No. Read over again slowly and proceed. 👇🏾

Four basic things we need to do in the const useApi = () => { … } function.

We need to set a state for the url we will be using

We need to set a state for the data we will be getting

We need to set a state to for the loading activity — to know if it is loading while trying to fetch data or loaded.

We need to set a state for the error handling.

const [url, setUrl] = useState(

“https://api.openweathermap.org/data/2.5/weather?q=london,uk&appid=API_KEY”

);

const [data, setData] = useState({…}); //we will get back to this

const [loading, setLoading] = useState(false);

const [error, setError] = useState(false);

Getting back to the data state, we need to instantiate the type of data we will be getting as shown here. We know it is an object already, but we need to access the object data(coord, weather,main & wind). How do we do that? 🕵🏾‍♂️

First, we check the type of data they are(object or array or both), second, we use it to set the state. Watch. Place the code below inside the data useState, in between the { }

“cord”: {},

“weather”: [],

“main”: {},

“wind”: {},

We will be using async-await in the useEffect

useEffect(() => {

const fetch = async () => {

setLoading(true);

setError(false);

try {

const response = await axios(url);

setData(response.data);

} catch (error) { setError(true) }

setLoading(false);

},

fetch()

}, [url]);

Now, what the heck did I just write 🙆🏾‍♂️