Fetching data and creating a custom hook. 🪝
Tags: react, typescript, 100daysofcode, webdev
Published: 2022-06-18 00:35:15

The purpose of this post is to teach a way how to make HTTP GET type requests by using React and a custom hook.

>🚨 Note: This post requires you to know the basics of React (basic hooks and fetch requests).
>

Any kind of feedback is welcome, thank you and I hope you enjoy the article.🤗

&nbsp;

## Table of Contents.

> 📌 [Technologies to use](#2)
>
> 📌 [Creating the project](#3)
> 
> 📌 [First steps](#4)
> 
> 📌 [Making our first fetch](#5)
> 
> 📌 [Displaying API data on screen](#6)
> 
> > 📌 [Creating a custom hook](#7)
> 
> > 📌 [Improving the `useFetch` hook](#8)
> 
> 📌 [Adding more components and refactoring](#9)
>> 📍 [Header.tsx](#10)
>>
>> 📍 [Loading.tsx](#11)
>>
>> 📍 [ErrorMessage.tsx](#12)
>>
>> 📍 [Card.tsx](#13)
>>
>> 📍 [LayoutCards.tsx](#14)

---

## 🚨 Technologies to use. <a id="2"></a>

▶️ React JS (version 18)

▶️ Vite JS

▶️ TypeScript

▶️ [Rick and Morty API](https://rickandmortyapi.com/)

▶️ vanilla CSS (**Styles can be found in the repository at the end of this post**)

&nbsp;

## 〽️ Creating the project. <a id="3"></a>

```bash
npm init vite@latest
```

In this case we will name it: `fetching-data-custom-hook` (optional).

We will select React and then TypeScript.

Then we execute the following command to navigate to the directory just created.

```bash
cd fetching-data-custom-hook
```

Then we install the dependencies:

```bash
npm install
```

Then we open the project in a code editor (in my case VS code)

```bash
code .
```

&nbsp;

## 〽️ First steps. <a id="4"></a>

Inside the **src/App.tsx** folder we delete all the contents of the file and place a functional component that displays a title and a subtitle.

```jsx
const App = () => {
  return (
			<h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
  )
}
export default App;

```

![Show title and sutitle](https://res.cloudinary.com/dnxchppfm/image/upload/v1655258479/01_vfqfvg.png)

First of all, we will create a couple of interfaces that will help us to auto-complete the properties that come in the JSON response provided by the API.

- The first interface `Response` contains the results property which is an array of Results.
- The second interface `Result`, only contains 3 properties (although there are more, you can check the documentation of the [API](https://rickandmortyapi.com/documentation/#character-schema)), select an ID, the name and the image of the character.

```jsx
interface Response {
  results: Result[]
}

interface Result {
  id: number;
  name: string;
  image: string;
}

```

&nbsp;

## 〽️ Making our first Fetch. <a id="5"></a>

1. First we add a state that is of type `Result[]` and the default value will be an empty array since we are not making the API call yet. This will serve us to store the API data and to be able to show them.

```jsx
const App = () => {

  const [data, setData] = useState<Result[]>([]);

  return (
	    <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
  )
}
export default App;

```

2. In order to perform a data fetch, we have to do it in a `useEffect`, since we need to execute the fetch when our component is rendered for the first time.

Since we need it to be executed only once, we place an empty array (i.e., without any dependencies).

```jsx
const App = () => {
  const [data, setData] = useState<Result[]>([]);

	useEffect(()=> {

	},[]) // arreglo vació

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
    </div>
  )
}
export default App;

```

3. Inside the body of the `useEffect` function, the API call will be made, and as the `useEffect` does not allow us to use asynchronous code directly, we will make the call through promises in the meanwhile.

```jsx
const [data, setData] = useState<Result[]>([]);

useEffect(()=> {
   fetch('<https://rickandmortyapi.com/api/character/?page=8>')
   .then( res => res.json())
   .then( (res: Response) => {})
   .catch(console.log)
},[])

```

4. Once the promises are solved, we will obtain the data corresponding to the API, which we will place it to the state by means of the `setData` function.

With this we could already display the data on the screen. 😌

🚨 If something goes wrong with the API, the catch will catch the error and show it by console and the value of the state "`data`" remains as empty array (and at the end nothing will be shown but the title and subtitle of the app).

```jsx
const [data, setData] = useState<Result[]>([]);

useEffect(()=> {
   fetch('<https://rickandmortyapi.com/api/character/?page=8>')
   .then( res => res.json())
   .then( (res: Response) =>  {
      setData(res.results);
   })
   .catch(console.log)
},[])

```
&nbsp;
## 〽️ Displaying the API data on screen.<a id="6"></a>

Before displaying the API data, we need to do an evaluation. 🤔

🔵 Only if the length of the "`data`" status value is greater than 0, we display the API data on screen.

🔵 If the length of the "`data`" status value is less than or equal to 0, no data will be displayed on the screen, only the title and subtitle.

```jsx
const App = () => {
	const [data, setData] = useState<Result[]>([]);

	useEffect(()=> {
	   fetch('<https://rickandmortyapi.com/api/character/?page=8>')
	   .then( res => res.json())
	   .then( (res: Response) =>  {
	      setData(res.results);
	   })
	   .catch(console.log)
	},[])

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && <p>data</p>
      }
    </div>
  )
}
export default App;

```

Now, once we have confirmed that we do have data in the "`data`" state value, we will proceed to display and shape the data.

Using the map function used in arrays. We will traverse the array of the value of the state "`data`" and we will return a new JSX component that in this case will only be an image and a text.

🔴 NOTE: the **key** property inside the div, is an identifier that React uses in the lists, to render the components in a more efficient way. It is important to set it.

```jsx
const App = () => {
	const [data, setData] = useState<Result[]>([]);

	useEffect(()=> {
	   fetch('<https://rickandmortyapi.com/api/character/?page=8>')
	   .then( res => res.json())
	   .then( (res: Response) =>  {
	      setData(res.results);
	   })
	   .catch(console.log)
	},[])

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}>
            <img src={image} alt={image} />
            <p>{name}</p>
          </div>
        ))
      }
    </div>
  )
}
export default App;

```

In this way we have finished fetching data and displaying it correctly on the screen. But we can still improve it. 😎

![Show cards](https://res.cloudinary.com/dnxchppfm/image/upload/v1655258695/02_ggf975.png)
&nbsp;
## 〽️ Creating a custom hook.<a id="7"></a>

Inside the folder **src/hook** we create a file named `useFetch`.

We create the function and cut the logic of the `App.tsx` component.

```jsx
const App = () => {

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}>
            <img src={image} alt={image} />
            <p>{name}</p>
          </div>
        ))
      }
    </div>
  )
}
export default App;

```

We paste the logic inside this function, and at the end we return the value of the state "`data`."

```jsx
export const useFetch = () => {
  const [data, setData] = useState<Result[]>([]);

  useEffect(()=> {
     fetch('<https://rickandmortyapi.com/api/character/?page=8>')
     .then( res => res.json())
     .then( (res: Response) =>  {
        setData(res.results);
     })
     .catch(console.log)
  },[]);

  return {
    data
  }
}

```

Finally, we make the call to the `useFetch` hook extracting the data.

And ready, our component is even cleaner and easier to read. 🤓

```jsx
const App = () => {

  const { data } = useFetch();

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}>
            <img src={image} alt={image} />
            <p>{name}</p>
          </div>
        ))
      }
    </div>
  )
}
export default App;

```

But wait, we can still improve this hook. 🤯
&nbsp;
## 〽️ Improving the `useFetch` hook.<a id="8"></a>

Now what we will do is to improve the hook, adding more properties.

To the existing state we will add other properties and this new state will be of type `DataState`.

```jsx
interface DataState {
    loading: boolean;
    data: Result[];
    error: string | null;
}

```

**loading**, boolean value, will let us know when the API call is being made. By default the value will be set to true.

**error**, string or null value, it will show us an error message. By default the value will be null.

**data**, value of type `Result[]` , will show us the API data. By default the value will be an empty array.

🔴 NOTE: the properties of the estate have just been renamed.

🔵 **data** ➡️ **dataState**

🔵 **setData** ➡️ **setDataState**

```jsx
export const useFetch = () => {
	const [dataState, setDataState] = useState<DataState>({
      data: [],
      loading: true,
      error: null
  });

  useEffect(()=> {
     fetch('<https://rickandmortyapi.com/api/character/?page=8>')
     .then( res => res.json())
     .then( (res: Response) =>  {
        setData(res.results);
     })
     .catch(console.log)
  },[]);

  return {
    data
  }
}

```

Now we will take out the `useEffect` logic in a separate function. This function will have the name `handleFetch`.

We will use `useCallback`, to store this function and prevent it from being recreated when the state changes.

The `useCallback` also receives an array of dependencies, in this case we will leave it empty since we only want it to be generated once.

```jsx
const handleFetch = useCallback(
    () => {},
    [],
)

```

The function that receives in `useCallback`, can be asynchronous so we can use **async/await.**.

1. First we place a **try/catch** to handle errors.
2. Then we create a constant with the URL value to make the API call.
3. We make the API call using fetch and send the URL (the await will allow us to wait for a response either correct or wrong, in case of error, it would go directly to the catch function).

```jsx
const handleFetch = useCallback(
      async () => {
          try {
							const url = '<https://rickandmortyapi.com/api/character/?page=18>';
              const response = await fetch(url);
          } catch (error) {}
        },
        [],
    )

```

1. Then we evaluate the response, if there is an error then we activate the catch and send the error that the API gives us.
2. In the catch, we are going to set the state. We call the **setDataState**, we pass a function to obtain the previous values (**prev**). We return the following.
    1. We spread the previous properties (**...prev**), which in this case will only be the value of the data property, which will end up being an empty array.
    2. **loading,** we set it to false.
    3. **error**, we caste the value of the parameter error that receives the catch to be able to obtain the message and to place it in this property.

```jsx
const handleFetch = useCallback(
      async () => {
          try {
							const url = '<https://rickandmortyapi.com/api/character/?page=18>';
              const response = await fetch(url);

              if(!response.ok) throw new Error(response.statusText);

          } catch (error) {

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  error: (error as Error).message
              }));
          }
        },
        [],
    )

```

1. If there is no error from the API, we get the information, and set the status in a similar way as we did in the catch.
2. We call the **setDataState**, pass it a function to get the previous values (**prev**). We return the following.
    1. We spread the previous properties (**...prev**), which in this case will only be the value of the error property that will end up being a null.
    2. **loading,** we set it to false.
    3. **data**, will be the value of the dataApi counter by accessing its results property.

```jsx
const handleFetch = useCallback(
      async () => {
          try {
							const url = '<https://rickandmortyapi.com/api/character/?page=18>';
              const response = await fetch(url);

              if(!response.ok) throw new Error(response.statusText);

              const dataApi: Response = await response.json();

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  data: dataApi.results
              }));

          } catch (error) {

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  error: (error as Error).message
              }));
          }
        },
        [],
    )

```

After creating the `handleFetch` function, we return to the `useEffect` to which we remove the logic and add the following.

We evaluate if the value of the state "**dataState**" by accessing the data property, contains a length equal to 0, then we want the function to be executed. This is to avoid calling the function more than once.

```jsx
useEffect(() => {
    if (dataState.data.length === 0) handleFetch();
}, []);

```

And the hook would look like this:

🔴 NOTE: at the end of the hook, we return, using the **spread** operator, the value of the "**dataState**" state.

🔴 NOTE: the interfaces were moved to their respective folder, inside **src/interfaces**.

```jsx
import { useState, useEffect, useCallback } from 'react';
import { DataState, Response } from '../interface';

const url = '<https://rickandmortyapi.com/api/character/?page=18>';

export const useFetch = () => {

    const [dataState, setDataState] = useState<DataState>({
        data: [],
        loading: true,
        error: null
    });

    const handleFetch = useCallback(
        async () => {
            try {
                const response = await fetch(url);

                if(!response.ok) throw new Error(response.statusText);

                const dataApi: Response = await response.json();

                setDataState( prev => ({
                    ...prev,
                    loading: false,
                    data: dataApi.results
                }));

            } catch (error) {

                setDataState( prev => ({
                    ...prev,
                    loading: false,
                    error: (error as Error).message
                }));
            }
        },
        [],
    )

    useEffect(() => {
        if (dataState.data.length === 0) handleFetch();
    }, []);

    return {
        ...dataState
    }
}

```

Before using the new properties of this hook, we will do a refactoring and create more components. 😳
&nbsp;
## 〽️ Adding more components and refactoring.<a id="9"></a>

The first thing is to create a **components** folder inside **src.**.

Inside the components folder we create the following files.
&nbsp;
### 🟡 Header.tsx <a id="10"></a>

Inside this component will be only the title and the subtitle previously created. 😉

```jsx
export const Header = () => {
    return (
        <>
            <h1 className="title">Fetching data and create custom Hook</h1>
            <span className="subtitle">using Rick and Morty API</span>
        </>
    )
}

```
&nbsp;
### 🟡 Loading.tsx <a id="11"></a>

This component will only be displayed if the loading property of the hook is set to true. ⏳

```jsx
export const Loading = () => {
  return (
    <p className='loading'>Loading...</p>
  )
}

```

![show loading](https://res.cloudinary.com/dnxchppfm/image/upload/v1655258693/03_dkowhz.png)
&nbsp;
### 🟡 ErrorMessage.tsx <a id="12"></a>

This component will only be displayed if the error property of the hook contains a string value. 🚨

```jsx
export const ErrorMessage = ({msg}:{msg:string}) => {
  return (
    <div className="error-msg">{msg.toUpperCase()}</div>
  )
}

```

![show error](https://res.cloudinary.com/dnxchppfm/image/upload/v1655258693/04_oqlca7.png)
&nbsp;
### 🟡 Card.tsx <a id="13"></a>

Displays the API data, that is, the image and its text. 🖼️

```jsx
import { Result } from '../interface';

export const Card = ({ image, name }:Result) => {

    return (
        <div className='card'>
            <img src={image} alt={image} width={100} />
            <p>{name}</p>
        </div>
    )
}

```
&nbsp;
### 🟡 LayoutCards.tsx <a id="14"></a>

This component serves as a container to do the traversal of the **data** property and display the letters with their information. 🔳

🔴 NOTE: we use memo, enclosing our component, in order to avoid re-renders, which probably won't be noticed in this application but it's just a tip. This memo function is only re-rendered if the **"data "** property changes its values.

```jsx
import { memo } from "react"
import { Result } from "../interface"
import { Card } from "./"

interface Props { data: Result[] }

export const LayoutCards = memo(({data}:Props) => {
    return (
        <div className="container-cards">
            {
                (data.length > 0) && data.map( character => (
                    <Card {...character} key={character.id}/>
                ))
            }
        </div>
    )
})

```

This is how our `App.tsx` component would look like.

We create a function **showData**, and we evaluate:

- If the **loading** property is true, we return the `<Loading/>` component.
- If the **error** property is true, we return the component `<ErrorMessage/>` , sending the error to the component.
- If none of the conditions is true, it means that the API data is ready and we return the `<LayoutCards/>` component and send it the data to display.

Finally, below the <Header/> component, we open parentheses and call the **showData** function.

```jsx
import { ErrorMessage, Header, Loading, LayoutCards } from './components'
import { useFetch } from './hook';

const App = () => {

  const { data, loading, error } = useFetch();

  const showData =  () => {
    if (loading) return <Loading/>
    if (error) return <ErrorMessage msg={error}/>
    return <LayoutCards data={data} />
  }

  return (
    <>
      <Header/>
      { showData() }
    </>
  )
}
export default App;

```

🔴 NOTE: You can also move the **showData** function to the hook, and change the hook file extension to `.tsx`, this is because JSX is being used when returning various components.

---

**Thanks for getting this far.** 🙌

I leave the repository for you to take a look if you want. ⬇️
{% embed https://github.com/Franklin361/fetching-data-custom-hook %}