title: How to use react hook useEffect only once in my case?
body: <p>I think my question for a while seems to be a duplicate but i guess it is not, i have checked many questions that have same title but with different case</p>
  
  <p>The problem is that i was forced to use react hook twice in my code and i even think to make them three but i feel that a bad practice and i am sure there is a work around or a solution for that</p>
  
  <p>I have data that i want to initially fetch and i implemented that by <strong>first useEffect call</strong>, the data can be filtered or sorted later and i have filters checkboxes and a select for sort queries, checking a checkbox will filter data and selecting an option will sort it, i am using redux and react-redux <strong>connect</strong> method to create the state tree which includes <strong>filters</strong> and <strong>sortBy</strong></p>
  
  <pre><code>  //the first call
    useEffect(() =&gt; {
      loadProducts();
    }, []);
  
  
  //the second call
    useEffect(() =&gt; {
      loadProducts(filters, sortBy)
    }, [filters, sortBy])
  
  const mapStateToProps = (state) =&gt; ({
    filters: state.filters,
    sortBy: state.sortBy
  });
  
  
  const mapDispatchToProps = (dispatch) =&gt; ({
    loadProducts: (filters, sortBy) =&gt; {
      fetch('certain API').then(res =&gt; res.json()).then(json =&gt; {
        dispatch(fetchProducts(json.products, filters, sortBy));
      }).catch(err =&gt; 'error fetching data');
    }
  });
  </code></pre>
  
  <p>Now the first call is to initially retrieve data from API, loadProducts function doesn't need any arguments, and the second one is when doing filtering or sorting and the function in this case needs the arguments and it works when any of filters or sortBy get changed</p>
  
  <p>I even think to make them three calls by dividing the second call into two calls like this:</p>
  
  <pre><code> useEffect(() =&gt; {
      loadProducts(filters)
    }, [filters])
  
  useEffect(() =&gt; {
      loadProducts(undefined, sortBy)
    }, [sortBy])
  
  </code></pre>
  
  <p>and that's because i do not want to make filtering and sorting happening every time even when only one of them should work, because i think sorting will work also when the user only fiters data and vice versa.</p>
  
  <p>This is my <strong>fetchProducts</strong> action:</p>
  
  <pre><code>import { filterProducts, sortProducts } from './../../util/util';
  export const fetchProducts = (products, filters, sortBy) =&gt; {
      if (filters &amp;&amp; filters.length) {
          products = filterProducts(products, filters);
      }
  
      if (sortBy) {
          sortProducts(products, sortBy);
      }
  
      return {
          type: FETCH_PRODUCTS,
          payload: products
      }
  }
  
  </code></pre>