In this article, I will be guiding you to understand and properly use these custom hooks in your next project. Enough talking, right? Let's jump straight into it.

What is a custom hook?

Before you start using the useFetch and useAxios custom hooks, it's important to understand what a custom hook is.

Custom hooks in React are a way to reuse and share logic across different components. They allow you to extract common functionality into a separate function, which can be used by multiple components in your application. A custom hook is simply a JavaScript function whose name starts with "use" (a naming convention in React) and follows the rules of hooks.

API call using Axios

Axios is a popular JavaScript library used for making HTTP requests. API calls can be made using either promises or async/await to handle asynchronous operations. However, in this article, we will be utilizing async/await. we would also be using jsonplaceholder’s posts API.

Let's make a get API call to get the list of posts.

import React, { useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

function App() {
  const getPosts = async () => {
    try {
      const response = await axios.get('/posts');
      console.log(response.data)
    } catch(err) {
        console.log(err)
    }
  }

  useEffect(() => {
    getPosts();
  }, []);

  return (
    <section className='app'>
      Hello World
    </section>
  )
}

export default App

From the above example, we created a baseURL so that we can simply pass the specific path to the Axios method. We utilized Axios.get() to make the API call, and by using async/await within a try-catch block, we can obtain the result or handle any errors that may occur.

Adding states to the API call

Let's add states to save our response and error if any, as well as a loading state for a better user experience and improved control and management of the API call lifecycle.

import React, {useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const getPosts = async () => {
    try {
      const response = await axios.get('/posts');
      setData(response.data);
      setLoading(false);
    } catch(err) {
        setError(err);
        setLoading(false);
    }
  }

  useEffect(() => {
    getPosts();
  }, []);

  return (
    <section className='app'>
      Hello World
    </section>
  )
}

export default App

Creating a useAxios custom hook

I believe by now you already know what a custom hook is since we've discussed it earlier. However, if you want to learn more, you can visit here. Now, let's dive straight into the code snippet.

import React, {useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const useAxios = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const getPosts = async () => {
    try {
      const response = await axios.get('/posts');
      setData(response.data);
      setLoading(false);
    } catch(err) {
        setError(err);
        setLoading(false);
    }
  }

  useEffect(() => {
    getPosts();
  }, []);

  // custom hook returns value
  return { data, error, loading };
}

export default useAxios

The code looks similar to the previous example, but now we have created a custom hook named useAxios that returns three values: data, error and loading.

We can make our custom hook dynamic by passing parameters as props to the hook. In our example, we can pass a variable representing the URL path.

import React, {useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const useAxios = (requestParam) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const getPosts = async () => {
    try {
      const response = await axios.get(`/${requestParam}`);
      setData(response.data);
      setLoading(false);
    } catch(err) {
        setError(err);
        setLoading(false);
    }
  }

  useEffect(() => {
    getPosts();
  }, [requestParam]);

  return { data, error, loading };
}

export default useAxios

Creating a useFetch custom hook

Let's repeat what we did previously, but this time we will be making our API call using the Fetch API.

import React, {useState, useEffect } from 'react';

const useAxios = (requestParam) => {
  const url = `https://jsonplaceholder.typicode.com/${requestParam}`

  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const getPosts = async () => {
    try {
      const response = await fetch(url)
      const res = await response.json()
      setData(res.data);
      setLoading(false);
    } catch(err) {
        setError(err);
        setLoading(false);
    }
  }

  useEffect(() => {
    getPosts();
  }, [requestParam]);

  return { data, error, loading };
}

export default useAxios

Using the useAxios and useFetch hooks in various component

Now that we have created these hooks, let me show you how you can use them in your different components.

function App() {
  const { data, loading, error } = useAxios("posts");

  return (
    <section className='app'>
      <h1>Posts</h1>
      {loading && <p>loading...</p>}
      {error && <div>{error.message}</div>}
      {data && data.map((posts, index) => <p key={index}>{posts.title}</p>)}
    </section>
  )
}

export default App

//when using the useFetch hook
const { data, loading, error } = useFetch("posts");

In conclusion, the useFetch and useAxios hooks provide convenient and efficient ways to handle API calls in React applications.

I hope you found this article useful and thank you for reading.

1. Stop trying to memorize codes: Memorization is a terrible technique when it comes to coding or programming, in programming there are lots and lots of methods, functions and names of the things to memorize so trying to memorize them all will be a wrong approach and also an impossible one. Instead the right approach will be focusing on the concept of programming, for instance in JavaScript you can understand how variables work, how objects work, how functions work, and event loops. After really understanding these concepts then you will realize you've covered almost all to know in JavaScript. In JavaScript for instance there are tons of built in functions like split, join and so on, instead of memorizing these functions you can focus on how these functions work and the concept of functions as a whole, when you forget a built in function like a function for joining an array you can always google to get the right function required. One thing to realize as a newbie programmer is that its okay to forget sometimes, functions and methods that you use often will eventually stick and the ones you don't use often you don't need to memorize them because you can always look them up online.

2. Build projects, in as much as watching tutorials is one of the most easiest ways to learn to code it is important to know that you need not to follow tutorials as much as you may think. Don't spend loads of time watching tons of tutorials without taking what you've learnt so far to start building your own projects. Building projects is a good habit to practice what you've learnt and also improve yourself, building projects can not only improve your programming skills but also your creativity, time management, problem solving and it also helps with your confidence. When you don't put what you've learnt into practice by building projects you end up forgetting them. As a programmer you need to enjoy problem solving and building things. Learning to code is a continuous process for a software developer, from my discovery I found out that even senior software developers sometimes still makes use of google and do researches when dealing with a task or problem, the truth is if you hate learning then you will hate programming.

3. As a new programmer you need to be persistent as you will sometimes run into bugs that may be frustrating and require lots of time to fix, but it is important to note that you are never going to be a good programmer, if you get stuck, search for the answer for like 5 minute and then give up.

I believe you found this useful

Emmatechy.