title: How do I trigger a call to dispatch using React Hooks?
body: <p>I have a save function in a component that makes some calls to an API and changes my local state based on the response. I then want to dispatch an action once AND ONLY ONCE these calls to setState are complete e.g.</p>
  
  <pre><code>const [myData, setMyData] = useState([{id: 0, name: "Alex"}]);
  
  const save = async () =&gt; {
  
      if (someCondition) {
          let response = await axios.get("/someroute");
          if (response.status === 200) {
              setMyData([...myData, response.data])])
          }
      }
  
      if (someOtherCondition) {
          let response2 = await axios.get("/someotherroute");
          if (response2.status === 200) {
              setMyData([...myData, response2.data])])
          }
      }
  
      dispatch(myAction(myData));
  }
  </code></pre>
  
  <p>Now I know that useEffect should be the way to go about this. e.g.</p>
  
  <pre><code>useEffect(() =&gt; {
      dispatch(myAction(myData));
  }, [myData]);
  </code></pre>
  
  <p>however i'm changing <code>myData</code> at other places in the component, and I only want to dispatch the action once <code>save()</code> has been called and the <code>setMyData</code> calls have finished. I can't think of a condition to check for in <code>useEffect()</code> except maybe adding some kind of flag to <code>myData</code>, like an object saying "Ready to save", but it feels like there should be a simpler way.</p>
  
  <p>Massively appreciate any help on this one!</p>