title: how to show loader in react . using hooks
body: <p>I am using <code>axios</code> for <code>communicate</code> with server.I want to show loader when user request to server and  hide the loader when request is complete</p>
  
  <p>So i make a custom component to do this task .but my UI hang when I click multiple times on same button</p>
  
  <pre><code>const Loader = () =&gt; {
      const { loadingCount } = useLoadingState(),
          {showLoading, hideLoading} = useLoadingActions();
  
      useEffect(()=&gt;{
          const self = this
          axios.interceptors.request.use(function (config) {
              showLoading();
              return config
          }, function (error) {
              return Promise.reject(error);
          });
  
          axios.interceptors.response.use(function (response) {
              // spinning hide
              // self.props.loading(false)
              hideLoading()
              return response;
          }, function (error) {
              hideLoading();
              return Promise.reject(error);
          });
      })
  
  
      return (
          &lt;div&gt;
              {loadingCount &gt; 0 ?&lt;div style={{position:"fixed",display:"flex",justifyContent:"center",alignItems:"center",width:'100%',height:'100%',zIndex:999999}}&gt;
                  {/*{loadingCount &gt; 0 ? */}
                  &lt;Spin tip="Loading..." style={{zIndex:999999}}&gt;&lt;/Spin&gt;
                  {/*: null}*/}
              &lt;/div&gt;: null}
          &lt;/div&gt;
  
  
  
  
  
      );
  };
  </code></pre>
  
  <p><strong>Problem is on <code>useeffect</code></strong></p>
  
  <p>when I comment out useEffect code it works perfectly .</p>
  
  <p><strong>NoTe</strong> : showloading and hideloading increase and decrease the loading count.</p>
  
  <p><strong>I think I have deallocate axios object the when component is unmount</strong>.???</p>