title: React Hooks & React-Redux connect: What is the best practice to make them work together?
body: <p>I would like to ask to the community what is the best practice to combine existing code using react-redux <code>connect()</code> and dependency management in hooks like <code>useEffect()</code>.</p>
  
  <p>Let's look at the following example:</p>
  
  <pre><code>/* ... */
  
  const mapStateToProps = (state) =&gt; ({
    todos: getTodos(state),
    currentUserId: getCurrentUserId(state)
  })
  
  const mapDispatchToProps = (dispatch) =&gt; ({dispatch})
  
  const mapMergeProps = (stateProps, {dispatch}, ownProps) =&gt; {
    return {
      ...stateProps,
      ...dispatchProps,
      ...ownProps,
      fetchTodos: () =&gt; dispatch(fetchTodos(stateProps.currentUserId))
    }
  }
  
  const TodosListContainer = connect(mapStateToProps, mapDispatchToProps, mapMergeProps)
  
  const TodosList = ({todos, fetchTodos, ...props}) =&gt; {
  
    const _fetchTodos = useCallback(fetchTodos, [])
  
    useEffect(() =&gt; {
      _fetchTodos()
    }, [_fetchTodos])
  
    return (
      &lt;ul&gt;
        {todos &amp;&amp; todos.map((todo) =&gt; &lt;li key={todo.id}&gt;{todo.name}&lt;/li&gt;)}
      &lt;/ul&gt;
    )
  }
  </code></pre>
  
  <p>In the code above useEffect has all the dependencies, and useCallback ensures that useEffect is triggered only once.</p>
  
  <p>It seems however like an extra layer of boilerplate: Without useCallback, the functions passed down as props that are coming from connect's <code>mapMergeToProps</code> will be recreated on every change of state, and will trigger <code>useEffect</code>.</p>
  
  <p>My question is whether the code above is correct, and there's a better way to handle useEffect in the context described.</p>