Soy muy nuevo en React / Mobx. Me gustaría incorporar las mejores prácticas desde el principio. He creado varios componentes diferentes con varios tipos de datos y llamadas a la API.

Una de las preocupaciones que tengo es la forma en que implementé useEffect en mis componentes. Tengo varios componentes que representan el mismo almacén de estado y realizan la misma llamada para obtener los datos de la misma API. Si incluyo estos componentes en la misma página, cada componente invocará una llamada a la misma API, esencialmente obteniendo los mismos datos N número de veces.

Por ejemplo:

 const AlertsVisualization = ({ id }) => { useEffect(() => { alertsStore.getAlertsForId(id); }, [id]); return ( // render a visualization ) } export default observer(AlertsVisualization)

 const AlertsList = ({ id }) => { useEffect(() => { alertsStore.getAlertsForId(id); }, [id]); return ( // render a list ) } export default observer(AlertsList)

En este ejemplo, tengo dos componentes que usan el mismo almacén de estado pero lo representan ligeramente diferente. Si incluyo ambos componentes en la misma página, invocará getAlertsForId(...) dos veces, creando así dos llamadas separadas para los mismos datos exactos.

Entonces mi pregunta es, ¿dónde debo invocar la getAlertsForId(...) ?