React Axios Interceptors jumping in late - reactjs

Question

I'm working on a small react project and using axios interceptors to catch whether I'm in a localhost development environment or on the production deployed website.
What's happening is that when people sign up to my site, they click on the confirmation email link, and land on a certain "state" or whatever you call it or the application where the axios interceptor doesn't know what environment I'm on, and for a split second the wrong api call is made, to the right after it calling the right api uri.
Let me show this with some code:
export const App = () => {
useEffect(() => {
axios.interceptors.request.use((req) => {return { ...req, url: getBaseUri() + req.url
};})}, []);
return (
<div className="App">
<Routes />
</div> 
)}
And then the methods:
const devUriBase = "http://localhost:8080";
const prodUriBase = "https://my-website.herokuapp.com";export function getBaseUri() {
return window.location.host.includes("localhost") ? devUriBase : prodUriBase;
}
Then on the verification page component, where I make the api call itself, for a moment the api call is made to the incorrect url so for a split second the component is shown, then it seems the useEffect jumps in and the api call is made again. None of the combinations I tried worked. I tried to make a config component and through children have the axios interceptor, putting this in the index instead, and I don't know what else. I've been struggling with this for 3 days, I thought it was time to ask.
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import { useToken } from '../../auth/useToken';
import { EmailVerificationSuccess } from './EmailVerificationSuccess';
import { EmailVerificationFail } from './EmailVerificationFail';
export const EmailVerificationLandingPage = () => {
const { verificationString } = useParams();
const [, setToken] = useToken();
const [state, setState] = useState('loading');
useEffect(() => {
const loadVerification = async () => {
try {
const response = await axios.put('/api/verify-email', { verificationString });
const { token } = response.data;
setToken(token);
setState('success');
} catch (e) {
setState('error');
}
}
loadVerification();
}, [setToken, verificationString]);
if (state === 'loading') return <p>Cargando...</p>;
if (state === 'error') return <EmailVerificationFail />
return <EmailVerificationSuccess />
I appreciate your help.

Answer 1

This did it.
When you add request interceptors, they are presumed to be asynchronous by default. This can cause a delay in the execution of your axios request when the main thread is blocked (a promise is created under the hood for the interceptor and your request gets put on the bottom of the call stack). If your request interceptors are synchronous you can add a flag to the options object that will tell axios to run the code synchronously and avoid any delays in request execution.
axios.interceptors.request.use(function (config) {
config.headers.test = 'I am only a header!';
return config;
}, null, { synchronous: true });