how to handle multiple axios instances

I made a hook called useAxios where I get my token from the state and then use it to create an instance of Axios:

export const useAxios = () => {
  
  const { userData } = useUser();

  const customAxios = axios.create({
    headers: { Authorization: `Bearer ${userData?.user?.token}` },
  });
  
  return customAxios;
};

But now I'm worried that by using this hook in multiple components I'm creating many instances of Axios! so my questions are:

1. how can I check if there is still one instance created and every time I'm just overwriting it OR I'm actually creating multiple instances?

2. in case it's multiple instances, is it fine?

3. I can use useEffect or useCallback to make it created only when the token is changed but is there any other common solution for that?

Firstly, when you use this hook in any component the axios instance will be created each time you call it not overwriting a previous one due to your implementation it should create an instance and return it, so it makes absolutely no sense that it'll override some previous one because actually there're no previous ones!

So, how to solve this?

basically don't create the instance inside the hook, access it instead.

create the instance outside the hook and access it within the hook and do anything you want with it.

this will make the hook just manipulate the instance without creating a one

How to know if I'm creating multiple instances?

as long as you're following this approach you're definitely creating multiple instances, in fact, I don't know a particular way to know if I'm creating multiple instances or maybe it's not present in my mind currently, but for me, it's obvious that this approach will create multiple instances.

In case it's multiple instances, is it fine?

there's no proper answer to this question, as long as it's not going against your logic (idea) or/and perf so it's fine but I'm thinking that this will make your code quite uncontrolled or make multiple instances with different configurations isn't good because this would make you lost (I'm not sure, I'm just thinking.)

I can use useEffect or useCallback to make it created only when the token is changed but is there any other common solution for that?

there's something wrong with your question, which is "created", I don't understand do you want to recreate it every time the token changes?

okay maybe it's not the best option because axios provides some internal methodology that allows you to change the token in the header, which are interceptors

they're very similar to Middleware in the methodology (if you're familiar with Middleware) they work like the following:

• axios receives your request
• then axios will pass it to the interceptor
• the interceptor can do anything but should return the request at the end of the logic

this gives you the ability to verify that the token is valid and if it's not you'll make a request to the server to get a new one then append it to the headers then proceed with the request, this is a code of mine that I'm using it in my current project to verify the token on each request

<!-- begin snippet: js hide false console: true babel: false -->

<!-- language: lang-js -->

let accessToken = localStorage.getItem("access")
  ? JSON.parse(localStorage.getItem("access") ?? "")
  : "";
const refreshToken = localStorage.getItem("refresh")
  ? JSON.parse(localStorage.getItem("refresh") ?? "")
  : "";
  
axiosInstance.interceptors.request.use(async (req) => {
  if (!accessToken) {
    accessToken = localStorage.getItem("access")
      ? JSON.parse(localStorage.getItem("access") ?? "")
      : null;
    req.headers!.Authorization = `Bearer ${accessToken}`;
  }

  const user: any = jwt_decode(accessToken);
  const isExpired = dayjs.unix(user.exp).diff(dayjs()) < 1;

  if (!isExpired) return req;

  const response = await axios.post(`${API_BASE_URL}/auth/refresh/`, {
    refresh: refreshToken,
  });

  localStorage.setItem("access", JSON.stringify(response.data.access));
  localStorage.setItem("refresh", JSON.stringify(response.data.refresh));
  req.headers!.Authorization = `Bearer ${JSON.parse(response.data.access)}`;
  return req;
});

<!-- end snippet -->
of course, I've used some external libraries and the code is quite complex but if you do research about it you'll see that it's a much easier and better option than using useEffect.

Then I can't use useEffect and useCallback to do so?

definitely, you can do that but I'm not seeing this good solution (in my personal opinion)

if you're seeing my answer wasn't good or/and clear enough please make a comment and let's discuss what you're thinking about.

thanks to @Youssef_Ayman168 suggestion I find this solution:

axios.interceptors.request.use(
  (config) => {
    const token = JSON.parse(localStorage.getItem(USER))?.token;
    if (token) {
      config.headers["Authorization"] = "Bearer " + token;
    }
    // config.headers['Content-Type'] = 'application/json';
    return config;
  },
  (error) => {
    console.log({ error });
    Promise.reject(error);
  }
);

export { axios };

and then I just import this instance of Axios when I need it.