title: useEffect only if state changed
body: <p>I have <code>useEffect</code> which calls an <code>action</code> from <code>redux</code> to fetch uploads</p>
  
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
      getUploads()
  }, [getUploads])
  </code></pre>
  
  <p>However, I only want to fetch when the state changes, not fetch everytime the component renders.
  I have mapped the state like:</p>
  
  <pre class="lang-js prettyprint-override"><code>{filteredUploads.map((image, i) =&gt; { return (...) })}
  </code></pre>
  
  <p>I have tried to add <code>getUploads</code>, <code>filteredUploads</code>, <code>filteredUploads.length</code> as dependency array. None of it worked.</p>
  
  <p>My <code>redux-action</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>export const getUploads = () =&gt; async dispatch =&gt; {
      try {
          dispatch({ type: 'LOADING', payload: true })
  
          const res = await axios.get('/uploads/myuploads')
          dispatch({
              type: GETMYUPLOAD_SUCCESS,
              payload: res.data
          })
  
      } catch (err) {
          const error = err.response.data.error[0].msg
  
          dispatch(setAlert(error, 'danger'))
      }
  }
  </code></pre>
  
  <p><code>mapStatetoProps</code>:</p>
  
  <pre><code>function mapStateToProps(state) {
      const { myuploads, searchField } = state.useruploads;
      return {
  
          searchField: state.useruploads.searchField,
  
          filteredUploads: myuploads.filter((upload) =&gt; upload.caption.toLowerCase().includes(searchField.toLowerCase()))
      };
  }
  </code></pre>