title: React- Issue with infinite loop in useEffect
body: <p>I have a useEffect() that fetches the data through axios, I want that to render only one time so I passed an array. Everything works fine, but the problem is whenever I try to sort the items, the second useEffect fires just followed by the first useEffect, which is causing the component to fetch the items all over again and again.</p>
  <pre><code>const [products, setProducts] = useState([]);
  
  useEffect(() =&gt; {
      const getProducts = async () =&gt; {
        return await axios
          .get('/getAllProducts')
          .then((response) =&gt; {
            setProducts(response.data);
            console.log(products);
          })
          .catch((e) =&gt; {
            console.log(e);
          });
      };
      getProducts();
    }, [products]);
  </code></pre>