Infinite loop in useEffect when setting state

Question

I've got a question about useEffect and useState inside of it. I am building a component:

const [id, setId] = useState(0);
const [currencies, setCurrencies] = useState([]);

...
useEffect(()=> {
const getCurrentCurrency = async () => {
            const response = await fetch(`https://api.exchangeratesapi.io/latest?base=GBP`);
            const data = await response.json();
            const currencyArray = [];
            const {EUR:euro ,CHF:franc, USD: dolar} = data.rates;
            currencyArray.push(euro, dolar/franc,1/dolar);
            console.log("currencyArray", currencyArray);
             setCurrencies(currencies => [...currencies, currencyArray]);
          }
          getCurrentCurrency();
    }, [id, currencies.length]);

Which is used for making a new API request when only id change. I need to every time that ID change make a new request with new data. In my case now I have infinite loop. I try to use dependencies but it doesn't work as I expected.

why do you need currencies.length1 if you only want to update when ID change — Nicky Prabowo
– Nicky Prabowo, Commented Oct 20, 2019 at 11:09
even if have only id dependency there is infinite loop. I change the state inside useEffect so this is the cause but I don't know how to workaround it in dependency. I try to use multiple dependencies ( this is why i add currencies.length) but it doesn't work — Krzysztof Mansz
– Krzysztof Mansz, Commented Oct 20, 2019 at 11:13
const [id, setId] = useState(0); and then i change it somewhere in the handler for go between the slides in slider like this: const goToPrevSlide = () => { id === 0 ? setId(2) : setId(id-1); } const goToNextSlide = () =>{ id === 2 ? setId(0) : setId(id+1); } — Krzysztof Mansz
– Krzysztof Mansz, Commented Oct 20, 2019 at 11:20

Dennis Vash · Accepted Answer · 2019-10-20 11:30:51Z

1

You changing a value (currencies.length), which the useEffect depends on ([id, currencies.length]), on every call.

Therefore you cause an infinite loop.

useEffect(() => {
  const getCurrentCurrency = async () => {
    // ...
    currencyArray.push(euro, dolar / franc, 1 / dolar);

//                    v The length is changed on every call
    setCurrencies(currencies => [...currencies, currencyArray]);
  };
  getCurrentCurrency();
//                    v Will called on every length change
}, [id,currencies.length]);

You don't need currencies.length as a dependency when you using a functional useState, currencies => [...currencies, currencyArray]

useEffect(() => {
  const getCurrentCurrency = async () => {
    ...
  }
  getCurrentCurrency();

}, [id]);

Moreover, as it seems an exchange application, you might one to use an interval for fetching the currency:

useEffect(() => {
  const interval = setInterval(getCurrency, 5000);
  return () => clearInterval(interval);
}, []);

edited Oct 20, 2019 at 11:30

answered Oct 20, 2019 at 11:20

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

3 Comments

Krzysztof Mansz Over a year ago

Ok but why this is not working if i have only one dependency (id). My logic is described here: 1. When I mount component I would like to update default current state with currencies. 2. when i click button which change my id state i want to make new API request (by useEffect) and then I invoke my state once again with updated currencies from API.

Dennis Vash Over a year ago

Thats should work, just be sure on changing the id its different from the previous value

Krzysztof Mansz Over a year ago

Working only if I update state directrly by using: currencies.push(euro, dolar/franc,1/dolar); not by setCurrencies(currencies => [...currencies, currencyArray]);

Eslam Abu Hugair · Accepted Answer · 2019-10-20 11:23:07Z

0

you can just call the useEffect cb one the component mounted:

useEffect(()=>{
 //your code
 // no need for checking for the updates it they are inside the component
 }, []);

answered Oct 20, 2019 at 11:23

Eslam Abu Hugair

1,2101 gold badge12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Infinite loop in useEffect when setting state

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related