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
– Ajeet Shah, Commented Apr 17, 2021 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
– keysl, Commented Apr 17, 2021 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
– MDMH, Commented Apr 17, 2021 at 14:02
See this article that explains all the use case of useEffect dmitripavlutin.com/react-useeffect-explanation — mohcine nazrhan
– mohcine nazrhan, Commented Apr 17, 2021 at 14:22

Aqeel · Accepted Answer · 2021-09-30 05:43:00Z

6

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.

answered Sep 30, 2021 at 5:43

Aqeel

9911 gold badge13 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related