title: How to reuse data fetching logic from api using react custom hooks
body: <p>I have two components rendering different UI based on user type. Both components have nearly 50% similar logic of fetching data from api, connecting to store. </p>
  
  <p>I tried, reusing the login by creating custom hook.</p>
  
  <pre><code>const { products, loading} = useFetchProducts(userId);
  
  </code></pre>
  
  <p>and now I can define a useFetchProducts reducer </p>
  
  <pre><code>  const useFetchProducts= (userId) =&gt; {
     const [ loading, setLoading ] = useState(false);
     const [ products, setProducts ] = useState(null);
  
     useEffect(() =&gt; {
         setLoading(true);
           fetchUserProducts(userId).then((res) =&gt; {
             setLoading(false);
             setProducts(res.data);  
       }); 
     }, [])
   }
  </code></pre>
  
  <p>How do I return products and loading state to my component from this reducer to hide or show a loader as well as to show list of products,</p>