title: How to stop the multiple API request in react js functional component
body: <p>I am new in react js. I have a function and one GET API request. I need to dispatch the API action in the functional component. When I call the <code>dispatch</code> function in my functional component. It's re-render multiple times (Multiple requests coming). When I use the <code>dispatch</code> inside the <code>useEffect</code> My API is not dispatched.</p>
  <p>Without <code>useEffect</code> <code>dispatch</code> function called:(API called multiple times)</p>
  <pre><code>export default LogoCard {
      let id=1;
      const dispatch = useDispatch();
      dispatch(viewLogDetails(id));
  }
  
  </code></pre>
  <p>using <code>useEffect</code> <code>dispatch</code> function called.(<code>dispatch</code> function not called using <code>useEffect</code>)</p>
  <pre><code>export default LogoCard {
      let id=1;
      const dispatch = useDispatch();
  
      useEffect(()=&gt;{
          dispatch(viewLogDetails(id));
      },[dispatch]);
  }
  </code></pre>
  <p>Redux Action:</p>
  <pre><code>export const viewTimeLogging = createAsyncThunk(
      &quot;logoReducer/logo/Viewlogo&quot;,
      async (id, { getState }) =&gt; {
          const response = await axios.get(`/viewLogDetails?id=${id}`);
          let data = null;
          data = await response.data;
          return data.viewLogo;
      }
  );
  </code></pre>