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.

One of the concerns I have is the way I've implemented the useEffect 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.

For example:

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)

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 getAlertsForId(...) twice, thus creating two separate calls for the same exact data.

So my question is, where should I be invoking the getAlertsForId(...) function?