How to set fetch limit in useEffect?

Question

In my project i am trying to fetch in one time more than 5 API's together, but when i fetch using useEffect, it's continuously fetching, never stop fetching. so for that i want to set a limit for that.

is that possible to set a limit on useEffect to fetch 10 times and then it will stop fetching automatically?

Here is my codes:


const [dosa, setDosa] = useState([]);

    const hola= () => {
        const haspi = dv?.map((id) => {
            fetch(`https://www.roads.com/roads/roadscontroll/${id}`)
                .then((response) => response.json())
                .then((dosa) => setDosa((prev) => [...prev, [dosa]))
                .catch((error) => console.error(error))
        })
        return haspi ;
    }


    useEffect(() => {
        hola();
    });

here it's fetching continuously, so i want to set a limit for that. how can i do that for my codes? any one can help me to do that. Thanks for your helping in advance!

Note: for security reason i am using here false API.

`const [dosa, setDosa] = useEffect([]);` this is not correct, use `useState`. Also add a dependency array for `useEffect` which calls `hola()` — kiranvj, Nov 01 '22 at 04:00
You have set state within useEffect() function, which triggers useEffect everytime and cause a loop. You can use `useEffect(()=>{hola();}, [])` in order to just run the function once. — kiuQ, Nov 01 '22 at 04:04
@PeterTam In this case for my codes, i am getting empty array if i try this. — My Medi, Nov 01 '22 at 04:07
I perfer to use a temp array to store all the fetch records, and set state at last instead of setting state everytime after fetch request is returned. Maybe there are issues for using not updated states. You may follow the answer like [here](https://stackoverflow.com/a/74190527/20002061). — kiuQ, Nov 01 '22 at 04:11
whateve, is there have any way to set limit for useEffect to fetch specific time? — My Medi, Nov 01 '22 at 04:18

FutureJJ · Answer 1 · 2022-11-01T04:37:17.057

You could do something like this:

Solution 1: Add dependency array to the useEffect.

const [dosa, setDosa] = useState([]);

const hola= () => {
    const haspi = dv?.map((id) => {
        fetch(`https://www.roads.com/roads/roadscontroll/${id}`)
            .then((response) => response.json())
            // To avoid confusion use different name for the received data: dosa -> newDosa
            .then((newDosa) => setDosa((prev) => [...prev, [newDosa])) 
            .catch((error) => console.error(error))
    })
    return haspi ;
}


useEffect(() => {
    hola();
}, []); // Add empty dependency array here

Adding an empty dependency array prevents the useEffect from being called on every render. This way it is called only on the component mount.

This issue is occurring because you are calling setDosa on API success which causes the dosa state to update and the component to re-render and this causes the useEffect (with no dependency) to get called over and over again in a "loop".

More info on the difference between no dependency array and an empty dependency array over here: https://stackoverflow.com/a/66385496/7040601

Solution 2: Below is a less elegant solution to store the counter using a ref object and setting a limit to the counter.

const [dosa, setDosa] = useState([]);
const counterRef = useRef(0); // Ref initialied to value = 0
const limit = 3;

const hola= () => {
    const haspi = dv?.map((id) => {
        fetch(`https://www.roads.com/roads/roadscontroll/${id}`)
            .then((response) => response.json())
            .then((newDosa) => setDosa((prev) => [...prev, [newDosa]))
            .catch((error) => console.error(error))
    })
    return haspi ;
}


useEffect(() => {
    // Only call `hola()` if counter is within the limit
    if(counterRef.current < limit) 
        hola();
    counterRef.current++; // Increment the counter by 1
});

Note: In addition to this, I agree with @Peter Tam's suggestion in the comments, you may apply it on top of the above solutions:

I perfer to use a temp array to store all the fetch records, and set state at last instead of setting state everytime after fetch request is returned. Maybe there are issues for using not updated states. You may follow the answer like here.

the second one repeat 3 times render is not working for me – My Medi Nov 01 '22 at 06:16 — My Medi, Nov 01 '22 at 06:16

score 0 · Answer 2 · answered Nov 01 '22 at 04:42

You should not use useEffect to run API calls a fixed number of times for two reasons.

When the API calls don't work as expected, you can't be always sure that they'll work within, say, 10 attempts (if the service was down, for example).
When they do work, say, on the second attempt, the remaining 8 times you make the calls are just a waste of precious resources.

What you should instead do is to check the outcome of the API calls, and run the useEffect hook based on that. In your case, if the API call were successful, dosa array would be populated. Then your useEffect hook becomes this:

useEffect(() => {
  if (!dosa.length) {
    hola(); // only runs if array is not yet populated.
  }, [dosa.length]); // hook runs every time the array length changes.

How to set fetch limit in useEffect?

2 Answers2