title: how to pass react hook objects to axios interceptor from index.js in react
body: <p>I want to use axios request and response interceptor to show/hide loader before and after each request. For this I using redux to maintain loader state, But I can not use <code>useDispatch</code> and <code>useHistory</code> hooks inside interceptor file.</p>
  <p>So I thought I will have to pass it from index.js, but again I am getting same error.</p>
  <p><strong>Invalid hook call. Hooks can only be called inside of the body of a function component</strong></p>
  <p>interceptor code.</p>
  <pre><code>const handler401 = (dispatch, history) =&gt; {
    dispatch(authActions.logOut);
    history.push(LOGIN);
  };
  
  const handler500 = (dispatch, error) =&gt; {
    let message = L('global.error');
    if (error.response &amp;&amp; error.response.data?.error) {
      message = error.response.data.error;
    }
    dispatch(
      uiActions.showNotification({
        title: L('global.errorTitle'),
        message,
        status: 'error',
      })
    );
  };
  
  const setupInterceptors = (dispatch, history) =&gt; {
  
    request.api.interceptors.request.use(
      (successfulReq) =&gt; {
        console.log('show loader start');
        dispatch(uiActions.showLoader());
        return successfulReq;
      },
      (error) =&gt; {
        dispatch(uiActions.hideLoader());
        return Promise.reject(error);
      }
    );
  
    request.api.interceptors.response.use(
      (response) =&gt; {
        dispatch(uiActions.hideLoader());
        return response;
      },
      (error) =&gt; {
        console.log('hide loader start');
        dispatch(uiActions.hideLoader());
        if (error.response.status === 401) {
          handler401(dispatch, history);
        } else {
          handler500(dispatch, error);
        }
        return Promise.reject(error);
      }
    );
  };
  </code></pre>
  <p>I have register this interceptor in index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider, useDispatch } from 'react-redux';
  import { BrowserRouter, useHistory } from 'react-router-dom';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  import store from './store/index';
  import setupInterceptors from './services/interceptorService';
  
  const history = useHistory();
  const dispatch = useDispatch();
  setupInterceptors(dispatch, history);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;React.StrictMode&gt;
        &lt;BrowserRouter&gt;
          &lt;App /&gt;
        &lt;/BrowserRouter&gt;
      &lt;/React.StrictMode&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  reportWebVitals();
  </code></pre>
  <p>How can pass above two hooks to my interceptor?</p>