I'm currently having a problem with a React app. I have a high level useEffect which is not being called. I have another project with a similar code and it works on it. Normally i should have my useEffect called every time i make an HTTP call from my app but nothing happens.

Does anyone have any idea who might be blocking?

Thanks a lot in advance for your help

My app.js

const App = () => (
  <Provider store={store}>
    <AuthProvider>
      <QueryClientProvider client={QueryClient()}>
        <ConnectedRouter history={history}>
          <>
            <Header />
            <AppNavigation />
            <AuthModalError />
          </>
        </ConnectedRouter>
      </QueryClientProvider>
    </AuthProvider>
  </Provider>
);

My authProvider component that be called in app.js

const AuthProvider = ({ children }) => {
  const [go, setGo] = useState(false);

  const token = "987646543216548789";
  useAxiosToken(token);

  useEffect(() => {
    setGo(token !== undefined);
  }, [token]);

  if (!go) return null;
  console.log("Authenticated !! And now display application");

  return <IdentityProvider value={token}>{children}</IdentityProvider>;
};

AuthProvider.propTypes = { children: PropTypes.node };

export default AuthProvider;

And finally the file which contains the useEffect which does not fire.

const removeTokenInterceptor = (id: number | null) => {
  if (id !== null) axios.interceptors.request.eject(id);
};

const addTokenInterceptor = (token: string) =>
  axios.interceptors.request.use((requestConfig) => ({
    ...requestConfig,
    headers: { ...requestConfig.headers, Authorization: `${token}` },
  }));

const useAxiosToken = (token: string | undefined): void => {
  const interceptor = useRef<number | null>(null)

  useEffect(() => {
    if (token) {
      interceptor.current = addTokenInterceptor(token);
    }
    console.log("Call useEffect in useAxiosToken file");
    return () => removeTokenInterceptor(interceptor.current);
  }, []);
};

export default useAxiosToken;

Pedro.