title: React & Mobx - invoking API calls best practices
body: <p>I'm very new to React / Mobx. I would like to incorporate best practices from the get-go. I've built out several different components with various data types and API calls.</p>
  <p>One of the concerns I have is the way I've implemented the <code>useEffect</code> in my components. I have several components that render the same state store and make the same call to fetch the data from the same API. If I include these components in the same page, each component will invoke a call to the same API, essentially fetching the same data N number of times.</p>
  <p>For example:</p>
  <pre class="lang-js prettyprint-override"><code>const AlertsVisualization = ({ id }) =&gt; {
  
      useEffect(() =&gt; {
          alertsStore.getAlertsForId(id);
      }, [id]);
  
      return (
          // render a visualization
      )
  }
  
  export default observer(AlertsVisualization)
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const AlertsList = ({ id }) =&gt; {
  
      useEffect(() =&gt; {
          alertsStore.getAlertsForId(id);
      }, [id]);
  
      return (
          // render a list
      )
  }
  
  export default observer(AlertsList)
  </code></pre>
  <p>In this example, I have two components that use the same state store but render it slightly different. If I include both of these components on the same page, it will invoke the <code>getAlertsForId(...)</code> twice, thus creating two separate calls for the same exact data.</p>
  <p>So my question is, where should I be invoking the <code>getAlertsForId(...)</code> function?</p>