Why is react calling api so many times to load page?

Question

I am setting up a page using hooks to load data from a 3rd part api, after I get the data I am doing several calculations with the data before sending it to the component as props. It seems it is calling the api 1 time for each calculation, but I don't understand why.

Here is function calling api

const StockData = async () => {
    const stockData = await Axios.get(ApiString);
    return stockData;
};

export default StockData;

dashboard page index.js

const EcommerceDashboardPage = () => {
    const [close, setClose] = useState(10);
    const [allClose, setAllClose] = useState([0]);
    const [name, setName] = useState('Stock');
    const [ticker, setTicker] = useState('STK');
    const [previousClose, setPreviousClose] = useState(9);
    const [dailyChange, setDailyChange] = useState(10);
    const [changePrice, setDailyPrice] = useState(11);
    const [logo, setLogo] = useState('logo');
    const [arrow, setArrow] = useState('mdi mdi-arrow-up-bold');
    const [color, setColor] = useState('price-change-red');
    const [date, setDate] = useState(new Date().toLocaleString());
    const [closeShift, setShift] = useState(0);
    const [prevClose, setPrevClose] = useState(0);

    const roundToHundredth = (value) => {
        return Number(value.toFixed(2));
    };

    const GetStockData = async () => {
        var data = await StockData();
        setShift(data.data.c.length - 1);
        setPrevClose(data.data.c.length - 2);
        setClose(roundToHundredth(data.data.c[closeShift]));
        setPreviousClose(roundToHundredth(data.data.c[prevClose]));
        setDailyChange(roundToHundredth(100 * (1 - close / previousClose)));
        setDailyPrice(roundToHundredth(close - previousClose));
        if (changePrice < 0) {
            setArrow('mdi mdi-arrow-down-bold');
            setColor('price-change-red');
        } else {
            setArrow('mdi mdi-arrow-up-bold');
            setColor('price-change-green');
        }
        setDate(new Date().toLocaleString());
        setAllClose(data.data.c);
        return [];
    };

    const GetCompanyData = async () => {
        var data = await CompanyData();
        setName(data.data.name);
        setTicker(data.data.ticker);
        setLogo(data.data.logo);
        return [];
    };

    useEffect(() => {
        GetStockData();
        GetCompanyData();
    });

    // {close}
    // {name}
    return (
        <React.Fragment>
            <Row>
                <TitleWidget
                    close={close}
                    name={name}
                    previousClose={previousClose}
                    dailyChange={dailyChange}
                    changePrice={changePrice}
                    logo={logo}
                    ticker={ticker}
                    arrow={arrow}
                    color={color}
                    date={date}
                />
            </Row>
            <Row>
                <SplineAreaChart allClose={allClose} ticker={ticker} />
            </Row>
        </React.Fragment>
    );
};

export default EcommerceDashboardPage;

It should only be making 2 calls to the api, 1 for the StockData and 1 for the CompanyData

Answer 1

You didn't pass any dependencies to your useEffect array which causes it to run on every render. Since you're updating your state after your API calls, it will continually re-render and then re-fetch the data. Pass an empty dependency array instead which tells it to run only once and never re-run unless the component re-mounts entirely.

useEffect(() => {
  GetStockData();
  GetCompanyData();
}, []);