Instead of writing full api url on axios requests each time, we can create a custom hook. This way, later we can add token in the headers and easily handle errors too.

NOTE

This hook will not be used later. We will configure axios in context so that it can easily be used anywhere by simply importing (the regular way)

// hooks/useAxios.js
import axios from "axios";

const useAxios = () => {
  axios.defaults.baseURL = "http://localhost:8000/api";
  // later add jwt token to axios header
  // handle error response from server

  return axios;
};

export default useAxios;

Now import and use it by replacing previous axios import in signup.js

import useAxios from "../hooks/useAxios";

const SignUp = () => {
  const axios = useAxios();
  // rest of code
}