title: Using useEffect properly when making reqs to a server
body: <p>I have a handleRating function which sets some state as so:</p>
  <pre><code>  const handleRating = (value) =&gt; {
      setCompanyClone({
        ...companyClone,
        prevRating: [...companyClone.prevRating, { user, rating: value }]
      });
      setTimeout(() =&gt; {
        handleClickOpen();
      }, 600);
    };
  </code></pre>
  <p>I think also have a function which patches a server with the new companyClone values as such:</p>
  <pre><code>  const updateServer = async () =&gt; {
      const res = await axios.put(
        `http://localhost:3000/companies/${companyClone.id}`,
        companyClone
      );
  
      console.log(&quot;RES&quot;, res.data);
    };
  
  </code></pre>
  <p>my updateServer function gets called in a useEffect. But I only want the function to run after the state has been updated. I am seeing my res.data console.log when I load my page. Which i dont want to be making reqs to my server until the comapanyClone.prevRating array updates.</p>
  <p>my useEffect :</p>
  <pre><code>  useEffect(() =&gt; {
      updateServer();
    }, [companyClone.prevRating]);
  </code></pre>
  <p>how can I not run this function on pageload. but only when companyClone.prevRating updates?</p>