title: Call a Redux Action inside a useEffect
body: <p>My objective here is to call an action inside a <code>useEffect</code>.</p>
  
  <pre><code>const ShowTodos = (props) =&gt;{
     useEffect(()=&gt;{
      props.fetchTodos()
     },[])
  } 
  const mapStateToProps = (state)=&gt;{
    return {
      todos:Object.values(state.todos),
      currentUserId:state.authenticate.userId
    }
  }
  
  export default connect(mapStateToProps,{fetchTodos})(ShowTodos)
  </code></pre>
  
  <p>It works fine but I got a warning </p>
  
  <pre><code>React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array  react-hooks/exhaustive-deps.
  </code></pre>
  
  <p>But if I'm going to add <code>props</code> as my second parameter in my <code>useEffects</code> then it will run endlessly. </p>
  
  <p>My first workaround here is to use the <code>useRef</code> but it seems that it will always re-render thus re-setup again the useRef which I think is not good in terms of optimization.</p>
  
  <pre><code>const ref = useRef();
    ref.current = props;
    console.log(ref)
  
  
    useEffect(()=&gt;{
    ref.current.fetchTodos()
    },[])
  </code></pre>
  
  <p>Is there any other workaround here ?</p>