React useEffect calls API too many time, How can I limit the API call to only once when my component renders?

Question

I am calling a get API in useEffect hook, to get the data before component mounts, but it's calling the API to many time and I am getting an error "To many API calls".

const [total, setTotal] = useState(0);
const [message, setMessage] = useState('');

useEffect(() => {
    covidApi.getData({url:'/totals'})
    .then((response) => {
        setTotal(response.data[0]);
        setMessage('');
        console.log(response.data);
    })
    .catch((error) => {
        setMessage("No data found");
        console.log(error);
    })
});

Output:

Browser Output

Please let me know is it the best way to get data from API before your component renders using useEffect hook.

Put **empty array** as effect's dependency: `useEffect(() => { ... }, [])`. Now this effect will run only once when component is **mounted**. — Ajeet Shah, Apr 17 '21 at 13:58
dependency array is not defined, [] :( also if the dependency changes too frequently, You may want to look at `debouncing` or `throttling` mechanisms — keysl, Apr 17 '21 at 13:59
Thanks a lot @AjeetShah it worked. can you please share some article on it(how to use useEffect as different life cycle method) if u have — MDMH, Apr 17 '21 at 14:02
See [How to call loading function with React useEffect only once](https://stackoverflow.com/a/53121021/2873538) — Ajeet Shah, Apr 17 '21 at 14:19
duplicate of - https://stackoverflow.com/questions/59606096/useeffect-re-renders-too-many-times#59606300 — Lakshman Kambam, Apr 17 '21 at 14:20
See this article that explains all the use case of useEffect https://dmitripavlutin.com/react-useeffect-explanation/ — mohcine nazrhan, Apr 17 '21 at 14:22
[React Docs - Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html) — Yousaf, Apr 17 '21 at 14:28
if you want call only once https://stackoverflow.com/a/65150997/10039122 — Yasin Tazeoglu, Apr 17 '21 at 15:04

score 5 · Accepted Answer · answered Sep 30 '21 at 05:43

Put a [] after the function in useEffect like this:

useEffect(() => {
    covidApi.getData({url:'/totals'})
    .then((response) => {
        setTotal(response.data[0]);
        setMessage('');
        console.log(response.data);
    })
    .catch((error) => {
        setMessage("No data found");
        console.log(error);
    })
}, []);

This will call the API only once.

React useEffect calls API too many time, How can I limit the API call to only once when my component renders?

1 Answers1