title: useEffect goes in infinite loop when combined useDispatch, useSelector of Redux
body: <p>I try to code with react-hook and redux for state management and axios for database requests with Thunk as middleware for handling asynchronicity.I'm having an issue in one component that does a get request to retrieve a list of customers on what used to be <code>componentwillreceiveprop</code></p>
  
  <pre class="lang-js prettyprint-override"><code># Action
  export const actGetProductRequest = id =&gt; dispatch =&gt;
    callApi(`products/${id}`, "GET").then(res =&gt;
      dispatch({
        type: types.EDIT_PRODUCT,
        payload: { product: res.data }
      })
    );
  
  ------
  import React, { useEffect } from "react";
  import { useSelector, useDispatch } from "react-redux";
  import useForm from "./useForm";
  import { actGetProductRequest } from "../../actions";
  ...
  const { history, match } = props;
    const getProduct = useSelector(state =&gt; state.itemEditing);
    const dispatch = useDispatch();
    const { values, setValues, handleChange, handleSubmit } = useForm(
      getProduct,
      history
    );  
    useEffect(() =&gt; {
      if (match) {
        let id = match.params.id;
        dispatch(actGetProductRequest(id));
      }
      setValues(()=&gt;({...getProduct}));
    },[match,dispatch, setValues, getProduct]);
  </code></pre>
  
  <p>And I tried to call API and return the product, but the site always loop render infinite. Continuous rendering cannot be edited the form. like the </p>
  
  <p><img src="https://media.giphy.com/media/iI3mAjOxoEbcJL7MYd/giphy.gif" alt="gif"></p>
  
  <p>Can anyone please help me out how to resolve this issue...</p>
  
  <p>p.s: with code here, it run ok. But I want to use with redux, and I pass the code calling axios to the dispatch and redux to return the new changed state</p>
  
  <pre class="lang-js prettyprint-override"><code> useEffect(() =&gt; {
      if (match) {
        let id = match.params.id;
        callApi(`products/${id}`, "GET", null).then(res =&gt; {
          const data = res.data;
          setValues(()=&gt;({...data}));
        });      
      }
      const clearnUp = () =&gt; setValues(false);
      return clearnUp;
    },[match, setValues]);
  </code></pre>
  
  <p>p.s: full code
  <a href="https://codesandbox.io/embed/elated-hamilton-67hmp?fontsize=14" rel="noreferrer">code</a></p>